Answer

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.