Table of contents

Playwright Screenshots - How to Take and Automate 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.

The page.screenshot command 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 depends on the viewport size:

Playwright

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-web.shop/')
  await page.screenshot({ path: 'my_screenshot.png' })
  await browser.close()
})()

Run in Checkly

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 })

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:

Playwright

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-web.shop/')
  await page.screenshot(options)
  await browser.close()
})()

Run in Checkly

The above examples can be run as follows:

$ node basic-screenshots.js

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.

1. Official documentation for taking screenshots with Playwright
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