👉 NEW: Automatic performance & error tracing on every browser check. Learn more

Taking screenshots

Headless browsers are fully capable of taking screenshots, which is very useful in troubleshooting failures or faulty scripts. Using additional libraries and tools, it is also possible to automate visual comparisons.

Generating and saving screenshots

The page.screenshot command is consistent across Playwright and Puppeteer, and allows us to save one or more screenshots of the current page to a specified path. Without any additional options, the size of the screenshot will depend on that of the viewport:


const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.setViewportSize({ width: 1280, height: 800 })
  await page.goto('https://danube-webshop.herokuapp.com')
  await page.screenshot({ path: 'my_screenshot.png' })
  await browser.close()
})()


Run in Checkly

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setViewport({ width: 1280, height: 800 })
  await page.goto('https://danube-webshop.herokuapp.com')
  await page.screenshot({ path: 'my_screenshot.png' })
  await browser.close()
})()


Run in Checkly

Full page screenshots

Adding the fullPage: true option allows for the capture of full page screenshots, overriding the height parameter specified for our viewport:

await page.screenshot({ path: 'my_screenshot.png', fullPage: true })

Clipped screenshots

Having our screenshot limited to a smaller portion of the viewport is also possible. All we need to do is specify the coordinates of the top left corner of the screenshot, plus width and height. We then pass these options to:


const options = {
  path: 'clipped_screenshot.png',
  fullPage: false,
  clip: {
    x: 5,
    y: 60,
    width: 240,
    height: 40
  }
}

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.setViewportSize({ width: 1280, height: 800 })
  await page.goto('https://danube-webshop.herokuapp.com')
  await page.screenshot(options)
  await browser.close()
})()


Run in Checkly

const options = {
  path: 'clipped_screenshot.png',
  fullPage: false,
  clip: {
    x: 5,
    y: 60,
    width: 240,
    height: 40
  }
}

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setViewport({ width: 1280, height: 800 })
  await page.goto('https://danube-webshop.herokuapp.com')
  await page.screenshot(options)
  await browser.close()
})()


Run in Checkly

The above examples can be run as follows:

$ node basic-screenshots.js

Use in visual regression testing

Screenshots can be fed to image comparison libraries, such as Resemble.js, pixelmatch, Rembrandt.js or others in order to determine whether our latest sets of screenshots contains significant differences when measured against a baseline.

Some libraries, like Differencify and jest-puppeteer-docker, already combine Puppeteer with visual comparison libraries while exposing higher-level config to the user.

Further reading

  1. Official documentation for taking screenshots with Playwright and Puppeteer
  2. Blog post from baseweb.design on the whys and hows of visual regression testing
  3. Blog post from Gideon Pyzer looking at different visual regression testing tools