Playwright Wait for Network Idle

Profile picture for user arilio666

This article will show how we can wait for the network idle. In playwright, there is a method for making the site wait for the network to idle till it loads.

Sometimes the page loads differently than we expect. This causes the next test step to fail due to a page load issue.

Let us look at a scenario of that.

await page.goto("https://www.programsbuzz.com/");
await page.locator('//i[@class="fas fa-search"]').click()
await page.locator('#edit-keys').type('cypress')
await page.locator('#edit-submit').click()
const titles = await page.locator('ol h3').allTextContents()
console.log(titles)
  • When I try to text content once the search button is clicked.
  • We get an empty array instead of text content we ask it to print.
  • This typically occurs due to page load issues.
await page.waitForLoadState('networkidle')
  • Wait for load state and mentioning networkidle as the load state is the only way we can ask the playwright to wait for the page to be loaded and then perform the next step.
await page.goto("https://www.programsbuzz.com/");
await page.locator('//i[@class="fas fa-search"]').click()
await page.locator('#edit-keys').type('cypress')
await page.locator('#edit-submit').click()
await page.waitForLoadState('networkidle')
const titles = await page.locator('ol h3').allTextContents()
console.log(titles)
  • We can now see that the network idle has been waited for, and all the text results are fetched.

Conclusion:

This is how we can use networkidle in playwright.