Before Puppeteer, testing user flows within web applications usually involved either using an automated headful browser or a Headless browser that was built on top of its own unique JavaScript engine. A headless browser meaning one that presents no UI, vs. a headful browser which is what we use to interact with the internet.

This created a situation where trade offs had to be made: speed vs. reliability. Puppeteer aimed to remove this trade off – by enabling developers to leverage the Chromium browser environment to run their tests and by giving them the flexibility to leverage headless or headful browsers that run on the same underlying platform as their users.

Puppeteer was also built to be very developer friendly. This meant that the developers who maintained the popular testing frameworks, such as Mocha, were incentivized to build in support for Puppeteer. This led to a huge uptick in popularity amongst the developer community as the tool was ubiquitously supported.

Using Puppeteer , we can:

  • scrape web pages
  • automate form submissions
  • perform any kind of browser automation
  • track page loading performance
  • create server-side rendered versions of single page apps
  • make screenshots
  • create automating testing
  • generate PDF from web pages

Installing Puppeteer

Start by installing it using

Copy to Clipboard

Using Puppeteer

In a Node.js file, require it:

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
You can use the newPage() method on the browser object to get the page object:
Copy to Clipboard
Call the goto() method on the page object to load that page:
Copy to Clipboard
You can use the page.$() method to access the Selectors API method querySelector() on the document, and page.$$() as an alias to querySelectorAll().
Once test finished call the close() method on browser:
Copy to Clipboard

Page methods

page.$() Gives access to the Selectors API method querySelector() on the page

page.$$() Gives access to the Selectors API method querySelectorAll() on the page

page.$eval() Accepts 2 or more parameters. The first is a selector, the second a function. If there are more parameters, those are passed as additional arguments to the function.
It runs querySelectorAll() on the page, using the first parameter as selector, then it uses that parameter as the first argument to the function.

Copy to Clipboard

click() Perform a mouse click event on the element passed as parameter

Copy to Clipboard

content() Get the HTML source of a page

emulate() Emulates a device. It sets the user agent to a specific device, and sets the viewport accordingly.

Copy to Clipboard

evaluate() Evaluates a function in the page context. Inside this function we have access to the document object, so we can call any DOM API:

Copy to Clipboard

focus() Focuses on the selector passed as parameter
goBack() Goes back in the page navigation history
goForward() Goes forward in the page navigation history
goto() Opens a new page.
hover() Do a mouseover on the selector passed as parameter
pdf() Generate a PDF from a page.
reload() Reload a page
screenshot() Takes a PNG screenshot of the page, saving it to the filename selected using path.
setViewPort() By default the viewport is 800x600px. If you want to have a different viewport, maybe to take a screenshot, call setViewport passing an object with width and height properties.

waitFor() Wait for something specific to happen. Has the following shortcut functions:

  • waitForFunction
  • waitForNavigation
  • waitForRequest
  • waitForResponse
  • waitForSelector
  • waitForXPath
Copy to Clipboard

Conclusion

In this article, we have familiarized with the Puppeteer node js library. We discussed the installation of nodes and this library usages.
In the next post of this series, We’ll compare with Selenium and Pupprteer – Which is the preferred one.