[Bug]: Trace viewer does not capture some dynamically added CSS classes

[keegan-conlee-IM]

Version

1.60.0

Steps to reproduce

Unfortunately the webpage is not something I can share here, and despite my best efforts I have not been able to replicate the issue yet in a minimal example. I posted on the Discord and didn't find much help, I'm hoping someone here who might know more about the Playwright tracing internals might be able to help me narrow it down.

1. Navigate to a page which has an overlay (for example, a spinner that blocks the screen behind it) that's normally hidden by a CSS class (e.g. .no-display { display: none !important; }
2. Remove the no-display CSS class and then add it back again (on the website in question this is done with jQuery 3.4.1 addClass)
3. Continue testing other things on the page

Expected behavior

I expect the overlay and spinner to no longer be visible on the Playwright trace after the point where they disappear in the test run

Actual behavior

In the Playwright trace, after the point where the overlay disappeared in the actual test run (and is shown to have disappeared in the screenshots), it is still visible in the DOM snapshot, and inspecting it shows that the no-display class is not present in the DOM snapshot

Additional context

I've replicated the conditions as close as I reasonably can in a minimal example and have not managed to replicate the issue. I'll continue to try and narrow it down, but I am happy to answer questions about the webpage in question.

Also, this is not just happening on spinners, it's happening on other overlays too, such as custom select menus and popovers. As far as I can tell what they have in common is that they are all hidden by adding a CSS class.

I also found out that jQuery is setting the CSS class using setAttribute, if that helps at all.

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (28) x64 13th Gen Intel(R) Core(TM) i7-13850HX
    Memory: 4.90 GB / 31.69 GB
  Binaries:
    Node: 24.14.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - C:\nvm4w\nodejs\yarn.CMD
    npm: 11.9.0 - C:\nvm4w\nodejs\npm.CMD
  IDEs:
    VSCode: 1.108.2 - C:\Program Files\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.3.9
  npmPackages:
    @playwright/test: ^1.60.0 => 1.60.0

[dgozman]

@keegan-conlee-IM Thank you for the issue. Unfortunately, we cannot fix it unless we can reproduce. Please try to provide a repro, otherwise I'll have to close as non-actionable.

[keegan-conlee-IM]

I finally was able to find a minimal example. The issue seems to be in capturing snapshots inside a popup window.

Steps to reproduce

1. Clone https://github.com/keegan-conlee-IM/playwright-trace-mre
2. npm ci and npx playwright install
3. Run the trace mre test and open the produced trace
4. See that the final snapshots still display the spinner when it should have disappeared after await expect(popup.locator('#Spinner').filter({ visible: true })).toHaveCount(0, { timeout: 10000 });, which you can validate by looking at the screenshots
5. Inspect the snapshot in the trace viewer and see that the SpinnerControl element is missing the no-display class

I tested versions 1.60.0 and 1.61.0-alpha-2026-05-19 and both versions showed the issue.

I dived a bit into the playwright source and I was able to find out that the MutationObserver that it seems is supposed to track attribute changes doesn't seem to be picking up changes from inside the popup window. (I added log lines inside _handleMutations() and no changes to the SpinnerControl element were logged.)