[Feature]: Option to blur activeElement before taking screenshot

[NagRock]

🚀 Feature Request

Would be nice to have an option to take screenshot without having focus on any element to avoid situations when some elements has outline.

Now it can be done by calling this before taking a screenshot.

await page.evaluate(() => document.activeElement?.blur());

Example

expect(this.root).toHaveScreenshot({ blurActiveElement: true })

Motivation

This will make tests less flaky when some elements are focused when animation ends or network request is finished.

[Skn0tt]

Screenshots are supposed to screenshot the element as it looks. If you need to change the page contents before taking a screenshot, then what you're currently doing is perfectly fine. You can also use Locator.blur(): https://playwright.dev/docs/api/class-locator#locator-blur.
Adding a config option for this would not be composable.

[NagRock]

I can also hide caret by myself and disable animations but to make it easier to use its available via toHaveScreenshot config. Why blur element doesn't fit, how its different?

[Skn0tt]

The difference is that caret is blinking and animations are non-deterministic. So two test runs might produce two different screenshots because the timing is slightly different, even though the application behaved the same. What element is focused is deterministic though, and it's part of your application's behaviour. So it should be part of the screenshot.

[NagRock]

@Skn0tt Thanks for explanation but... I have a focus set to the input field when animation finishes. And animations: 'disabled' did not guarantee that the focus will be done before or after screen taking. So I'm also not sure if the outline will be part or not of a screenshot.