PhantomJS 2 and Travis CI: We Beat Our Heads Against a Wall so You Don't Have To

harrison shared some links said
3

We're currently switching some of our components over to Facebook's React.js, which has grown on us much in the way that Facebook doesn't: pleasantly, rather than forced down our throats by distant relatives who would rather have us read their walls than bother contacting us directly with news, risking direct interaction. However, after introducing React, our integration tests started failing although we could manually verify the behavior.

This was a massive problem for us. We rely on automated testing to tell us when we've introduced a change to the site that could cause unforseen problems. Any time a change is pushed, Travis CI runs an instance of meh.com and uses PhantomJS, a "headless" browser that can be run via a command line and is primarily used to test websites without the need to completely render a page. While we were able to get the tests to pass using Google Chrome, Travis, having no way to display windows, has to use either Phantom or an external browser testing service.

So, eventually, we tracked the problem down to PhantomJS's lack of support for Javascript's bind method on functions, which the React core requires to run. PhantomJS very recently fixed this with its 2.0.0 release, so we upgraded it on our own machines and made the integration tests pass locally.

However, the tests continued to fail on Travis CI because there are currently no official binaries for PhantomJS 2.0.0, so Travis CI's default environment uses an older version of PhantomJS.

To resolve this, we emailed Travis CI support and they gave us a URL to their pre-built installation of PhantomJS for Ubuntu 12.04. We then altered our Travis config file to install from this URL and overwrite the existing outdated phantomjs binary before doing anything else.


# .travis.yml before_install:
- wget https://s3.amazonaws.com/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2
- tar -xjf phantomjs-2.0.0-ubuntu-12.04.tar.bz2
- sudo rm -rf /usr/local/phantomjs/bin/phantomjs
- sudo mv phantomjs /usr/local/phantomjs/bin/phantomjs

Bam! Now that Phantom's caught up to the current JavaScript feature set, we can rely on our tests again. Thanks to the folks at Travis for helping us out with this one!