Taking screenshots
You can take up to ten screenshots per browser check. This is really handy when debugging a failure situation or just in general to get a comfy feeling everything is OK.
Add a screenshot anywhere by using the following syntax in your script:
await page.screenshot({ path: 'my_screenshot.png' })
await page.screenshot({ path: 'my_screenshot.png' })
Screenshots will show up while editing your browser check in the editor on the “screenshots” tab and as part of the check results on every check run. You can download the full size screenshot by clicking on the thumbnail.
Screenshots need to stick to the following specs:
- Either
.png
,jpeg
orjpg
suffix. - Allowed characters are
a-z A-Z 0-9 - _ @
So no whitespaces in the filename.
Read more about the options for page.screenshot()
like transparency, clipping and quality settings in the official
for
Playwright or
Puppeteer.
Full page screenshots
Both Playwright and Puppeteer allow you to capture a full-page screenshot, including the content below the fold. This is very handy for taking
snapshots of a long landing page or blog site. Just add the fullPage: true
. The framework will scroll and stitch the images together.
await page.screenshot({ path: 'my_screenshot.png', fullPage: true })
await page.screenshot({ path: 'my_screenshot.png', fullPage: true })
Screenshots of specific elements
You can target any specific page element and generate a screenshot just of that part of the screen. You first need to
grab the element with the $
selector and then call the screenshot
method on that element.
await page.goto('https://checklyhq.com/')
const element = await page.$('a.btn-lg')
await element.screenshot({ path: 'button.png' })
await page.goto('https://checklyhq.com/')
const element = await page.$('a.btn-lg')
await element.screenshot({ path: 'button.png' })
The code above snaps a picture of just the big call to action button on the Checkly homepage.
You can contribute to this documentation by editing this page on Github