Automating tasks and tests with Headless Browser Testing

Headless Browser Testing is a way to run a browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Other browsers have followed suit, with Firefox now offering a headless mode as well.

It’s important as it helps to catch issues, which are not easily reproducible in unit tests. These can range from security related issues like CORS to web platform feature support.

Historically, automated browser testing has been hard. The standard solution has been to run Selenium, either singly or within a distributed grid. Selenium brings a common protocol to run the same tests in different browsers — even on remote servers.

But running real browsers comes with a cost:

• The browser startup is slow.
• To run the tests on CI servers you need additional configuration for a display server.

To get around these issues we have often used a headless browser like PhantomJS instead. This is nice, because it starts faster and works on CI environments without further configuration.

However, it comes with other issues:

• The browser is not up to date and does not support the latest web platform features.
• People don’t actually use this browser, so their experience might differ slightly.

The good news is, that both Chrome and Firefox have recently added support for a native headless mode. This means you can easily get real browsers running with fast browser startup and zero CI configuration.

In addition we see browsers and the community developing features and tools around headless mode:

* Chrome and Firefox allow to take screenshots of a webpage from command line.
* Puppeteer is a very easy to use Node.js library to control headless Chrome.
* Rendertron uses a headless Chrome inside Docker to provide a rendering API for modern websites. It can be used to enable server side rendering for progressive web apps.

Originally published at https://blog.red-badger.com on July 24, 2018.