Puppeteer black screenshot

Question

When I make a screenshot with the x , y , width and height parameters, puppeteer returns a black screenshot, without it all works fine. This is my code:

await page.screenshot({ path: 'build.png', clip: { x: 0, y: 0, width: 810, height: 415 } });

Is there any way to fix that?

Answer 1

For me your snippet works as expected (Windows 10, puppeteer 3.1.0). It may be an environment or webpage dependent issue (Eg docs say for OSX screenshots take at least 1/6 second).

As a workaround you can use page.setViewport to crop the desired size, then do a normal screenshot.

The images build.png and build2.png are 100% identical to me (size, crop, everything) so if the only problem for you is clip then you can go on with this solution.

const puppeteer = require('puppeteer')

async function fn() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setViewport({ width: 810, height: 415 })
  await page.goto('https://www.google.com')
  await page.screenshot({ path: 'build.png', clip: { x: 0, y: 0, width: 810, height: 415 } }) // your original try
  await page.screenshot({ path: 'build2.png' }) // workaround, combined with setViewport

  await browser.close()
}
fn()