Playwright Test Getter Property
I have a validity getter on a Web Component. If I run
await page.evaluate(() => console.log(document.querySelector("[role='combobox']").validity));then I see the entire ValidityState in the logs.
But if I run
await expect(combobox).toHaveJSProperty("validity", { valid: true });the test fails because validity is seen as an empty object.
Any ideas on how to fix this? I want to verify that the getter value looks as expected.
This thread is trying to answer question "Why does `toHaveJSProperty` see `validity` as an empty object and how can this be fixed?"
According to the documentation (https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-js-property), toHaveJSProperty works with primitive values and serializable JavaScript objects. The keyword there is serializable. If the property you're accessing is an object that also uses accessors instead of regular properties, then those properties may not be serialized as desired.
JSON.stringify(document.querySelector("input").validity) produces "{}". This is likely what the issue is. I'll need to use page.evaluate after all, in this case.
Related Discord Threads
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.