Puppeteer – Web Automation with Headless Chrome

Share

When it comes to QA web automation scenarios, you can rely on Selenium for its stability, feature support and reliability. But as the complexity and automation context keep changing, you must be equipped with the possible alternative solutions and their core strengths. Otherwise, you might face a lot of inconvenience just in case the requirement is out of pattern and Selenium doesn’t fit in the scenario. Based on the recent project trends, occasionally one might have few requirements as below:

  1. Reduce execution time for applications having heavy GUI loading.
  2. Omit image load to speed up execution.
  3. Ability to switch on/off GUI based testing.
  4. Crawling ability.
  5. Capture a timeline trace of site to help diagnose performance issues.
  6. Less system set-up to spin up more test systems quickly.
  7. Testing in latest Chromium versions.
  8. Leveraging DevTools or its Protocol features.
  9. Testing Chrome extensions.

Finally, the question arises – Will you be able to handle all these scenarios and still perform the Automation Testing? The answer is YES!!

Possible Solutions for Web Testing Scenarios

  1. Puppeteer: Puppeteer is a Google product which allows you to control Chrome with node scripts. You can automate headless instance of Chrome using this node library. The scripting language in this web automation tool is JavaScript. It doesn’t unlock anything new, but it abstracts many details you have to deal with, without using it.
  1. Selenium: Selenium also supports headless browser automation. As it does not have the GUI, user cannot see the screen of test execution. Selenium supports API testing and also, cross browser testing such that you can test the application in various browsers. Selenium is based on Selenium IDE and Webdriver.
  1. Protractor: Protractor is a web automation framework to test angular applications. It supports locating elements which are specific to angular websites. Protractor also supports headless browser automation and uses most of the personalization from Selenium as it is working on top of Selenium.
  1. Katalon Studio: It is another automation tool which you can use to test Web Application, API, Desktop applications and Mobile applications. Katalon studio also supports Headless browser testing. This tool is also built on top of Selenium. Katalon studio is a better tool as it provides many in-house templates for test case organisation, object repository and keywords.

Actual Requirement and Solution – Selenium vs Puppeteer

The commonly preferred tool is Selenium and it doesn’t support all of these out of pattern requirements and same is the case for all the other tools. Eventually, research leads you to Puppeteer. As Puppeteer has a lightweight framework, minimal dependencies, a rich feature- support and performs well with web application, Puppeteer is considered to be the solution to address the above requirements.

Before getting into more details about Puppeteer, you need to deep dive to understand about Headless Chrome execution and what it means, if implemented.

What is Headless Chrome?

Headless Chrome is basically a Chrome browser without UI. A Headless browser is more helpful for the programmers as they can write the automation script very easily with up-to-date rendering of the scripts. It can also be used for network throttling, device emulation and code coverage. You can launch Headless Chrome even from the command line.

While running the automation scripts, you don’t need to view the full UI of the browser. That’s when Puppeteer came into the scene offering benefits like running the java script in the same environment you need to execute.

Puppeteer Web Automation

Benefits of Testing in Headless Browser

  • You can speed up automation testing and run automation test even in a system without a browser.
  • Reduce the resource utilization.
  • Ideal for web scraping purpose
  • You can monitor network application performance.
  • Pre render java scripts and dynamic pages and cache pre render results.

Headless Chrome puts forward the whole modern web platform features which are supported by Chrome. Also, coming to automation testing headless browsers are the best tool where you don’t need a UI. In order to launch a headless browser, you need to provide the command as:

Puppeteer Installation

Modern Web Testing and Automation with Puppeteer

Puppeteer is a Google product which allows you to control Chrome with node scripts. You can automate headless instance of Chrome using this node library. The scripting language in this web automation tool is JavaScript. Puppeteer is the most accurate way to automate testing using Chrome, as it is using the actual browser.

