fix(recorder): reattach toolbar if it was unmounted by framework hydration

[Skn0tt]

Closes #32632. A side effect of Remix's hydration implementation is that it throws away the entire DOM. This is broadly discussed in remix-run/remix#4822 - there might be a fix in coming React versions, but who knows.
Besides breaking browser extensions, this also deletes our toolbar!
This PR fixes it by periodically checking in on x-pw-glass, and remounting it if it was unmounted. Hacky but effective!

[Skn0tt]

I've tried using MutationObserver as the more canonical solution over setInterval, but couldn't get that to work.

[dgozman]

This seems to be only relevant to the recorder. Should we put the code there instead?

[Skn0tt]

This seems to be only relevant to the recorder. Should we put the code there instead?

good call, done!

[github-actions]

Test results for "tests 1"

1 failed
❌ [playwright-test] › babel.spec.ts:135:5 › should not transform external

2 flaky

⚠️ [firefox-page] › page/page-event-request.spec.ts:169:3 › should return response body when Cross-Origin-Opener-Policy is set
⚠️ [webkit-library] › library/browsercontext-clearcookies.spec.ts:52:3 › should remove cookies by name

35465 passed, 659 skipped
✔️✔️✔️

Merge workflow run.

[akoenig]

@Skn0tt, thanks a lot for this change. How can I give it a test drive?

[Skn0tt]

We publish a nightly release under the next label: https://www.npmjs.com/package/playwright/v/next
So try npm i playwright@next tomorrow to test drive.

[akoenig]

@Skn0tt, pretty sure I miss something, but I still receive:

I had @playwright/test in my dependencies. That is why i updated this package to 1.48.0-alpha-2024-09-18.

[Skn0tt]

Right, you won't be able to get around that. It's just a consequence of how React's rehydration works. Does this cause any errors except for this warning though?

[akoenig]

@Skn0tt, the toolbar still disappears in the current alpha release. Unfortunately, the recent bugfix didn't resolve this issue (at least for me in my reproduction repository).