Wait for network idle after click

Question

I'm looking for a method that would allow me to wait for the network idle after clicking a button or some action. there is a way to wait for the network idle after clicking? page.locator("text=Click").click() //some method that wait network is idle after clicking the button

I tried waitForLoadState works only if there is navigation. waitForResponse works on specific requests but it's not good for me.

Just to clarify, when you click the button, the page remains on the same URL, no reload of the url is performed, and the click loads something in dynamically? — AJG, Nov 28 '22 at 08:52
Yes you right fetch data on same URL, "client side rendering" . — Vladislav Belousov, Nov 28 '22 at 09:38

score 4 · Answer 1 · answered Dec 01 '22 at 10:59

4

There is a playwright library for network idle wait.

await page.waitForLoadState('networkidle')

I hope this helps you.

answered Dec 01 '22 at 10:59

alfah

77
5

This is addressed in the question: `waitForLoadState` is usable only while the page is loading, not after a button click. – Tomáš Hübelbauer Apr 01 '23 at 14:48

Tomáš Hübelbauer · Answer 2 · 2023-04-01T14:49:15.603

Consider using waitForResponse if you know what particular network communication you're initiating with the button click and thus know what URLs you can use to monitor the requests/responses of to see if the communication has finished yet.

https://playwright.dev/docs/api/class-page#page-wait-for-response

For example:

// Click the *Delete* button
await page.getByText('Delete').click();

// Wait for the `api/items/delete` endpoint to be called
await page.waitForResponse(/\/api\/items\/delete/);

Unfortunately this won't cover the scenario of waiting after all network activity settles after the button click.

score 1 · Answer 3 · answered Nov 28 '22 at 10:42

As your use case is to click a link which dynamically loads in other DOM Elements, you could possibly try using .waitForSelector().

page.locator("text=Click").click()
page.waitForSelector('selector for what you are waiting for here')

Also pass options to waitForSelector to wait for it being attached and / or visible and setTimeout appropriately.

I was going to suggest using assertion polling but I don't believe the Java version of playwright has that yet.

score 0 · Answer 4 · answered Feb 03 '23 at 14:14

0

You could try page.waitForTimeout(milliseconds) and just give it a wait value for safety. It helped me is some cases to increase the waiting time where the test was going to timeout 5000ms because of the loading time.

answered Feb 03 '23 at 14:14

gabo

5
4

score 0 · Answer 5 · answered Apr 03 '23 at 09:25

Combine wait for response with some VISIBLE UI change after fetch request:

await button.click() 
await page.waitForResponse(res => res.status() === 200) 

const newText = await page.getByRole('paragraph') 
const newImage = await page.getByRole('img')
 
await expect(newText).not.toEqual(prevText) 
await expect(newImage).not.toEqual(prevImage)

Wait for network idle after click

5 Answers5

Combine wait for response with some VISIBLE UI change after fetch request: