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

[marko-simic]

trafficstars

🚀 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

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.