Being a faster tool, compared to Selenium, it is working along with Chrome, an actual browser. It provides a high-level API in order to control Headless Chrome (Headless Chrome – Chrome in an environment without full UI).Compared to other tools, Puppeteer is not built on Selenium and there is no need to configure or link any browser. Also, Puppeteer can be used to take screenshots, create PDFs, navigate to web pages, and fetch information about those pages. Puppeteer is recommended when we need a quick browser automation testing in the browser. It not only supports Chrome; Puppeteer with Firefox is also in the pipeline. Puppeteer has a good API control over the Chrome developer tools. By using Puppeteer, you can create an instance of Chrome browser, open web pages, and then manipulate those with Puppeteer’s API.

How Puppeteer Outweighs Selenium

Selenium is a widely used web automation tool, which supports different languages. Parallel testing is also possible in Selenium, and it is most useful when you automate a large number of browser instances, which are remotely distributed making it heavy. Also, object recognition in Selenium also becomes a nightmare when the application is big and changes are occurring continuously.

Puppeteer Architecture

Selenium Architecture
Google Puppeteer, as the name denotes, is the puppet that you will manipulate to do some tasks on webpages. It’s that easy because the Chrome DevTools conveniently packages each version of Puppeteer with the latest version of Chrome (the Headless Chrome part) that it’s guaranteed to run with.

Puppeteer Architecture

Puppeteer Architecture

Advantages of Puppeteer over Selenium

  • Puppeteer requires zero set-up effort and comes bundled with the Chromium version with which it works best, making it very easy to start with. It has an event-driven architecture, which removes a lot of potential synchronization issues.
  • Puppeteer is excellent for debugging: flip the “headless” bit to false, add “slowMo”, and you can see what the browser is doing. Open Chrome DevTools to inspect the test environment. It helps you to crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. “SSR”- Server-Side Rendering). It can easily automate form submissions, user interface testing, inputs from keyboard, etc.
  • It can create an up-to-date, automated testing environment, run your tests in the latest version of Chrome using the latest JavaScript and all new browser features. Puppeteer can capture a timeline trace of website to help tracking performance bottlenecks and it’s used for testing Chrome extensions.
  • Puppeteer offers more control over Chrome browsers than Selenium Webdriver (probably due to Google’s support and complex knowledge of Chrome). Puppeteer excludes the outbuilding on an external driver to run the tests. Despite this problem in Selenium, it could be reduced by using Boni García’s WebDriverManager dependency.
  • By default, Puppeteer is set to execute in headless mode, and it can also be altered for watching the execution live in non-headless mode. It can be used for checking the proportion of CSS/JS files which are used for loading a page which isn’t feasible in Selenium.
  • You can test without loading the images in the application using Puppeteer which is not possible in Selenium.
  • Puppeteer also allows you to test the time taken to load the page but the same feature is not available in Selenium. It helps in testing new DevTools Protocol features and identifying bugs early. Executing the test in different devices using the emulators is possible in Puppeteer but emulating a device in Selenium is difficult.

Puppeteer Limitations

The complexity and automation context are changing with each passing day and hence, one tool might not be the solution for all.  As every automation tool, Puppeteer has some limitations such as, it supports only Chrome browser and Puppeteer Firefox is a work in progress. If the user base is more varied in its browser preferences, it may be wise to go for other testing frameworks like Cypress.ioTestCafe or Selenium Web Driver. Puppeteer is a viable choice for the out of pattern requirements which is discussed in this blog but you must keep exploring the other tools out there. You never know which tool can come to your rescue when faced with different challenges. Happy learning!

Conclusion

Puppeteer is considered to be a fascinating tool which captures the attention of Selenium WebDriver users.  When one does not need cross-browser testing and you have got teams that have experience working with Node.js, Puppeteer proves to be a great choice. As the tool evolves, it will be interesting to witness Puppeteer replacing Selenium as the leading web testing tool in the market. This tool will flourish with the ever expanding google ecosystem. The future certainly shines bright for Puppeteer.

To know more about testing with Puppeteer and how it works, please click here: Getting Started with Puppeteer 

By,
Aathira Shaji V S
Senior Software Test Engineer, RapidValue

Please Share Your Thoughts & Comments Below.

How can we help you?