[BUG] unexpected value "hidden" for visible element

[joszo]

Context:

• Playwright Version: [1.30]
• Operating System: [Mac]
• Node.js version: [v18.12.1]
• Browser: [All / Chromium]
• Extra: [any specific details about your environment]

Describe the bug

Incorrect behaviour for visible element:

In devtools
window.getComputedStyle($('[data-tid="refresh-modal"]')).visibility -> 'visible'

but in test it is contatly failing

const modal =  page.locator('[data-tid="refresh-modal"]');
await expect(modal).toBeVisible();

      -   locator resolved to <div effect="fade/zoom" data-tid="refresh-modal" id="…>…</div>
      -   unexpected value "hidden"

Of course adding assertion for toBeHidden() + .not.toBeVisible are passing for that element.

I saw that Max mentioned in closed issues #19910 that something changed in version 1.30.

In DOM tree there is no display: none in the code.

Any ideas?

[aslushnikov]

Józef Szymala (@joszo) any chance you can build a small repro that illustrates this issue? This way we'll be able to debug it.

[joszo]

Andrey Lushnikov (@aslushnikov) I'm so sorry, after small debug I found that my element was 0x0 so in fact it is not visible...

Maybe we should consider better error message, because from my perspective hidden is not necessary equal to 0x0, maybe I'm wrong?

I remember that in Cypress there was This element '<element>' is not visible because it has an effective width and height of: '0 x 0' pixels.

[aslushnikov]

We might update error messages in a bit; for now, the visibility is described here: https://playwright.dev/docs/next/actionability#visible