← Back to Discord Forum

WaitForLoadState() in Playwright for check fully page loading

kateryna.qaposted in #help-playwright
Open in Discord

Hello, guys! Could you, please, help with next situation: I have used waitForLoadState('networkidle') for page loading. It works correctly before but for now the random error "Error: page.waitForLoadState: Navigation failed because page was closed!" appeared. I have also tried states 'load' and 'domcontentloaded' but it was not helped. Maybe there is an alternative for page loading? Thanks!

This thread is trying to answer question "What is an alternative for page loading in Playwright when encountering errors with WaitForLoadState()?"

2 replies

Maybe you can share some sample


Hi, I think page.waitForLoadState is no longer recommended, and networkIdle even has a warning in the docs: https://playwright.dev/docs/api/class-page#page-wait-for-load-state

'networkidle' - DISCOURAGED wait until there are no network connections for at least 500 ms. Don't use this method for testing, rely on web assertions to assess readiness instead.

Basically waitForLoadState (whether or not with networkIdle) has been used as a golden hammer to combat flakiness, but there is no golden hammer. Every case of flakiness needs to be analyzed individually.

Trace files (I set them to 'retain-on-failure') and the trace viewer are a great help to analyze flakiness issues: https://playwright.dev/docs/trace-viewer-intro

Despite Playwright's auto-waiting, there are still many cases where tests are flaky due to bugs in the app that are revealed only with ultra-fast users like Playwright. Auto-waiting: https://playwright.dev/docs/actionability

Either the app should be fixed (to block the user from interacting while the app is loading/processing), or some additional smart waiting needs to be added to the tests (as workaround for the app bugs).

For example, depending on the app and the page, you could waitForResponse (if you know the page is only ready after a certain response is received), or wait for some element to be enabled, using the auto-waiting assertions: https://playwright.dev/docs/test-assertions#list-of-assertions


Handling Page Loading in Playwright

If you're having trouble with waitForLoadState(), don't worry. Playwright offers other methods to handle page loading.

Using waitForFunction()

The waitForFunction() method lets you pass a predicate to be evaluated in the page context. For instance, to wait until a certain element is present on the page, use this function like so:

const selector = '.foo';
await page.waitForFunction(selector => !!document.querySelector(selector), selector);

This code waits until an element with class 'foo' appears on the page.

Using waitForSelector()

Another method is waitForSelector(). This waits for an element specified by a selector to satisfy a state option (appear/disappear from DOM or become visible/hidden). If the selector already satisfies your condition, it returns immediately. If not, and it doesn't satisfy your condition within your specified timeout period, it throws an error.

Here's an example:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  for (const currentURL of ['https://ray.run', 'https://ray.run']) {
    await page.goto(currentURL);
    const element = await page.waitForSelector('img');
    console.log('Loaded image: ' + await element.getAttribute('src'));
  await browser.close();

In this snippet, we're waiting for an image tag ('img') to load before proceeding.

Remember, these methods are alternatives and may not work in all scenarios where waitForLoadState() would be used. Understand what each method does and choose the one that best fits your needs based on what you're waiting for on your webpage.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.