[Bug]: Screenshot of a portion of a page does not clip correctly

[baggachipz]

Minimal, reproducible example

const connect = require('connect');
const serveStatic = require('serve-static');
const puppeteer = require('puppeteer');

(async () => {
    // start a server
    await connect()
     .use(serveStatic(`${__dirname}/static`))
     .listen(8080);

    // go to the index page and do screenshots
    const url = 'http://localhost:8080/index.html';
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const imageDiv = await page.$('#source-img img');

    // screenshot the entire image
    await imageDiv.screenshot({
        path: './happycat-full.jpg',
    })

    // screenshot of the top half of the image
    await imageDiv.screenshot({
        path: './happycat-half.jpg',
        clip: { x: 0, y: 0, width: 273, height: 200 }
    });

    process.exit(0);
})();

Error string

no error

Bug behavior

• Flaky
• PDF

Background

When selecting an element in a Page (page.$("selector"), and then creating a screenshot with a ScreenshotClip property, the screenshot fails to clip and screenshots the whole portion of the selector. This functionality worked correctly in v20 and earlier, and is broken in the latest version (v22.3).

Expectation

A partial screenshot as defined by the clip property.

Reality

Full screenshot of the page element regardless of the clip parameter.

Full example available at https://github.com/baggachipz/puppeteer-screenshot-bug

Puppeteer configuration file (if used)

No response

Puppeteer version

22.3

Node version

21.6.2

Package manager

npm

Package manager version

10.2.4

Operating system

macOS

[baggachipz]

This bug requires that the server be run in order to view the output manually: https://github.com/baggachipz/puppeteer-screenshot-bug

[OrKoN]

@baggachipz could you please specify which version worked as expected? I have tried with v19 and the clip is not working there as well, it's clipping relative to the page instead of the element handle.

[OrKoN]

Or is it expected that it clips relative the page, instead of the relative to the element handle screenshot? 🤔 Looks like there is no test coverage for this case either.

[baggachipz]

In v20.8.2, it clipped relative to the element handle. That's what I expect as the result. in the ScreenshotOptions passed as a parameter to ElementHandle.screenshot(), there is an option called fullPage which defaults to false according to the documentation. If ElementHandle.screenshot() behaves the same as Page.screenshot(), then I'm unsure why it exists at all. Does that make sense?

[OrKoN]

It does not seem to work in 20.8.2 as well (same behavior as Page.screenshot). You can make it more visible by adding style="padding-top: 100px;" to #source-img. In the latest version, the difference is that the clip is completely ignored.

[baggachipz]

Very strange; In the main project I work on, it used clip appropriately. So it looks to me like clip is used in Page.screenshot() but not ElementHandle.screenshot(). Think this will be fixed? I've done a workaround in my project, but the more "correct" way would be to use the clip in ElementHandle.screenshot(). Thanks for responding to this!