Understanding Headless and Headed Browsers within App Development

In the same way that web application developers and testers have choices around frameworks and languages, they also have the option to choose whether to exercise their web application against a web browser with its UI loaded (that is, headed) or its UI unloaded (that is, headless).

The decision regarding how to use the web browser depends on the goal and objectives behind the developer’s and tester’s actions. We’ll cover these methods in a bit more detail next.

Choosing between headed browsers and headless browsers

A headless browser is a normal browser that simply doesn’t load its UI during runtime. Using a headless browser could be extremely beneficial when there’s no need to explore any elements or actions on the browser UI, and the main objective is to ensure that tests or other actions on the browsers are running properly. Another scenario where headless browsers can become very cost-effective is when running a massive set of tests in parallel where there’s no need to view the browser UI. Such execution will run much faster due to the savings on memory and other hardware resources that UI browsers typically consume, along with the environment initiation time that each browser would typically take to render the HTML pages. Additionally, we can consider the parallel-testing-at-scale use case as part of a regression build within CI after or in parallel with the UI-based cross-browser testing.

Strategic use of headless browsers

It’s important to understand that developers and testers can’t rely on only headless browser testing, which is harder to debug and doesn’t always expose the real end user experience across the different platforms. Combining headed testing with headless testing should be strategically planned and executed by the different teams. All major browser vendors, including Google, Mozilla, and Microsoft, offer a headless option that the end user can turn on through command-line flags or within the various test automation frameworks, such as Selenium and Puppeteer.

Sample configuration for headless testing

Selenium offers a nice set of code samples that can be used to launch any of the supported web browsers in headed or headless mode. Here’s a sample configuration within the Selenium 4 framework that would launch the Chrome browser in headless mode: