Headless Browser Testing with Selenium and Playwright
Headless browser testing is testing a web browser without any user interface. It is different from a normal web browser as it does not contain any kind of visual component that can be seen by the user or tester. Headless browser testing has many advantages over normal browser testing. It decreases the data load, which makes the testing process faster than other web browser testing.
There are several automation testing tools available in the market that can be used to perform headless browser testing. These tools have their own advantages, features, and disadvantages as well. The testing team can choose the specific automation tool for headless browser testing according to their use case and requirements. But Selenium and Playwright are the two most popular automation testing tools that are used in the field of headless browser testing.
In this article, first, you will see a brief introduction about headless browser testing, Selenium, and Playwright, and then you will dive into the topic of how to use these frameworks for headless browser testing.
What is Headless Browser Testing?
Headless browser testing is simply defined as the process of testing a browser that is headless. Yes, you got it right, it is headless. By saying headless it means that the specific browser is not visible and you can not simply see the user interface of that browser. Before going to the headless browser testing, let us have a simple look at what a headless browser is.
What is a Headless Browser?
A headless browser is defined as the browser having no user interface and or it does not contain any GUI either. We can not say that the GUI is absent in a headless browser but the GUI is hidden in a headless browser. All the processes, tasks, and functionality are running in the background but you can not see that with your eyes on the screen. All the activities are running in the background of the system.
- Headless browsers have nothing to see on the screen like other normal web browsers.
- A headless browser also does all the work like a normal browser such as clicking, scrolling the page, downloading any content from the website, navigating through page elements, etc.
- In a headless browser, you need to use the command line prompt to control the interface to perform any task or to keep track of the changes.
- Some examples of headless browsers are Chromium, Firefox Headless, Splash, PhantomJS, etc.
Now coming to the headless browser testing. The testing that is done to examine the headless browser functionality and features without loading the GUI is known as Headless Browser Testing. When you perform website testing for a normal web browser, the test is done by loading the GUI components and all. But there are some issues with that type of browser testing. One of the major issues is that in this case, the testing loads a number of GUI components that load huge data and alternatively, the test speed degrades. Also, this increases the time consumption of the testing process.
Here comes the headless browser testing. As you know, there are no GUI components involved in headless browser testing, the test becomes faster and more reliable. When you use the headless browser testing approach, you will perform end-to-end tests where the browser will not load the application’s user interface. 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.
Selenium vs Playwright for Headless Browser Testing
Let us have a look over the differences between Selenium and Playwright automation testing tools and how they can be used for headless browser testing.
Selenium:
Selenium is an open-source framework that is used to perform testing for web applications and websites. Selenium can perform automation testing for websites and web applications for an assortment of browsers and working frameworks. This framework is a prior choice in the field of testing because it supports many programming languages such as Java, Python, JavaScript, C#, etc. Selenium permits the testing group to perform an iteration of the testing cycle in less time to mechanize the test cases, increasing testing productivity. These features of Selenium make the testing process bug-free and error-free.
The various components of Selenium are as follows:
- Selenium IDE
Selenium IDE (Integrated Development Environment) is the development tool that provides you with an interface where you can design your testing script. This IDE has many features designed for software testing, such as playback, using which you can record and browse all the interactions that you have done with the browser.
- Selenium Grid
With the help of Selenium Grid, you can run several test scripts on various machines at once. It consists of a hub server and numerous grid nodes, with the hub acting as a conduit for commands to reach the registered nodes.
- Selenium WebDriver
Selenium WebDriver allows the tester to directly communicate with the browser for the testing process, and it is controlled from the operating system (OS) level. You can create and execute the test cases using it.
Playwright:
A Playwright library is used to perform software testing for web applications. It is an open-source tool. Playwright framework is also used to perform single-page or multi-page application testing before making them live for the users. This framework supports web browsers, such as MS Edge, Chrome, Safari, etc. This compatibility across different web browsers allows the testing team to provide a seamless and smooth user experience for all types of users.
Using Playwright to perform software testing allows the testing team to execute it on various operating systems such as macOS, Windows, Linux, etc. Also, Playwright has features to adapt across different types of operating systems. Hence, you do not need to write different code or modify the code according to the operating system. the framework can do all this adaptation by itself.
Headless Browser Testing with Selenium and Playwright
Till now, you have an understanding of what are these automation testing tools, Selenium and Playwright. Now, you will see how to use these automation testing tools for headless browser testing. Here we will see each framework individually for headless browser testing using code examples.
Using Selenium
Selenium is a very popular and famous tool for browser automation testing. There are various reasons for its popularity like it is open-source which means you can access it for free. Also, it is able to run on various web browsers and different types of operating systems which makes it versatile in nature. Selenium web driver helps to deliver enhanced support to dynamic website pages, and using Selenium in headless mode can deliver great testing output. Also, you can use either Headless Chrome or Headless Firefox to execute the headless browser testing using Selenium.
- Using Chrome for Selenium: Using the Chrome browser, you can use the Selenium Webdriver to perform headless browser testing. There is an option namely “ChromeOptions” that can be used. It helps test the headless configurations to your Chrome web browser. To create an instance for ChromeDriver, use the code given below:
ChromeOptions options = new ChromeOptions()
options.addArgument(“headless”);
ChromeDriver driver = new ChromeDriver(options);
You can use the addArgument() method to execute the headless mode from the ChromeOptions class provided by the Selenium WebDriver.
- Using Firefox for Selenium: In Firefox browser, the process for headless browser testing using Selenium is almost similar to that of Chrome. The only difference is that you need to set a path for Gecko Driver that helps to execute the headless browser testing Firefox browser. With the Selenium WebDriver, we will be issuing the setHeadless (true) of the class FirefoxOptions. To perform headless browser testing in Firefox, use the code given below:
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();
}
}
Using Playwright
Playwright is an automation testing framework that is used to perform software testing for web applications. It is an open-source tool. Playwright has features to adapt across different types of operating systems and web browsers. Playwright framework performs the exchange of process requests between the client side and server side by using a single WebSocket connection only. This makes this framework much better than other website testing tools, such as Selenium HTTP Connection protocol.
To perform headless browser testing using Playwright, first create a package for this using the below command:
npm init –yes
Before moving ahead in this section, ensure you have the latest version of the package JSON in your system. Then run the command given below to install the automation testing tool Playwright in your system.
npm install playwright@0.13.0
Then use the command given below to run the headless browser testing on a 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();
})();
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’);
});
Lastly, run the command as an example given below to execute the test:
npx playwright test
It is recommended that the tester disable the headless mode after writing the first headless test script. And you can check what the differences are thereafter and before the headless mode.
Headless browser testing can also be done with cloud-based testing platforms like LambdaTest. LambdaTest, an AI-powered test orchestration and execution platform, revolutionizes web and mobile app testing by providing cross-browser, cross-platform, and real-device services in the cloud. This platform streamlines testing processes through its AI-driven orchestration and execution capabilities, enhancing the efficiency and reliability of web and mobile app testing.
Conclusion
A headless browser is defined as the browser having no user interface and or it does not contain any GUI either. You can use the command line prompt to control the interface to perform any task or to keep track of the changes in headless browser testing. Examples of headless browsers are Chromium, Firefox Headless, etc. The testing that is done to examine the headless browser functionality and features without loading the GUI is known as Headless Browser Testing.
Selenium is an open-source framework used to test web applications and websites. wright framework is also used to perform single-page or multi-page application testing before making them live for the users. To learn in detail about headless browser testing on LambdaTest, go to the official website of LambdaTest. Hope you have got an idea of how you can use the Selenium and Playwright automation testing tools for performing the headless browser testing. You can Happy Learning!
