Replacing PhantomJS for HeadlessChrome

Like all great things, they must come to an end. PhantomJS you have been there for us for so long, and yet I’m sorry to say but now we must say goodbye. Many of you recently may have seen this post: https://groups.google.com/forum/#!topic/phantomjs/9aI5d-LDuNE, which was my red flag to begin removing Phantom in replacement of Chrome. And when Chrome announced v59.0 was stable, I thought it was time .

Over the past few years I’ve used PhantomJS on countless projects. It has worked very well, although not to say there is the occasional feature that does not work on PhantomJS. Safari, Firefox, Chrome, IE, and PhantomJS all have their differences, and if you’re a frontend guy ( or girl ) like me you’re probably using Chrome. In my experience I can think of about 1 or 2 times that I’ve had issues with the Chrome API and PhantomJS API differing. Or maybe ( most likely ) I was using it incorrectly.

Anyways I’m here to talk about Headless Chrome and how easy it is to replace PhantomJS with it. This has probably been the smoothest switch of technologies with regards to testing I’ve ever done. I just want to share with you what I did incase its not going smoothly for you! FYI this is for people that use Karma Runner. But I’m sure a lot of it can be applied to whatever frameworks/tools you may be using.

1. update to latest version of Chrome v59.0
2. update to the latest karma-chrome-launcher (my version = v2.1.1).
3. Created a customLauncher block in my karma.conf.js file. This is a feature of karma-chrome-launcher that allows you to create a new instance of Chrome with certain properties. You can set things like window size, headless mode, etc.

// karma.conf.js
{
  // rest of config file
  browsers: ['Chrome_headless'],
  customLaunchers: { 
    Chrome_headless: { 
      base: ‘Chrome’,
      flags: [
        ‘ — headless’,
        ‘ — disable-gpu’,
        ‘ — remote-debugging-port=9222’ 
      ] 
    } 
  }
}

3. If you have a “debug” mode, where you can open a regular instance of Chrome for debugging purposes, then you may want to update the `browsers` property:

browsers: isDebugMode ? ['Chrome'] : ['Chrome_headless']

And that is basically it!

Continous Integration?

You may be thinking…alright it works locally on my dev machine, but what about my continuous integration server, Matt?? Well our server’s here run on Linux Ubuntu and my only issue was needing to update to the latest Chrome. This issue was easily solved by a quick Google: https://www.ubuntuupdates.org/ppa/google_chrome?dist=stable.

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

And that’s completely it!

Although its sad to see PhantomJS go, its really not sad. Because now we no longer need to worry about another browser. We can develop on Chrome, and run our tests on Chrome. That list of 5 browsers that we need to support (Firefox, IE, etc) is now just 4. That means your life as a frontend developer just became that much easier.