Screenshots

Taking a screenshot

Taking a screenshot and saving it to your local computer is as easy as this:

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.screenshot({ path: 'my_screenshot.png' })

await browser.close()

This will instruct a Chrome browser in our grid to take a screenshots of the current page, and send the data back to your computer.
Your Puppeteer or Playwright script will save this data in the file you specified: my_screenshot.png.

By default, this will take a screenshot of the current viewport, if you want to take a screenshot of the entire scrollable page (fullPage), please use:

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

Taking a screenshot of a specific element

It's also possible to take screenshots of specific DOM elements:

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.goto('https://headlesstesting.com/')
const element = await page.$('a.button-trial')
await element.screenshot({ path: 'button.png' })

await browser.close()

This will find the element with selector a.button-trial, take a screenshot and save it to a PNG file called button.png.