[BUG] isVisible returns true when an element is completely overlapped by another element

[devzerker]

Context:

• Playwright Version: 1.16.2
• Operating System: Windows 10
• Node.js version: v14.18.1
• Browser: Chromium

import { test, expect } from '@playwright/test';

test('overflow test', async ({ page }) => {
    await page.goto('https://devzerker.github.io/isvisible-repro/');
    const smallBox = page.locator('#small-box');
    const isVisible = await smallBox.isVisible(); // should be false
    expect(isVisible).toBeFalsy();
});

Describe the bug

Here is an example of the div #small-box is completely overlapped by another div #big-box. The #small-box div is actually not visible, but playwright thinks differently

[mxschmitt]

This is our current definition of visible elements: https://playwright.dev/docs/actionability#visible

If you have any suggestions, let us know then we can create a feature request out of it.

[devzerker]

This is our current definition of visible elements: https://playwright.dev/docs/actionability#visible

If you have any suggestions, let us know then we can create a feature request out of it.

Is there any workaround to check if an element is visible for humans?

[mxschmitt]

You can use:

const smallBox = page.locator('#small-box');
await smallBox.click({ trial: true });

which will only perform the actionability checks and skips the click. It will fail when the element is not clickable. Would this work for your use-case?

[devzerker]

Looks weird, but ok, that works. Any plans to extend isVisible API for a more convenient/intuitive way?

Edit
.click({trial: true}) returns false for partial overlap, actually not quite suitable. For example, if most of the small box is under the big box. It visible for humans

<div id="small-box" style="background-color: blueviolet; height: 50px; width: 50px; position: fixed; top: 70px"></div>
<div id="big-box" style="background-color: brown; height: 100px; width: 100px; position: fixed"></div>

[mxschmitt]

There are currently no plans for extending the isVisible API. Closing as won't fix.

[fmalvisi]

Greetings mxschmitt,
your solution does not seem to work in case the div is not visible for example because it is drawn outside the height of the parent (with overflow: hidden), you can still real-click and trial-click the div.

I do not understand why Playwright chose this definition for visible elements as it is completely insufficient for testing purposes.

[kingbeazer]

I have found a solution to this. It is possible to test for a click at a specific Position within the element. So you can test that all corners of the element are clickable. As long as you can find out the size of the element. I defined a locator called "smallBox".
await smallBox.ClickAsync(new LocatorClickOptions { Position = new Position() { X = 1, Y = 49 } }); - This would pass
await smallBox.ClickAsync(new LocatorClickOptions { Position = new Position() { X = 1, Y = 1 } }); - This would fail.