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:

import { test } from '@playwright/test'

test('take a screenshot', async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 800 })
  await page.goto('https://danube-web.shop/')
  await page.screenshot({ path: 'my_screenshot.png' })
})

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:

import { test } from '@playwright/test'

test('take a clipped screenshot', async ({ page }) => {
  const options = {
    path: 'clipped_screenshot.png',
    fullPage: false,
    clip: {
      x: 5,
      y: 60,
      width: 240,
      height: 40
    }
  }

  await page.setViewportSize({ width: 1280, height: 800 })
  await page.goto('https://danube-web.shop/')
  await page.screenshot(options)
})

Run in Checkly

The above examples can be run as follows:

npx playwright test basic-screenshots.spec.ts

Playwright can be used to take screenshots of a page and compare them with a reference image. This is useful for visual regression testing, where we can detect changes in the UI that may have been introduced by code changes.

The expect(page).toMatchSnapshot() command is used to take a screenshot and compare it with a reference image. If the images are different, the test will fail.

import { test, expect } from '@playwright/test'

test('visual regression', async ({ page }) => {
  await page.goto('https://danube-web.shop/')
  const screenshot = await page.screenshot()
  expect(screenshot).toMatchSnapshot('danube-web-shop.png')
})

Run in Checkly

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