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
Start by installing it using
In a Node.js file, require it:
You can use the newPage() method on the browser object to get the page object:
Call the goto() method on the page object to load that page:
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:
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.
click() Perform a mouse click event on the element passed as parameter
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.
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:
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:
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.