[Feature]: Locator's filter to exclude overlapped elements

[marko-simic]

🚀 Feature Request

It would be great if we could filter out elements that are present but not visible to the user.

test("should check a box that is not overlayed by another element", async ({ page }) => {
  await page.goto("about:blank");

  await page.setContent(`
    <style>
      body, html { padding: 0; margin: 0; }
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    </style>

    <div class="container">
      <h3>Sign up</h3>
      <label>
        <input type="checkbox" role="switch" /> Subscribe
      </label>

      <br/>
      <button>Submit</button>
    </div>

    <dialog open style="width: 300; height: 300; top: 0;" class="container">
      <p>Greetings, one and all!</p>
      <form method="dialog">
        <label>
          <input type="checkbox" role="switch" /> Subscribe
        </label>
        <button>OK</button>
      </form>
    </dialog>
  `);

  await page.getByRole("switch", { name: "Subscribe" }).first().check();
});

Example

No response

Motivation

This type of problem is particularly present in single page apps.
Solving this would open up the possibility of creating universal locators through multiple views and therefore generating less code that needs to be maintained.

[mxschmitt]

Usually, you could do something like that:

await page.getByText('Sign up').waitFor({ state: 'attached' })
await page.getByText('Sign up').waitFor({ state: 'hidden' })

but in your scenario it looks like its not working with <dialog /> elements.

[marko-simic]

I believe this is a related issue:
[BUG] isVisible returns true when an element is completely overlapped by another element