[Question] Check if element is stable

[DJ-Glock]

Hello.
I have a set of screenshot tests. Each test finds an element, creates a screenshot and compares screenshot with master screenshot of the same element. But from time to time these may fail because screenshot is being taken before animation completed. One of possible solutions is to wait for 1-2 seconds, but I don't like this way.
Looking at https://playwright.dev/#version=v1.2.1&path=docs%2Factionability.md&q=stable I can see that some actions like hover, click perform Stable check:

Element is considered stable when it has maintained the same bounding box for at least two consecutive animation frames.

I do not want to use page.hover() because it may cause another page action like tooltip appear or something like this.
So I tried to find native PW method like waitForSelector that performs Stable check, but was unable to find.
Is there any way to do it?

[dgozman]

Thank you for the issue. I have a few questions 😄

• Are you taking an element screenshot or a page screenshot?
• If there was, say elementHandle.waitForStablePosition(), on which element would you call it? What if there are multiple moving elements?
• Does this animation happen after some action (e.g. click)?

[DJ-Glock]

@dgozman

Are you taking an element screenshot or a page screenshot?

I take separate element screenshot.

If there was, say elementHandle.waitForStablePosition(), on which element would you call it? What if there are multiple moving elements?

I would call it for the element that will be used for screenshot. Like this:

await element.waitForStablePosition()
await element.screenshot(...)

I believe you are thinking about child elements that could also move. If so this is not the perfect solution. But it will work for simple elements.

Does this animation happen after some action (e.g. click)?

It happens after page loading or after some action like click.

I've just found that I did not describe an example of my case.
So my problem is that from time to time screenshots resolution of the same element do not match in different test runs. They could differ for 1-2 pixels - for example 100x50, 100x48, 100x50, 100x48 for different test runs.
I added waitForTimeout(2000) before taking a screenshot and problem has gone.
Another possible solution is to set the slowMo parameter, but it will affect tests execution time. (I did not check this by many runs to be sure, but I used slowMo=100 with puppeteer before and had no problems).

Small remark: this is not environment issue, all screenshot tests are run in docker - so OS, browser, resolution and other conditions are always the same.

[dgozman]

Thank you for the details!

In this particular case, I think it makes sense to automatically wait for the stable position before taking an element screenshot. IIUC, it should solve your issue without any changes.

As for the page screenshot, we need something more generic, but maybe waitForStablePosition could just work. I'll think about it.

[dgozman]

With #3501, version 1.4 will provide the following api:

await handle.waitForElementState('stable');

[yksvatla]

Does this method available in current playwright?

[dgozman]

@yksvatla It is, since version 1.4.

[IPRIT]

Why not available in waitFor?