Getting started with Puppeteer & Headless chrome in NodeJs

What are Puppeteer & Headless Chrome

Puppeteer is a Node.js library that you can use to control headless Chrome. It can be used to automate things that normally performed manually in the browser, such as submitting forms, UI testing, keyboard input, or capturing a timeline trace to diagnose performance. The idea is similar to Selenium, although it’s much faster, and — from what we’ve already tested — much more reliable.

Headless mode is a functionality that allows the execution of a full version of the latest Chrome browser while controlling it programmatically. It can be used on servers without dedicated graphics or display, meaning that it runs without its “head”, the Graphical User Interface (GUI).

In headless mode, it’s possible to run large scale web application tests, navigate from page to page without human intervention, confirm JavaScript functionality and generate reports.

To use Puppeteer in your project, run:

npm i puppeteer

Taking screenshot

the above code navigate to https://example.com and saving a screenshot as example.png

puppeteer.launch() creates a new instance of the Chromium and launch it in headless mode.

To launch a full version of Chromium, set the ‘headless’ option when launching a browser:

const browser = await puppeteer.launch({headless: false}); // default is true

The page.goto() function visit https://example.com, wait until everything is loaded properly with networkidle2

Creating a PDF

The above code visits the url https://www.google.com generate a .pdf file named google.pdf with A4 paper size in the current directory.

Set printBackground to true to print background colors and styling. pageRanges makes sure we’re getting only the first page (we could avoid it if we had a multipage webpage).

Interacting with webpage

In the above example we are trying to interact with the webpage. We are trying to open the https://google.com and will provide some input to the searchbar and then make a search corresponding to the input provided.

page.click perform the click operation in the page, we need to provide the selector for the element in our case it is input.gLFyf. After clicking the element now we will provide the input to the searchbox, in our case we are providing hello as input.

look for the selector

Next task is to provide input, to achieve this we will use page.keyboard.type , and will provide the hello as input to the function

Once the input is provided to the searchbox ,it time to press Enter key of the keyboard to make search, to achieve this we will use page.keyboard.press and will pass Enter as argument.

The final output looks like this:

Hope you enjoyed reading. Connect me on Linkedin