[Bug] Take screenshot of an element encountered error without setting viewpoint

Use puppeteer-extra with puppeteer-extra-plugin-stealth to take screenshot of an element encountered error without setting viewpoint

Code Snippet Without page.setViewport

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

const url = "https://nodejs.org/en/";
const CaptureElement = "#logo > img";

const PuppeteerScreenshotElement = async () => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();
    // await page.setViewport({width: 1024, height: 768});
    await page.goto(url);
    await page.waitForSelector(CaptureElement);

    const pageElement = await page.$(CaptureElement);
    await pageElement.screenshot({
        path: `${OutputFile}`
    });

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

PuppeteerScreenshotElement();

Save to file puppeteer_screenshot.js and get the following error after running node puppeteer_screenshot.js

Error at assert (…/node_modules/puppeteer/lib/cjs/puppeteer/common/assert.js:28:15) at ElementHandle.screenshot (…/node_modules/puppeteer/lib/cjs/puppeteer/common/ElementHandle.js:559:32) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async PuppeteerScreenshotElement (…/puppeteer_screenshot.js:16:5)

Re-run after uncommented the line await page.setViewport({width: 1024, height: 768}); and everything works fine

Versions

System: OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye) CPU: (12) x64 Intel® Core™ i5-10400 CPU @ 2.90GHz Memory: 11.25 GB / 12.37 GB Container: Yes Shell: 5.8 - /usr/bin/zsh Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.13.2 - ~/.nvm/versions/node/v16.15.1/bin/npm npmPackages: puppeteer: ^15.2.0 => 15.2.0 puppeteer-extra: ^3.3.0 => 3.3.0 puppeteer-extra-plugin-stealth: ^2.10.1 => 2.10.1

[berstend]

I guess I found the culprit: https://github.com/berstend/puppeteer-extra/blob/28ff42a80b67322b9d22dc06cd0a1e79e2448b2c/packages/puppeteer-extra-plugin-stealth/evasions/window.outerdimensions/index.js#L33-L37

This is the best default option as otherwise the browser can be immediately detected by using the default viewport.

This makes the behavior deviate a little bit from vanilla puppeteer as a viewport has to be defined for element screenshots but that’s a small price to pay I guess.

As long as this works I don’t think we should classify this as a bug, more like a side-effect:

✔ element screenshot with puppeteer-extra-plugin-stealth & setting defaultViewport or page.setViewport

I’m closing this as “won’t fix” for now, let me know if I’m missing something here.

[epoweripione]

I tested several cases and the results are as follows:

• ✔ fullpage screenshot with puppeteer-extra-plugin-stealth & setting defaultViewport or page.setViewport
• ✔ fullpage screenshot with puppeteer-extra-plugin-stealth & not setting defaultViewport or page.setViewport
• ✔ fullpage screenshot without puppeteer-extra-plugin-stealth & setting defaultViewport or page.setViewport
• ✔ fullpage screenshot without puppeteer-extra-plugin-stealth & not setting defaultViewport or page.setViewport
• ✔ element screenshot without puppeteer-extra-plugin-stealth & setting defaultViewport or page.setViewport
• ✔ element screenshot without puppeteer-extra-plugin-stealth & not setting defaultViewport or page.setViewport
• ✔ element screenshot with puppeteer-extra-plugin-stealth & setting defaultViewport or page.setViewport
• ✖ element screenshot with puppeteer-extra-plugin-stealth & not setting defaultViewport or page.setViewport
• ✖ element screenshot with puppeteer-extra-plugin-stealth & not setting defaultViewport or page.setViewport & disable evasions user-agent-override or sourceurl

In my case error only if defaultViewport or page.setViewport are not set.

You can do the above test by commenting or uncommenting the code:

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

// const stealth = StealthPlugin();
// stealth.enabledEvasions.delete('user-agent-override');
// stealth.enabledEvasions.delete('sourceurl');
// puppeteer.use(stealth);

const url = "https://nodejs.org/en/";
const CaptureElement = "#logo > img";

const os = require("os");

const userHomeDir = os.homedir();

const OutputFileFullPage = `${userHomeDir}/screenshot_fullpage.png`;
const OutputFileElement = `${userHomeDir}/screenshot_element.png`;

const PuppeteerScreenshotTest = async () => {
    const browser = await puppeteer.launch({
        headless: true,
        // defaultViewport: {
        //     width: 800,
        //     height: 600
        // },
        dumpio: true,
    });
    const page = await browser.newPage();
    // await page.setViewport({width: 1024, height: 768});
    await page.goto(url);
    await page.waitForSelector(CaptureElement);

    // fullpage
    // await page.screenshot({
    //     path: `${OutputFileFullPage}`,
    //     fullPage: true,
    // });

    // element
    const pageElement = await page.$(CaptureElement);
    await pageElement.screenshot({
        path: `${OutputFileElement}`,
    });

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

PuppeteerScreenshotTest();