Puppeteer 101

Introduction

Puppeteer is one kind of browser testing frameworks. It support headless browser testing.
A headless browser is a great tool for automated testing and server environments where you don’t need a visible UI shell. You can run some tests on a web page and get snapshot pictures of web page behaviour on a Linux server.

Prerequisites

• An Ubuntu 18.04 LTS x64 server instance.
• A new non-root user account with sudo access and switch to it.
  Create user: adduser username
  Add access: adduser username sudo
• Update your system.
  apt-get update && apt-get upgrade

Installation

• Step 1: Download and Unzip Node.js
  We download the Node.js from the official site. The Latest LTS Version: 8.11.2 (includes npm 5.6.0). We get the 64-bit Linux Binaries here.
  wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz
  Unzip the package.
  tar xvJf node-v8.11.2-linux-x86.tar.xz
  Then we will get a folder named node-v8.11.2-linux-x64.

• Step 2: Environment Variable Setting
  Add the node.js bin folder to PATH.
  export PATH=/path/to/nodejs/node-v8.11.2-linux-x64/bin:$PATH
  Then check the node and npm version.
  node -v
npm -v

• Step 3: Install Puppeteer via npm
npm i puppeteer
  The result will look like this:
  + puppeteer@1.4.0
updated 1 package in 2.371s

• Step 4: Install Chromium Browser
  sudo apt install chromium-browser

Usage Examples

Here is an example about login the github web page.

/**
* @name Github
*
* @desc Logs into Github. Provide your username and password as environment variables when running the script, i.e:
* `GITHUB_USER=myuser GITHUB_PWD=mypassword node github.js`
*
*/
const puppeteer = require('puppeteer')
const screenshot = 'github.png';
(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://github.com/login')
    await page.type('#login_field', process.env.GITHUB_USER)
    await page.type('#password', process.env.GITHUB_PWD)
    await page.click('[name="commit"]')
    await page.waitForNavigation()
    await page.screenshot({ path: screenshot })
    browser.close()
    console.log('See screenshot: ' + screenshot)
})()

Then execute the test via command:
GITHUB_USER=myuser GITHUB_PWD=mypassword node github.js
After that, we will get a picture named github.png in the working directory.

FAQ

• Q: Why we need a new non-root user account with sudo access?
  A: Running as root without --no-sandbox is not supported. But it is not recommended to turn off the sandbox because of security issues. So we do not use the root account to run puppeteer test.

• Q: Can we use the Chrome browser?
  A: Yes, the default browser of puppeteer is the open source Chromium, we can change to Chrome via modify code:
  const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'})

• Q: Puppeteer will download a Chromium to the current directory by default, why we need apt install chromium-browser?
  A: The Chromium downloaded by puppeteer did not install the full package dependencies, so we need apt install chromium-browser to resolve all the dependencies.