Using headless Chrome instead of PhantomJS for Ember testing

Last month Chrome 59 was released with headless browser support. This means Chrome can now run without rendering any visual output — which makes it perfect for running Ember tests from the command line.

By default Ember uses PhantomJS for command-line tests. Phantom does a pretty good job, but it doesn't always faithfully mimic our end-user's browser. You might have come across this yourself if you've ever had a test pass in Chrome but fail in Phantom. Since we generally want our testing environment to be as close as possible to the production environment our users use, swapping Phantom for Chrome is a win.

So, out with Phantom and in with headless Chrome. To get Ember using headless Chrome, open the testem.json file in your Ember app and add the following:

/* eslint-env node */
module.exports = {
  "test_page": "tests/index.html?hidepassed",
  "disable_watching": true,
  "launch_in_ci": [
    "Chrome"
  ],
  "launch_in_dev": [
    "Chrome"
  ],
  "browser_args": {
    "Chrome": [
      '--headless',
      '--disable-gpu',
      '--remote-debugging-port=9222',
      '--window-size=1440,900'
    ]
  }
};

The browser_args section is what boots Chrome in headless mode.

One neat thing about this setup is that even though Chrome is running without any visual output, we can actually access our headless Chrome instance remotely by visiting http://localhost:9222. This lets us see how Chrome has rendered our application, and even lets us interact with the pauseTest helper or debugger statements. Pretty neat!