Table of contents
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 depends on the viewport size:
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
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-web.shop/')
await page.screenshot({ path: 'my_screenshot.png' })
await browser.close()
})()
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-web.shop/')
await page.screenshot(options)
await browser.close()
})()
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-web.shop/')
await page.screenshot(options)
await browser.close()
})()
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
- Official documentation for taking screenshots with Playwright and Puppeteer
- Blog post from baseweb.design on the whys and hows of visual regression testing
- Blog post from Gideon Pyzer looking at different visual regression testing tools