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 })
There are other options you can use to customize the screenshot.
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
.