-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Description
Version
1.58.1
Steps to reproduce
When using the Playwright VS Code extension to capture an ARIA snapshot on a page with an Angular Material MatDialog open, the extension’s ARIA snapshot UI (buttons, selection overlay/feedback) appears behind the modal. As a result, it’s not possible to see which element/region is being snapshotted while the dialog is visible.
This is reproducible on Angular Material’s official dialog examples page.
Navigate to Angular Material dialog examples: https://material.angular.dev/components/dialog/examples.
Click “Open dialog without animation” (or any “Open dialog”) to show a modal dialog.
In the Playwright extension’s Locators/ARIA panel, attempt to pick or preview an ARIA snapshot for the dialog content (or for body).
Actual: the ARIA snapshot UI (buttons/selection highlighting) appears behind the modal dialog, making it unclear what aria tree is being captured, and preventing practical use.
chrome_GoGRVRy3yt.mp4
Expected behavior
The Playwright VS Code extension’s ARIA snapshot UI and selection/highlight overlays should remain visible and on top of application UI (including modals), so users can see which node/region is being snapshotted and operate the controls.
Actual behavior
With MatDialog open, the extension’s ARIA snapshot UI/overlay appears behind the dialog. The snapshot may still be captured, but users cannot see what is selected or interact reliably with the UI.
Additional context
No response
Environment
System:
OS: Windows 11 10.0.26200
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 14.79 GB / 31.73 GB
Binaries:
Node: 24.10.0 - C:\nvm4w\nodejs\node.EXE
npm: 11.7.0 - C:\nvm4w\nodejs\npm.CMD
IDEs:
VSCode: 1.108.2 - C:\Progs\Microsoft VS Code\bin\code.CMD
Claude Code: 2.1.17 - C:\nvm4w\nodejs\claude.CMD