Using document from getDocument in a query causes a TypeError

[flakey-bit]

The snapshotter in Playwright attempts to call setAttribute on the element it is passed.

This causes a TypeError (setAttribute is not a function) because no such function exists on document

To reproduce:

const $document = await getDocument(page);
await getByRole($document, "heading", { level: 2, name: "Prepare file for upload"});

Workaround:

await page.mainFrame().evaluate(() => {
    Object.defineProperty(document, "setAttribute", { value: () => {}});
  });

[jrolfs]

I'm afraid I'm not super familiar with this Playwright feature, but I believe we're missing some additional context here? Can you have a look at my attempt to add a failing test here and let me know if I'm missing something? It's currently passing.

[jrolfs]

@flakey-bit are you using @playwright/test to run your tests?

[flakey-bit]

Hi,

I can reproduce it in your repo (i.e. your "does not throw when recording trace + snapshots" test) when I enable debugging. See screenshots:

Note that your beforeAll opens up a page, but so does the test so you'll want to set the debugger on that window. Also note I've enabled the option to break on all exceptions.

[jrolfs]

Ok, so it doesn't actually cause the trace/test to fail it just breaks debugging?

[flakey-bit]

Ok, so it doesn't actually cause the trace/test to fail it just breaks debugging?

"breaking debugging" is definitely a bit of a stretch.

The reason I noticed this is that we're using React with an overlay that shows you any errors (when running in development mode) - see the second image in my first comment. Because of the error, the overlay was shown, obscuring the content in the videos Playwright recorded.

In production, the overlay is disabled.

I'm not 100% sure if the overlay is something we've added or whether it's part of React by default, however I know create-react-app has something similar.

[jrolfs]

"breaking debugging" is definitely a bit of a stretch.

It is an uncaught error in the page, so it definitely is a disruption (if we don't want to call it "breaking" 😉).

Unfortunately, I was unable to figure out how to assert that the error is not thrown as it doesn't seem to trigger page.on('pageerror', () => {}). I think I came up with a reasonable fix, though, so I'll get the released shortly.

Thanks for reporting this!

[github-actions]

🎉 This issue has been resolved in version 4.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