[Feature]: Clip option on Element screenshot

[Huseyinaltas1]

🚀 Feature Request

Currently clip is only exposed to page.screenhot. Would it be an option for element screenshot like in this locator function: await page.locator('.header').screenshot({ path: 'screenshot.png' , clip:{}});

Example

I have a receipt barcode validation. I need to take screenshot of the receipt in the page(not whole page) with desired portion of only barcode of receipt. I cannot take whole screenshot of page and clip because receipt is not fit in the page and you need to scroll it.

Motivation

I am on process of puppeteer migration to playwright. It is a case for puppeteer but not in playwright. It is really huge missing for our migration.

[mxschmitt]

What are you trying to clip out of your element screenshot? This helps us to prioritise.

Workaround would be https://github.com/microsoft/playwright/issues/2854#issuecomment-655219478

[Huseyinaltas1]

@mxschmitt here is the page, and element. I want to clip only this barcode. In second picture, it is not possible because receipt longer and barcode is off the page.

[mxschmitt]

I assume the receipt is an image? Otherwise you could mask things out or make an screenshot only of the barcode HTML element.

Sounds valid! The workaround in https://github.com/microsoft/playwright/issues/31542#issuecomment-2206882238 should work for you tho. I recommend that while this feature is not implemented yet.

[Huseyinaltas1]

@mxschmitt yes this is an image on this element css: div.MuiDialog-scrollPaper> div > img

[ivan-krupskyi]

@mxschmitt actually masking has a defect. It doesn't completely mask some elements and sometimes leaves a tiny part of element un-covered. Please see the screenshot below. Let me know if you want me to log a new bug, or if we can debug it here: