How to get Nightwatch tests running in CircleCI?

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>

score 2 · Accepted Answer · answered Apr 17 '17 at 20:57

After much trial and error, I finally have this working:

File examples:

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);
    })

How to get Nightwatch tests running in CircleCI?

1 Answers1