Running Protractor tests with a headless browser on Travis CI

Due to crashy behaviour it is not recommended to run protractor tests with PhantomJS

https://github.com/angular/protractor/blob/master/docs/browser-setup.md

Personally I was fed up with my builds sporadically failing and having to run my tests multiple times just to get them to pass on my dev box. I decided to switch to using plain firefox but this then caused the problem of what to do on our CI system which is not attached to a monitor.

xvfb (X Virtual Framebuffer) to the rescue, xvfb is a virtual display for linux boxes. It allows you to use a standard firefox browser and webdriver to execute your tests in a headless environment.

To setup on travis add these lines to your .travis.yml...

beforescript:

- "export DISPLAY=:99.0"

- sh -e /etc/init.d/xvfb start
- nohup bash -c "./nodemodules/protractor/bin/webdriver-manager start 2>&1 &"
- sleep 5

script:

- grunt travis-protractor

Note: If like me you were using the grunt task seleniumstart then this will fail on travis with a selenium error "[launcher] Error: UnknownError: Bad request". I have not figured out why this happens yet however manually starting the webdriver in the beforescript works just fine.

For a full example of our travis config please see the below file:

https://github.com/DigitalInnovation/mns-digital-blog/blob/master/.travis.yml