Is there a way to wait for `data-hydrated` flag on every page change globally?

You can put it in the POM

For example in the 'goto' method

if you're using fixtures then you can override page fixture and perhaps add page.on domcontentloaded listener there and then check for that element

What do you mean with POM?

You mean like this:

this.page.on("domcontentloaded", async () => {
      await this.page.locator("[data-hydrated]").waitFor()
    })

Will it wait for the async promise?

it should

but the error will be weird if it will fail to find that element

I think if it's not present, the app will just not work at all

As far as I know it is impossible to put async/await in the event listener.

Page Object Model

I have page.on('response', async response => {} listener, works well, so I think async/await should with other listeners as well

https://github.com/microsoft/playwright/issues/23018

But if your approach works in this case, then it's good 😄

Putting it in a fixture with on("domcontentloaded" didn't work.

I already did that actually and it works very well. However, right now we call the page.reload only on the playwright page (not a self written POM), since it's global operation and has nothing to do with a specific page. we only do goto on actual pages like, profilePage.goto().

So for goto I have it fixed, but not for reload cases. I think have to somewaht create and ExtendedPage POM and wrap the playwright page in there, overriding the reload function.

Yeah, this is a way to go. Like profilePage.reload().

I see

works for me 🤷‍♂️ also stops execution if element not found