How to get Nightwatch tests running in CircleCI? - php

Question

I am trying to get Nightwatch tests running in CircleCI and it has been a bit of a ...nightmare
It seems that CricleCI is not set up to run a webserver for a PHP app.
CircleCI version of the Chrome browser ~54 is not compatible with Nightwatch, which is asking for >= ~55
CircleCI's Chrome cannot find my local.webapp.dev domain, and gives the error ERR_ICANN_NAME_COLLISION
I have setup the web server, using the following apache config, modified from the recommended version in the CircleCI docs:
<VirtualHost *:80>
LoadModule php5_module /opt/circleci/php/5.6.17/libexec/apache2/libphp5.so
DocumentRoot /home/ubuntu/phpwebapp
ServerName local.webapp.dev
<FilesMatch \.php$>
SetHandler application/x-httpd-php
</FilesMatch>
</VirtualHost>

Answer 1

After much trial and error, I finally have this working:
File examples:
circleApache.conf
circle.yaml
Nightwatch.json
package.json
The tests are run automatically by Circle using the package.json:
"test": "./node_modules/.bin/nightwatch --env circleci"
This picks up and runs the tests from your Nightwatch.json:
"circleci" : {
"output_folder" : "${CIRCLE_TEST_REPORTS}",
"launch_url" : "http://local.phpwebapp.dev",
"selenium_host" : "localhost",
"selenium_port" : 4444,
"screenshots" : {
"enabled" : false,
"path" : ""
},
"desiredCapabilities" : {
"browserName" : "chrome",
"marionette": true
}
}
CircleCI machines are using an older version of Chrome which is not compatible with the current version of Selenium/Nightwatch. Chrome needs to be updated in the pre dependencies of circle.yaml:
dependencies:
pre:
# Update Google Chrome.
- google-chrome --version
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
- sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb stable main" >> /etc/apt/sources.list.d/google.list'
- sudo apt-get update
- sudo apt-get --only-upgrade install google-chrome-stable
- google-chrome --version
The Circle docs forget an important piece in the apache conf file, you must set the allow/deny rules for your webroot directory, the port is also changed to use the default port 80:
<VirtualHost *:80>
LoadModule php5_module /opt/circleci/php/5.6.17/libexec/apache2/libphp5.so
DocumentRoot /home/ubuntu/phpwebapp
ServerName local.phpwebapp.dev
<FilesMatch \.php$>
SetHandler application/x-httpd-php
</FilesMatch>
<Directory /home/ubuntu/phpwebapp>
AllowOverride all
Require all granted
</Directory>
</VirtualHost>
You must then activate all the required Apache modules and load your conf into Apache, using circle.yaml:
dependencies:
...
post:
# circle seems to expect this but doesnt install it
- sudo apt-get install libapache2-mod-php5
# copy apache config file
- sudo cp ~/phpwebapp/circleApache.conf /etc/apache2/sites-available
# give phpwebapp to apache
- sudo chown -R www-data:www-data ~/phpwebapp
- sudo a2enmod rewrite
- sudo a2enmod headers
- sudo a2ensite circleApache
# DocumentRoot doesnt work, so symlinking instead
- sudo rm -r /var/www/html
- sudo ln -s /home/ubuntu/phpwebapp /var/www/html
- ls /var/www/html
- sudo service apache2 restart
# add local.phpwebapp.dev to /etc/hosts
- sudo sh -c "echo 127.0.0.1 local.phpwebapp.dev >> /etc/hosts"
The a2enmod lines enable the necesary apache modules rewrite and header for the PHP app.
a2ensite enables the configuration file and your domain. Certain domains, like *.dev will also require adding a line to /etc/hosts:
- sudo sh -c "echo 127.0.0.1 local.phpwebapp.dev >> /etc/hosts"
This was realized when the Circle Chrome browser was giving the error ERR_ICANN_NAME_COLLISION. The error was uncovered by printing the source of the test page via Nightwatch:
browser
.url("http://www.local.phpwebapp.dev")
.source(function (result){
// Source will be stored in result.value
console.log(result.value);
})