Introduction
Handling timeouts effectively is crucial for stable and reliable test automation with Playwright. Playwright provides different types of timeouts, including browser context timeouts, navigation and action timeouts, and explicit waits using expect.toBeVisible(). Understanding these timeout mechanisms helps prevent flaky tests and improves script execution efficiency.
Solution
1. Browser Context Timeout:
- Sets a timeout for all Playwright actions within a browser context. If any action exceeds this limit, the test will fail.
2. Navigation & Click Timeouts:
- goto timeout controls how long Playwright waits for page navigation to complete.
- click timeout defines how long Playwright waits for an element to become actionable before clicking.
3. Explicit Wait using expect.toBeVisible():
- This method ensures that an element is visible before interacting with it, reducing flaky test cases caused by elements not being ready.
Example
// Setting a browser context timeout
const context = await browser.newContext({ timeout: 30000 }); // 30s timeout
const page = await context.newPage();
// Navigation timeout (overrides default 30s)
await page.goto('https://example.com', { timeout: 10000 }); // 10s timeout
// Click timeout
await page.click('button#submit', { timeout: 5000 }); // Waits max 5s before failing
// Explicit wait using expect.toBeVisible()
const submitButton = page.locator('button#submit');
await expect(submitButton).toBeVisible({ timeout: 7000 }); // Waits up to 7s for visibility
await browser.close();
Summary
- Browser context timeout applies to all actions in a session.
- Navigation (goto) timeout ensures page loading completes within the defined time.
- Click timeout waits for an element to become actionable.
- Explicit waits (expect.toBeVisible()) improve stability by ensuring elements are ready before interactions.
Using these timeout strategies effectively makes Playwright tests more reliable and robust!
