Puppeteer: page.screenshot resizes viewport

Question

I am new to puppeteer, so forgive if this is a noob mistake.

puppeteer versions: 6.0.0 / 9.0.0 / 10.0.0

I am taking a page.screenshot with puppeteer in headless:false mode. For a flicker of a second the viewport seems to resize (gets almost half as small) in the moment it takes the screenshot, and then we are back to full size until the next screenshot.

These are my relevant code bits:

const browser = await puppeteer.launch({
        args: ['--disable-features=site-per-process'],
        ignoreDefaultArgs: ["--hide-scrollbars"],
        headless: false
    });
...

await page.setViewport({
        width: 1000,
        height: 500,
        deviceScaleFactor: 1
    });
...

await page.screenshot({
            encoding: "base64",
            captureBeyondViewport: false
        });

I have found this issue online, which they claim to have fixed though if you set captureBeyondViewport: false : https://github.com/puppeteer/puppeteer/issues/7043

I have tested with three different version of puppeteer (see above). The flickering behavior happens everywhere. Is there something I am doing wrong here?

Answer 1

For me, the resizing only stopped when I set both captureBeyondViewport: false in page.screenshot and defaultViewport: null in puppeteer.launch

Here's full code without any screenshot resizing:

const puppeteer = require('puppeteer');

const wait = (time) => new Promise(function (resolve) { setTimeout(resolve, time) });

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: false, defaultViewport: null});
  const page = await browser.newPage();
  await page.goto('https://en.wikipedia.org/wiki/Albert_Einstein');
  await page.screenshot({path: 'screenshot.png', captureBeyondViewport: false});
  
  await wait(2000)
  await browser.close();
})();

Answer 2

It's well known issue when you capture full page screenshot using puppeteer. As of now, the solution for that is using a third party library to capture full page screenshot: https://github.com/morteza-fsh/puppeteer-full-page-screenshot

The usage is pretty similar with using puppeteer itself, but instead of using puppeteer.screenshot to capture full page once, it capture multiple images while scrolling and then merge all captured images into one image. By doing that, there's no trigger to window.onresize event.

import puppeteer from 'puppeteer';
import fullPageScreenshot from 'puppeteer-full-page-screenshot';

(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.setViewport({ width: 1920, height: 1080 });
   await page.goto('http://example.com/');

   await fullPageScreenshot(page, { path: './page.png' });

   await browser.close();
})();