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

harrison shared some links said Wed, Mar 4th 2015 at 1:07pm ET

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!

4 comments, 4 replies
Comment

lochlan said Tue, Mar 10th 2015 at 6:37pm ET:

Another way to handle this is just to include a Function.prototype.bind polyfill when the test runner loads. For my projects, using Karma, this means adding it to the test-main.js (which is perfect for keeping it outside of my project source!)

1
- Reply
- Whisper
- @lochlan A polyfill is a great idea here. We actually tried both approaches in parallel but got PhantomJS 2 up and running on Travis CI before we got the polyfill actually working.
  
  shawn said Tue, Mar 10th 2015 at 7:00pm ET
  - 0
  - Reply
  - Whisper
nicolaschenet said Tue, Mar 24th 2015 at 7:02am ET:
hmm, does not seem to work...

Travis returns this:
```
sudo: must be setuid root
The command "sudo rm -rf /usr/local/phantomjs/bin/phantomjs" failed and exited with 1 during .
Your build has been stopped.
```
0
- Reply
- Whisper
- @nicolaschenet bizarro, it's still working for us. i don't see anything in our .travis.yml file that would make sudo behave any differently for us than for others.
  
  katylava said Tue, Mar 24th 2015 at 1:00pm ET
  - 0
  - Reply
  - Whisper
- @nicolaschenet Are you using the new container-based Travis workers? sudo will not work there: http://docs.travis-ci.com/user/workers/container-based-infrastructure/
  
  jonnor said Sat, May 30th 2015 at 9:58pm ET
  - 1
  - Reply
  - Whisper
- @jonnor I've changed the way we handle this install. No more sudo ;)
  
  nicolaschenet said Tue, Jun 2nd 2015 at 3:53am ET
  - 1
  - Reply
  - Whisper
nicolaschenet said Wed, Mar 25th 2015 at 4:50am ET:
@katylava Maybe it's our configuration or something... Anyway, Here's a workaround:

(In the "install" hook)
- mkdir travis-phantomjs
- wget https://s3.amazonaws.com/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2 -O $PWD/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2
- tar -xvf $PWD/travis-phantomjs/phantomjs-2.0.0-ubuntu-12.04.tar.bz2 -C $PWD/travis-phantomjs
- export PATH=$PWD/travis-phantomjs:$PATH
0
- Reply
- Whisper
marklog said Mon, Jun 15th 2015 at 10:56am ET:

What does this have to do with drones?

0
- Reply
- Whisper