Hide/remove Elements from Screenshots

Discussed in https://github.com/microsoft/playwright/discussions/5068

<div type='discussions-op-text'>

^{Originally posted by rollin-cogers January 20, 2021} Hey everyone! I’ve been very excited to use this tool for testing, as I’ve previously been using protractor for all my testing.

In the past I’ve used modules like webdriver-image-comparison that allow for options like hiding and removing elements from a screenshot by adding visibility: hidden or display: none to the styling for the passed elements.

Is this a feature that we might see in the future with playwright? Would anyone else benefit from the ability to exclude elements from screenshots?

I would love to see something like this:

page.screenshot({fullpage: true, hideElements: ['div.dynamic_content', 'div#profilePicture']})
```</div>

[aslushnikov]

Everybody: So far we’re considering adding the blackout option to the screenshot:

await page.screenshot({
  blackout: [
    page.locator('.my-dynamic-element'), 
    page.locator('.some-video'), 
  ],
});

Let us know if it will or will not work for you!

[p01]

Perfect! The only objection is about the term blackout. Let’s change for something more generic e.g. hide, or hideElements