Running Browser Automation using Puppeteer

Table of contents

Introduction

I recently stumbled upon a Node library called Puppeteer that’s used to automate browser interactions. As per the official documentation, Puppeteer is a Node library that provides a high-level API to control Chromium or Chrome over the DevTools Protocol.

You can use Puppeteer for a ton of things like generating screenshots and pdfs of pages, automating form submissions, debugging performance issues with websites, and testing chrome extensions.

More about Puppeteer

Puppeteer runs in two different modes: headless (without the Chrome Browser UI) and non-headless (the opposite). It runs by default in the headless mode but that can be configured easily. Also, the project offers two main packages: puppeteer and puppeteer-core. Simply put the difference between the two is that puppeteer-core package doesn’t ship with a Chromium browser by default. It’s meant to be a lightweight version of the main package to test browser interactions.

Installing Puppeteer

To install the package locally, simply do the following:

npm i puppeteer # or yarn add puppeteer

# if only interested in the puppeteer-core, then use below

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

Sample Puppeteer script

Let’s create a sample.js file to add our execution script

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });

  await page.goto('https://www.lipsum.com/');

  await page.waitForSelector('#words');
  await page.click('#words');

  await page.waitForSelector('#generate');
  await page.click('#generate');

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

Here are a few quick pointers regarding my script

1. I have customized the launch arguments to run in a non-headless mode and since I am using the puppeteer-core library, I have passed an executable path to my default Google Chrome Desktop app.

2. Puppeteer sets an initial page size to 800×600px. The page size can be customized with page.setViewport({ width: xxx, height: xxx })

3. My script then launches the lipsum page and upon loading the page, it selects the words radio button. The script then proceeds to click on the generate button to generate 5 random words (instead of paragraphs).

4. I have commented out the browser.close() so that one can see where we get left off once the script does execute but it would be a good practice to close the browser once the script finishes.

Running the sample script

To execute the script on the command line, simply run the below node command from where the script is located.

node sample.js

Here is how the script execution looks

You can also find other examples here in the official github repository

Happy coding :)