Automation

Automation with Puppeteer

By on • ( Leave a comment )

In the world of automation, When we talk about functional test automation for browsers, probably the first tool that comes to mind is Selenium WebDriver. 

There are other solutions like UFT and Silk Test, both now owned by Microfocus. However, it is clear that in the past years Selenium has become the most widely adopted tool in the market, due to its open source model and increasing maturity compared to other free tools. Selenium has now positioned itself as the standard solution when dealing with functional automation because it’s low cost of acquisition and high level of integration with .Net, Python, Node.js, and of course, Java.

Automating browsers provide many benefits including faster execution of repetitive tasks, ability to parallelise workloads and improved test coverage for your website. Google recently announced Puppeteer, a new tool to assist with Chrome browser automation.

Puppeteer is an open source Node.js library developed by Google with wide support for almost any action in Google’s Chrome browser.The basic idea is an API at the high level that allows us to automate actions in either of the Google browsers, Chrome and Chromium. For those non-Chrome stalwarts, Mozilla is also implementing Puppeteer in Firefox

It provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

Features of Puppeteer

  • Generate screenshots and PDFs of pages.
  • Headless chrome browser execution.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. “SSR” (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.
  • Test Chrome Extensions.
  •  Puppeteer also works fine with popular unit testing libraries such as Mocha and Jasmine.

Puppeteer vs. Selenium

 Some of the main feature benefits we hear highlighted when comparing Puppeteer and Selenium are:

  • Puppeteer allows access to the measurement of loading and rendering times provided by the Chrome Performance Analysis tool.
  • Puppeteer affords more control over Chrome’s browsers than Selenium WebDriver offers (likely due to Google’s support and sophisticated knowledge of Chrome).
  • Puppeteer removes the dependency on an external driver to run the tests, although this problem in Selenium could be mitigated by using Boni García’s WebDriverManager dependency.
  • Puppeteer is set as default to run in headless mode, and it can also be changed to watch the execution live in non-headless mode.

While there are many benefits to Puppeteer, some of the main drawbacks we hear from customers include:

  • Puppeteer is limited to Chrome browser only for now, until Firefox support is completed
  • Puppeteer scripting only available in JavaScript for Node.js, and it is unclear if other languages will be supported in the future
  • Puppeteer has a smaller testing community using the tool currently, there is more test-specific support for Selenium

Puppeteer Architecture

Puppeteer is a Node library which provides a high-level API to control Chromium or Chrome over the DevTools Protocol.The Puppeteer API is hierarchical and mirrors the browser structure.

Puppeteer Architecture
  • Puppeteer communicates with the browser using DevTools Protocol.
  • Browser instance can own multiple browser contexts.
  • BrowserContext instance defines a browsing session and can own multiple pages.
  • Page has at least one frame: main frame. There might be other frames created by iframe or frame tags.
  • Frame has at least one execution context – the default execution context – where the frame’s JavaScript is executed. A Frame might have additional execution contexts that are associated with extensions.
  • Worker has a single execution context and facilitates interacting with WebWorkers.

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.

Prerequisite:

  1. Chrome browser must be installed on the system.
  2. System should have node js installed if not then download & install from here.

Installation

To use Puppeteer in your project, run:

Puppeteer

npm i puppeteer
# or "yarn add puppeteer"

Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API. To skip the download, see Environment variables.

Puppeteer Core

Since version 1.7.0 we publish the puppeteer-core package, a version of Puppeteer that doesn’t download Chromium by default.

npm i puppeteer-core
# or "yarn add puppeteer-core"

puppeteer-core is intended to be a lightweight version of Puppeteer for launching an existing browser installation or for connecting to a remote one. Be sure that the version of puppeteer-core you install is compatible with the browser you intend to connect to.

Puppeteer : Examples

Taking Screenshot:

Navigating to https://example.com and saving a screenshot as example.png:

Screenshot.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Execute script on the command line:

node Screenshot.js

Create a PDF

To create a PDF for a web page.

CreatePDF.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});

  await browser.close();
})();

Execute script on the command line

node CreatePDF.js

See Page.pdf() for more information about creating pdfs.

Headless chrome

Running chrome i headless mode by puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();
  await page.goto('https://example.com');

})();

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.

References

https://github.com/puppeteer/puppeteera

https://developers.google.com/web/tools/puppeteer

Categories: Automation

Leave a Reply