How to take screenshots with Puppeteer

Puppeteer is a Node.js library that you can use to control headless Chrome.

It allows you to automate things that normally are being performed manually in the browser, such as: submitting forms, UI testing, keyboard input, or capturing a timeline trace to diagnose performance. The idea is really similar to Selenium, but it’s much faster, and — from what we’ve already tested — much more reliable.

Configure the Puppeteer script

Let’s start with creating a JS script that will grab the screenshot. Make sure to name the file test.js so that it will match the package.json:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://buddy.works');
  await page.screenshot({path: 'buddy-screenshot.png'});

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

Prepare package.json

Next definie the metadata for npm:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "puppeteer": "^0.13.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "node test.js"
  },
  "author": "",
  "license": "ISC"
}

Run Puppeteer

With everything in place, you can test the script by running:

npm install 
npm test

Like what you read? Check out the full guide here!