What is Headless Browser Testing and Why is it Important?

The software development and testing industry has come a long way with various techniques to lower the time-to-delivery ratio. Agile methodology is one of the industry’s techniques to decrease the cost while enhancing the quality. However, the testing industry faces some problems while testing web applications on different browsers. This is where headless browser testing comes into the picture.

Headless browser testing not only increases the efficiency of testing your web applications but also provides ease of testing those apps. Let us learn what a headless browser is, its advantages, and why it is important. Read on. 

What is a Headless Browser?

We know that the User Interface or UI of any software is its most integral part. So, when it comes to Headless Browsers (Yep! You heard it right, it is called “headless”), it means a browser without a user interface or “head.” So, when the browser is headless, the GUI is hidden. Therefore, when you use a headless browser to access any website, you can’t see anything. However, the program runs in the background.

A headless browser is similar to a normal browser that performs functions such as navigating pages, clicking links, downloading content, and many more. But, with a normal browser, you can check each step and proceed with the help of a GUI presentation. At the same time, you will use Command-line or Console Interface to keep track of changes.

Importance Of Headless Browser

One clear advantage while using headless browsers is that they are faster than your typical browsers, as you can bypass all the time you take to load the CSS. But this is just one advantage.

Other advantages include:

• Scraping Websites: You can scrape the HTML of a website without rendering the full browser. 
• Shorter Development Time: Checking the code changes for websites from the command line saves developers a lot of time and effort.
• Performance Monitoring with Headless Scripts: You can monitor the performance of network applications using headless browsers. Many developers automate screen capture of the website image to check the layouts of their website. 

What Is Headless Browser Testing?

Developers have been using UI-driven testing to ensure the proper working of their programs for quite some time now. However, there are many problems with UI-driven testing. The biggest of them is stability. Sometimes UI-driven testing will fail to interact with the browser. The other problem is the prolonged performance that you will encounter. The answer to this problem is headless browser testing. 

With headless browser testing, you will be performing end-to-end tests where the browser will not be loading the user interface of the application. Therefore, everything runs faster, and the tests interact with the page directly, eliminating any chances of instability. Your tests become more reliable, faster, and efficient.

When To Use Headless Browser Testing?

Depending on your testing goals, you can choose headless browser testing for your project. It is not resource-intensive, has scripted automation, is relatively weightless, and allows rapid execution. Moreover, you can write a UI test and integrate it with the build process instead of checking each of them manually, giving you better results. 

Some cases where you may use headless browser testing are:

• Automation of HTML responses like form submission, mouse-clicking, etc. 
• Handling JavaScript execution 
• Scraping the content from the website 
• Monitoring the network
• Handling Ajax Calls 
• Generating screenshots of webpages

This was just the tip of the iceberg, and there are many more use-cases. However, you should know that headless browser testing has its usage, whereas normal testing has its own. Use the combination of the two to ensure you get the best of both worlds.

Famous Headless Browsers

If you wish to use headless browsers for testing your web apps, then here are some famous ones for you, 

• Zombie.JS
• HTML Unit 
• Headless Fox 
• Headless Chrome
• TrfileJS
• PhantomJS and many more

Frameworks used for Headless Browser Testing

1. Selenium

Selenium is a free and open-source tool that is great for automation. It supports various browsers that run on different operating systems. Selenium web driver delivers enhanced support to dynamic web pages, and using Selenium headless can deliver great results. Moreover, you can use either Headless Chrome or Headless Firefox to execute the headless browser Selenium.

• Using Chrome for Selenium: With Chrome, you need Selenium WebDriver, which will provide you with a class called “ChromeOptions”. This class can provide headless configurations to your Chrome. Use the below code to create an instance for ChromeDriver.

ChromeOptions options = new ChromeOptions()
options.addArgument("headless");
ChromeDriver driver = new ChromeDriver(options);

With the addArgument() method, you can execute the headless mode from the ChromeOptions class delivered by the Selenium WebDriver.

• Using Firefox for Selenium: The process is similar to that of Headless Chrome. But here we will be setting a path for Gecko Driver for executing the headless mode. With the Selenium WebDriver, we will be issuing the setHeadless (true) of the class FirefoxOptions. Use the below code for running Headless mode in Firefox.

FirefoxOptions options = new FirefoxOptions();
options.setHeadless(true);
WebDriver driver = new FirefoxDriver(options);
driver.get("https://demoqa.com/");
System.out.println("Title of the page is -> " + driver.getTitle());
driver.close();
}
}

2. Playwright

Playwright, for automating several browsers, has a high level of APIs. Before you set up Playwright for headless browser testing, ensure that you have the latest versions of Node.JS and npm on your system. Create a package for this project using the command. 

npm init --yes

You would be having package.json and run the given command to install Playwright on your system

npm install playwright@0.13.0

Let us now take a look at a script to run that on a test website

const playwright = require('playwright');

(async () => {
const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto('https://native-land.ca/');
await page.screenshot({ path: 'example.png' });

await browser.close();
})();
Or you can also use the following script-
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
const title = page.locator('.navbar__inner .navbar__title');
await expect(title).toHaveText('Playwright');
});

Now run the following command as an example 

npx playwright test

Moreover, we recommend you disable the headless mode when you write your first headless script. By disabling the headless mode, you will be able to see what your script is doing.

3. Puppeteer

Puppeteer is undoubtedly one of the most popular headless frameworks out there. Similar to Playwright it comes with its own browser profile. Create a script to navigate to your test website by using the following code:

const puppeteer = require('puppeteer')
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://bstackdemo.com/')
await browser.close()
})()

Remember that by default, Puppeteer is running on headless mode, so you won’t be seeing anything happening in the browser even if you are running your script.

How to Execute Headless Browser Testing?

You can enable Headless Browser Testing using codes in different browsers. Here’s an example using Cypress:

If you wish to execute headless mode in Cypress, execute the command

cypress run

If you are looking to run only one specific document, you can pass that as an argument by using the “cypress run” command as given below,

cypress run --spec cypress/integration/example.spec.js

Below is a test script

{
"name": "sample-project",
"version": "1.0.0",
"description": "Sample project for the Pinches of Cypress series",
"main": "index.js",
"scripts": {
"test": "cypress run"
},
"keywords": ['cypress.io', 'testing', 'cypress'],
"author": "Walmyr Filho <wlsf82@gmail.com> (https://walmyr.dev)",
"license": "MIT",
"devDependencies": {
"cypress": "^6.4.0"
}
}

You can now have as many scripts as you want. For example

"scripts": {
"cypress:open": "cypress open",
"cypress:ci": "cypress run",
"cypress:smoke-test": "cypress run --spec cypress/integration/smoke-test.spec.js"
},

If the above commands are not npm scripts, it is necessary to add npx as a prefix to execute them. 

Wrapping It Up

Headless Browser Testing is a faster, more reliable, and more efficient way of testing your web applications on a browser. However, a real desktop browser provides you with a real representation of your website when you are using it for testing. So, you can switch between real and headless browsers depending on the use and scenario to have better results.

Automation testing with Puppeteer allows testers to achieve precisely this, leading to the creation of better applications in shorter durations. By integrating Puppeteer with BrowserStack, QAs can expand test coverage by running parallel tests.

Run Puppeteer With BrowserStack Automate