Using Headless Chrome for your Selenium tests with WebdriverIO

A brief guide on wiring Headless Chrome from the JavaScript perspective

Google announced in April that Headless Chrome was being shipped with Chrome 59 and Eric Bidelman provided the rundown on how to get started with using this new feature, give it a read if you have not.

The FAQ section of the post referred those who were interested in using Headless Chrome with Selenium tests to an article by intoli.com but unfortunately that article is from the perspective of Python.

I am going to show you how easy it is to wire Headless Chrome up with WebdriverIO and run your Selenium tests in with a Headless browser.

• Install the latest version of Chrome

• Configure the capabilities property within the wdio.conf.js file

{
browserName: 'chrome',
chromeOptions: {
args: ['--headless', '--disable-gpu', '--window-size=1280,800'],
binary: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'
}
}

I’ve provided the above snippet to make it easy to copy and paste into your capabilities section of the wdio.conf.js file.

The flags being passed via argsare:

1. --headless denoting to run Headless mode
2. --disable-gpu is a temporary requirement to deal with known bugs
3. --window-size sets the dimension of your Headless browser

A full list of Headless switches here.
A full list of chromium switches here.

binary points to the Chrome binary that supports Headless mode. If you did not update to Chrome 59, you will need to point to Chrome Canary.

The location of the binary differs from platform to platform, but here are common locations.

That’s all there is to it!

I hope this post gets people up and running with WebdriverIO and Headless Chrome!

References:
WebdriverIO configuration file
Getting Started with Headless Chrome
Chrome command line switches
Headless Chrome switches