An Introduction to Headless Browser Testing
Headless browser testing is becoming more popular in software testing these days. With Chrome and Firefox having launched their versions with support for headless flags, it has become even much easier. In this blog, let’s explore what exactly is ‘Headless browser testing’, its benefits and tools available for headless browser testing.
The ultimate aim of test automation is to increase the speed of testing. We use tools such as Selenium to automate tests for web applications to run on real browsers such as Chrome, Firefox, Safari, etc to make sure the application’s users will experience a flawless experience. But running your tests on these real browsers have some limitations or challenges.
- You cannot run these tests on any remote Unix/Linux servers since these tests always need a display for execution.
- The GUI and other features in a real browser that enriches the browsing experience actually make them heavier, more resource intensive, and slower to execute your automated commands.
- It’s quite difficult and complex to scale a large number of real browser tests execution in a Continuous Integration environment. This is because; to run the tests on CI servers you need additional configuration for a display server.
The solution for the challenges mentioned above is to use a ‘Headless Browser’ for running your automated tests. So, what is a headless browser?
What is Headless Browser?
A headless browser is nothing but a web browser without a graphical user interface. These browsers provide automated control of a web page in an environment similar to the real web browsers, but are executed via a command line interface or using network communication. A headless browser enables you to access web pages but does not actually show them to the user but can pipe the contents of the webpage to another program. Thus, in case of a headless browser, nothing will appear on the screen when you start up a headless browser and the programs run in the background. They are able to render and understand HTML the same way a normal browser would and can parse and interpret web pages. Thus, a headless browser will be capable of parsing JavaScript, clicking on links, coping with any downloads, etc. To sum up, a headless browser provides you a real browser context without any of the speed and memory costs required to run a fully fledged browser with a GUI.
Some of the popular uses for headless browsers are:
- Test automation of web applications
- Take screenshots of web pages
- Run automated scripts for JavaScript libraries
- Scraping websites for data
There are many headless browsers providing a complete or near-complete headless implementation. Some of the popular ones are- Google Chrome (since version 59), Firefox (since version 55), PhantomJS, HtmlUnit, Splash, Nightmare, TrifleJS, etc.
Headless browser testing
So, running your tests in a headless browser is called headless browser testing. That means there is no browser UI, no GUI of any sorts meaning there is no need to have the extra overhead of the browser GUI. One of the primary reasons for using headless browser testing is speed and performance. Headless browsers let you run your tests more quickly in a real browser environment. The headless engines run your tests in the background without the browser UI starting up and hence you can bypass all the time a real browser takes to load CSS, JavaScript and open and render HTML. You can experience that headless browsers make your scripts run 2x to 15x times faster compared to using a real browser.
Another use case for using headless browsers is when you need to scrape some website or extract data to help you with a test. For scraping a website, you need not render a full browser; rather you can go to it heedlessly and just scrape the HTML. When you use headless you have less overhead, and hence you will get the results quicker.
Thus, headless browsers save a lot of time in testing, especially for developers while unit testing their code changes for websites and mobile apps. It is a quick way to ensure that your code is ok without spending a lot of time is testing. Headless browsers can even be used to automate the rendering and screen capturing of website images to perform layout checks in an automated way.
Besides the ones we have discussed so far, headless browsers are a great solution for many other instances like running tests on machines without display, testing SSL, simulating multiple browsers on a single machine, running tests on headless systems like Linux OS without GUI, retrieve and render PDFs, etc.
Thus, automated headless browser testing stands out to be a great tool for testing software quickly across various environments, and covers the majority of your software testing needs. However, you cannot use it if you need to visually see the test run or you need to mimic real users. And at the end of the day, your real users wouldn’t be using headless browsers anyway. So, to ensure the complete quality of your application, you cannot solely depend on headless browser testing. You would have to go with running your tests on real browsers itself. But, like I already mentioned before, it is a great time saver for developers who want to run unit tests and can even be used for running smoke tests in production quickly. So, choose the options based on your test goals.
Tools for Headless Browser testing
It was only recently, about a year back, that both Chrome and Firefox added support for a native headless mode. Before that, for headless testing, we had to use open source headless browsers such as PhantomJS or ZombieJS. These browsers were not up to date and many times did not support the latest web platform features that real users use. But, with Chrome and Firefox having added headless mode, you can easily get real browsers running with fast startup.
There are various browser engines and libraries out there to help you with headless browser testing these days. Here is a list of some of the most popular headless engines and libraries which are used for headless browser testing.
- PhantomeJS - PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. Support for multiple web standards makes PhantomJS flexible and highly capable. PhantomJS is no longer actively maintained by its original authors after the launch of headless chrome and Puppeteer. However, PhantomJS continues to be a popular choice for headless browser automation.
- Headless Chrome: Chrome version 59 or higher allows you to work in headless mode. It is a lightweight headless browser and saves a lot of memory and enhances performance. Headless Chrome provides a number of tools that can help you do various tasks in the headless mode.
- Headless Firefox: Headless testing is offered by Mozilla for version 56 of Firefox.
- Splash: Splash is a JavaScript rendering service with an HTTP API. It's a lightweight browser with an HTTP API, implemented in Python using Twisted and QT.
- Nightmare: Nightmare is a high-level browser automation library built as an easier alternative to PhantomJS. It runs on the Electron engine.
- HtmlUnit: HtmlUnit is a "GUI less browser for Java programs". Written in Java, HtmlUnit allows you to use Java code to automate many of the basic ways in which users interact with websites.
- CasperJS: CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser and SlimerJS (Gecko).
- Puppeteer: Puppeteer is an easy to use Node.js library to control headless chrome Node API from the Chrome DevTools team.
- Selenium WebDriver: Not to forget the most popular test web testing automation tool out there. It can very well be used to run your tests in headless browsers like HTMLUnit, PhantomJS, Headless Chrome, Headless Firefox, etc.
That was all about headless browser testing. Hope the article helped you get some idea on what is headless browser testing all about. Enjoy automating headless!
How much is a great User Experience worth to you?
Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.
