| name | playwright |
| description | End-to-end testing framework for modern web apps -- browser automation, visual regression, and cross-browser testing |
Playwright
End-to-end testing framework for modern web apps. Supports Chromium, Firefox, and WebKit with a single API. Auto-waits for elements, intercepts network, and captures traces for debugging.
When to Use
- Testing critical user flows across real browsers
- Visual regression testing with screenshot comparison
- Network mocking for deterministic API responses
- Component testing with
@playwright/experimental-ct-react
Key Patterns
Page Object Model
Encapsulate page interactions in classes. Tests call loginPage.signIn(user) instead of raw selectors. Keeps tests readable and selectors maintainable in one place.
Locator Strategies
Prefer resilient locators: getByRole > getByLabel > getByText > getByTestId. Avoid CSS/XPath -- they break on DOM changes.
Assertions with Auto-Retry
Use expect(locator) assertions -- they auto-retry until timeout. await expect(page.getByText('Success')).toBeVisible(). Never use waitForTimeout.
Visual Comparison
await expect(page).toHaveScreenshot('name.png') captures and diffs screenshots. Use maxDiffPixelRatio for tolerance. Update baselines with --update-snapshots.
Network Mocking
await page.route('**/api/users', route => route.fulfill({ json: mockData })) intercepts requests. Use route.abort() to simulate failures.
Multi-Browser Testing
Configure in to run across browsers. Each project specifies a browser and viewport. CI runs all; local dev targets one.
