6 Popular Headless Browsers for Web Testing
How do you know if the user interface (UI) of a website you're developing works as it should and the site as a whole delivers the optimal user experience (UX)? Headless browsers give you a fast, lightweight way to automate high-level actions and get an idea of how well your site operates in common scenarios.
Many headless options are available, including headless versions of popular browsers like Chrome and Firefox and tools to simulate several different browsers. Familiarize yourself with the benefits of headless testing, and learn more about the possibilities available so that you can select the best browsers to use for web development and testing.
Basics of headless browsers
Headless browsing may seem like an odd term, but it's simply a name for a browser or browser simulation without the recognizable graphical interface. Instead of testing a site or performing common actions using familiar graphical elements, use cases are automated and tested with a command-line interface.
Headless browsers are commonly used for:
- Website and application testing
- JavaScript library testing
- JavaScript simulation and interactions
- Running one or more automated UI tests in the background
These actions help developers confirm whether or not common website activities flow smoothly and can identify potential problems with UI and UX. Since the experience of the end user is paramount in today's highly personalized web environment, it's crucial to work out as many bugs as possible before launching the public version of a site.
Common use cases for headless testing
What use cases should you test with headless browsers? Consider the most frequent actions users may take on any given page. Each point at which a user types, clicks or otherwise interacts with on-page elements is a point at which something could go wrong, and you're better off finding out about and fixing problems in the testing stage than discovering glitches weeks or even months later when complaints come pouring in.
In a headless testing environment, you can write and execute scripts to:
- Test basic and alternative flows
- Simulate clicks on links and buttons
- Automate form filling and submission
- Test SSL performance
- Experiment with various server loads
- Get reports on page response times
- Scrape useful website code
- Take screenshots of results
Testing these use cases provides you with a solid overview of how a site's UI performs and gives you essential information for making changes before deployment.
Choosing a headless browser
Today's websites present a number of complex use cases developers didn't have to think about in the past. An increased focus on engagement creates more elements with which users can interact, and ecommerce sites, in particular, can require complex multi-level flows for proper navigation. Any problem impeding a smooth experience for users can undermine the success of the site.
Keep this in mind as you evaluate popular headless browsers. You want a lightweight solution with very little draw on resources so that you can run it in the background without slowing down development work, but the same solution must allow you to execute every test necessary to simulate the expected actions of target users.
Not all headless browsers are suited for the same testing scenarios, so you may have to try several different options to find the right combination of tools for your development needs. Take a look at these six popular choices for web developers.
1. Firefox headless mode
With the launch of version 56 of Firefox, Mozilla began offering support for headless testing. Instead of using other tools to simulate browser environments, developers can now connect several different APIs to run Firefox in headless mode and test a variety of use cases.
Headless Firefox may be driven by:
Many developers appear to prefer Selenium as an API for headless Firefox testing and automation, but you can use the option with which you're most comfortable with for scripting and running basic unit tests.
With all the potential interactions a user can have on a modern website, using Firefox headless to drill down to individual elements is a helpful part of the development process. Whereas a user may encounter a problem as part of a complex flow and become frustrated trying to identify and report what went wrong, you can use Firefox in headless mode to work out the kinks of each individual interaction in a flow.
2. Headless Chrome
Developers familiar with Chrome can launch version 59 or later in headless mode to utilize all the possibilities afforded by Chromium and the Blink rendering engine. This lightweight, memory-sparing headless browser gives you the tools to:
- Test multiple levels of navigation
- Gather page information
- Take screenshots
- Create PDFs
Navigation is an especially important part of modern website environments and is becoming even more critical with the continued increase in mobile users. Try headless Chrome when you want to make sure users can move easily throughout a site. Collect reports and images of how the site responds, and use this information to make changes to improve the UI.
3. PhantomJS
Complexity is commonplace in the modern internet landscape, and PhantomJS is built to handle it all using basic command line testing. This headless WebKit is scriptable via the JavaScript API and uses CasperJS to handle testing. Capable of simulating full navigation scenarios, PhantomJS can reveal all the places where a user may encounter errors while browsing.
Support for multiple web standards makes PhantomJS flexible and highly capable. Page automation, network monitoring, and other important features allow you to simulate everything from the most basic user interactions to flows containing multiple inputs. Use this headless option for:
- Testing navigation
- Simulating user behavior
- Working with assertions
- Taking screenshots
Another benefit of PhantomJS is its open source status. The program was released in 2011 and is still being updated by dedicated developers. Check out the official GitHub repo.
4. Zombie.js
Zombie.js is another lightweight framework used to test client side JavaScript in a simulated environment without a browser. The current version of Zombie (Zombie 5.x) is tested to work with Node.js versions 4-6.
A few benefits of Zombie.js include:
- Runs on Node.js making it easy to integrate with your project
- Fully featured API
- Insanely fast
Zombie JS also provides a set of assertions that you can access directly from the browser object. For example, an assertion can be used to check if a page loaded successfully. Apart from assertions, Zombie JS offers methods to handle cookies, tabs, authentication, and more.
5. HtmlUnit
Written in Java, HtmlUnit allows you to use Java code to automate many of the basic ways in which users interact with websites. Use it to test:
- Filling in and submitting forms
- Clicking links
- Site redirects
- HTTP authentication
- HTTPS page performance
- HTTP header performance
The tool's ability to simulate several different browsers expands its functionality even more. Using HtmlUnit, you can create scripted use cases in Chrome, Firefox 38 and later, Edge, and IE8 and IE11. This covers a significant number of new and legacy browsers, helping to ensure every user has a superior experience once a site goes live.
Ecommerce sites rely heavily on most of the elements HtmlUnit allows you to test. Form submission, site security, and navigation are all integral parts of the ecommerce UI and have a significant impact on conversions and sales. Poor UI means poor UX, and customers in a fast-paced online world abandon such sites to shop with the competition instead. HtmlUnit is a helpful ally when you're working to craft a business site with superior performance.
6. Splash
In the documentation for Splash, the headless browser is hailed as being lightweight and offering a variety of features to developers. This "JavaScript rendering service" operates with an HTTP API, implemented in Python 3 using Twisted and QT5.
Splash may be the best go-to tool if your use cases require:
- Understanding HTML performance
- Testing rendering and load speeds
- Turning off images or using AdBlock for faster loading
- Visualizing website UX
- Using Lua browsing scripts
- Processing more than one page at a time
Splash provides rendering information in the HAR format and also allows you to take screenshots of results. This headless browser may also be integrated with Scrapy in scenarios where you need or want to scrape code from other websites. Thanks to its versatility, Splash is a useful tool for developers seeking a "jack of all trades" for their testing toolkits.
Summary
These browsers represent just a few of the testing environments available to developers. That being said, by taking the first 5 headless browsers mentioned in this post and comparing them with Google Trends, it's obvious that PhantomJS is still one of the most popular headless browser tools.
Since there is a variety to choose from, you can try out more than one for different use cases and determine which works best to test particular scenarios. From simple interactions to fully automated flows, headless browsers provide the framework you need to optimize UI and UX in each site you develop.