[Feature]: DOM load event listener for page about playwright

[mxschmitt]

DOM load event listeners have proven to be unreliable over the last years, so end-to-end testing frameworks tend to do polling instead. In your scenario, it should work without any explicit waits at all, since Playwright will automatically wait until the element is on the page, clickable etc. see here.

Looking e.g. at this code:

await page.goto();
await page.getByRole('textbox', ...).fill()
await page.getByRole('textbox', ...).fill()
await page.getByRole('button', { name: 'Profile' }).click()
await page.getByRole('button', { name: 'Save' }).click()

So this would always wait for a navigation to complete, element to appear, etc.

In your 3rd step, if you would immediately click, Playwright would wait for the click element to be appear on the page etc. like a real user and then click it once its there not moving anymore etc.

If you have concrete examples which don't work, let us know!

[ChintanVasoya]

I'm encountering an issue and require assistance regarding implementing an event listener that consistently monitors page load events. Here's an example scenario to illustrate the problem:

Navigate to a specific URL.

1. Input the username and password.

2. Click on the login button. (At this point, an API call is made, and upon successful authentication, the user is redirected to the dashboard page.)

3. Click on the profile icon from the dashboard page.

4. Proceed to click on the save button from the profile page.

   The issue arises when a user clicks on a button that redirects to a new page. At such moments, I encounter difficulties. I'm in need of an event listener that can automatically handle this situation by waiting for a designated period.

What I'm seeking is something along the lines of:

page.on('load', async data => {
    await page.wait(2000);
});

This code ideally waits for 2000 milliseconds whenever a new page loads.

could you please provide a solution or direct me to an article that explains how to achieve this functionality?

[mxschmitt]

Image being a user - does the user every time wait for 2 seconds before clicking somewhere? Some users are very fast and click immediately somewhere on the page. So it looks like a bug in the application rather than something Playwright should fix by waiting for 2 seconds.

[Exoow]

@ChintanVasoya if you really need this, why not write a wrapper method that first navigates and then await page.waitForTimeout(2000) so you can have this behavior everywhere you navigate.

[yury-s]

As Max mentioned above, Playwright's recommended approach is to test the user visible behavior, i.e. wait for a UI change that would be observable by a human, rather than waiting for a timeout after some internal load event.

The issue arises when a user clicks on a button that redirects to a new page. At such moments, I encounter difficulties.

Why can't you wait for an expected state of the page's UI by using one of the web assertions or Playwright actions that auto-wait internally?

[yury-s]

Closing per the responses above, feel free to open a new issue if it doesn't work.