Running Travis CI Unit Tests Using Google Chrome

Maayan Glikser

Setting up Travis to work with PhantomJS is easy and fast however it makes more sense to run tests against a browser your users might be using. While PhantomJS gives a good approximation of a modern browser, some things might pass tests in PhantomJS but fail on Chrome.

In order to test in Google Chrome we need to take 3 steps:

1. Configure Travis to install Google Chrome

We need to configure .travis.yml to install it on the local testing machine:

  • Configure the machine machine to have sudo access and use the trusty beta builds.
sudo: required  
dist: trusty
  • Use the before_install hook to perform the installation before the tests run.
before_install:  
 - export CHROME_BIN=/usr/bin/google-chrome
 - export DISPLAY=:99.0 
 - sh -e /etc/init.d/xvfb start
 - sudo apt-get update
 - sudo apt-get install -y libappindicator1 fonts-liberation
 - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
 - sudo dpkg -i google-chrome*.deb

In short what this does is run a fake window manager so chrome thinks it isn’t running on a headless machine, gets the latest package updates and installs Chrome and it’s dependencies.

The complete config might look something like this:

sudo: required  
dist: trusty  
language: node_js  
node_js:  
 - "4.2"

before_install:  
 - export CHROME_BIN=/usr/bin/google-chrome
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start
 - sudo apt-get update
 - sudo apt-get install -y libappindicator1 fonts-liberation
 - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
 - sudo dpkg -i google-chrome*.deb

2. Configure Karma

Make the following changes to your karma.conf.js file:

  1. Add a custom launcher for running chrome with sandbox mode disabled.
  2. Change the browser target to our custom launcher when tests are running in Travis.
  3. Include the following in your configuration object:
customLaunchers: {  
  Chrome_travis_ci: {
    base: 'Chrome',
    flags: ['--no-sandbox']
  }
}

You can use the TRAVIS environment variable to check if the tests are running under Travis currently and change karma’s browser target.

if(process.env.TRAVIS) {  
  configuration.browsers = ['Chrome_travis_ci'];
}

3. Win!

That’s it! now when Travis runs our tests it will first install Google Chrome and run the tests in Chrome.

Happy testing!

Popular