Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Option to blur activeElement before taking screenshot #34272

Closed
NagRock opened this issue Jan 9, 2025 · 4 comments
Closed

[Feature]: Option to blur activeElement before taking screenshot #34272

NagRock opened this issue Jan 9, 2025 · 4 comments

Comments

@NagRock
Copy link

NagRock commented Jan 9, 2025

🚀 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
Copy link
Member

Skn0tt commented Jan 10, 2025

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.

@Skn0tt Skn0tt closed this as not planned Won't fix, can't repro, duplicate, stale Jan 10, 2025
@NagRock
Copy link
Author

NagRock commented Jan 10, 2025

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
Copy link
Member

Skn0tt commented Jan 10, 2025

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
Copy link
Author

NagRock commented Jan 13, 2025

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants