Answer

Alternatives to page.waitFor(networkidle) in Playwright

Hey there! If you're using Playwright and you're looking for alternatives to page.waitFor(networkidle), you're in the right place. Playwright actually discourages the use of waitFor methods that wait for network connections to be idle. Instead, it suggests using web assertions and locators.

Web Assertions

Web assertions are a way to check that certain conditions are met before proceeding with the test. You can use Jest's expect function, which is included in Playwright's default test runner, to implement web assertions. Jest provides a wide range of matchers that you can use to check various conditions on elements and their attributes. Here's an example:

import { test } from '@playwright/test';

test('has specific text content', async ({ page }) => {
  await page.goto('https://ray.run');
  const element = await page.$('selector');
  const content = await element.textContent();
  expect(content).toHaveText('expected text');
});

Locators

Locators provide more robust and reliable ways of finding elements on the page than CSS selectors or XPath expressions. They also allow you to wait for specific states or events on elements before interacting with them. Here's how you can use the locator.waitFor() method:

import { test } from '@playwright/test';

test('wait for element', async ({ page }) => {
  await page.goto('https://ray.run');
  const locator = page.locator('button:has-text("Submit")');
  await locator.waitFor();
});

This method waits until the element exists and satisfies any specified state options. If no matching element is found within the specified timeout period, it throws an error.

So, there you have it! Instead of waiting for network idle states, you can use web assertions with Jest matchers and locators with state options like "visible" or "enabled". Happy testing!