Wait for Dynamic Content Without Sleeps

The concept

Modern pages load data after the first render: a spinner appears, a request finishes, results arrive. A fixed delay such as waitForTimeout(5000) guesses how long that takes. Guess too short and the test fails on a slow CI runner; guess too long and every run wastes time.

Playwright is built to avoid guessing. Actions like click() and fill() auto-wait for the element to be attached, visible, stable, enabled and able to receive events. Web-first assertions such as expect(locator).toBeVisible() or toHaveText() keep retrying until the condition is true or the timeout (5 seconds by default) is reached.

So the rule is: wait for a state, not for a time. Describe what “done” looks like and assert on it.

The fragile version

await page.getByRole('button', { name: 'Load results' }).click();
await page.waitForTimeout(5000);
const text = await page.locator('#results').textContent();
expect(text).toContain('3 results');

Why it breaks: The sleep is either too long (slow) or too short (flaky), and textContent() reads once with no retry.

A robust Playwright version

await page.getByRole('button', { name: 'Load results' }).click();
await expect(page.getByText('3 results')).toBeVisible();
// Need more than 5s? Raise the timeout for this check only:
await expect(page.getByRole('status')).toHaveText('Done', { timeout: 15000 });

The test finishes as soon as the content arrives and only fails if it genuinely never does.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Leaving waitForTimeout in committed tests; the Playwright docs say it is for debugging only.
• Mixing non-retrying reads (textContent, isVisible) with plain expect.
• Raising the global timeout instead of the one slow check.

FAQ