[Bug]: Content in dialog element cannot be masked

[raythurnvoid]

Version

1.42.1

Steps to reproduce

1. Clone https://github.com/raythurnevoid/pw-dialog-bug/tree/main
2. Run npm i && npx playwright test
3. Cehck the snapshot under tests\example.spec.ts-snapshots

Expected behavior

The content in the dialog should be masked

Actual behavior

The content in the dialog is not masked

Additional context

I'm running the tests only in chromium

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 4900H with Radeon Graphics
    Memory: 17.27 GB / 31.42 GB
  Binaries:
    Node: 21.6.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.87.1 - C:\Users\rt0\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  npmPackages:
    @playwright/test: ^1.42.1 => 1.42.1
    playwright: ^1.42.1 => 1.42.1

[mxschmitt]

I can repro.

Investigation: The repro is using the <dialog/> API which places it onto the Top Layer. Playwright does neither mask elements in the Top Layer nor shows highlighted Selectors / Locators there in the Inspector.

We should investigate if we can put our stuff inside the top-layer as well using e.g. the Popover API.

[mxschmitt]

Reopening due to #30800.

[pavelfeldman]

Why was this issue closed?

Thank you for your contribution to our project. This issue has been closed due to its limited upvotes and recent activity, and insufficient feedback for us to effectively act upon. Our priority is to focus on bugs that reflect higher user engagement and have actionable feedback, to ensure our bug database stays manageable.

Should you feel this closure was in error, please create a new issue and reference this one. We're open to revisiting it given increased support or additional clarity. Your understanding and cooperation are greatly appreciated.