Playwright
End-to-end browser automation testing framework supporting Chromium, Firefox, and WebKit
Details
Language / Topic
JavaScriptCategory
Testing
Rules
balanced
- Use `page.getByRole('button', { name: 'Submit' })` and `page.getByLabel('Email')` locators — prefer ARIA-based selectors over CSS or XPath.
- Call `await expect(page.getByText('Success')).toBeVisible()` for assertions — never use raw `page.waitForTimeout()` delays.
- Authenticate once via `storageState` in `playwright.config.ts` and reuse the saved state across tests to avoid repeated login flows.
- Use `page.route('**/api/users', route => route.fulfill({ json: users }))` to mock network calls for isolated tests.
- Run tests in parallel (default) — make every test independent by creating unique data; never rely on insertion order.
- Use role-based locators: `page.getByRole('button', { name: 'Sign in' })`, `page.getByLabel('Password')`, `page.getByTestId('submit')` — these reflect how users perceive the UI and are resilient to style changes.
- Assert UI state with Playwright's auto-retrying assertions: `await expect(locator).toBeVisible()`, `await expect(locator).toContainText('Hello')`, `await expect(page).toHaveURL('/dashboard')` — these retry until the condition is met or timeout expires.
- Set up authenticated state once in a `setup` project and save to `storageState.json`: in `playwright.config.ts` declare `{ name: 'setup', testMatch: /auth.setup.ts/ }` and add `storageState` to all dependent projects.
- Intercept and mock APIs with `await page.route('**/api/products', r => r.fulfill({ json: mockProducts }))` — call `route.continue()` to pass real requests through when only some calls need mocking.
- Group related tests in `test.describe` blocks; use `test.beforeEach` for per-test navigation and setup.
- Use `test.use({ viewport: { width: 375, height: 667 } })` to run mobile-specific tests and `test.skip(({ browserName }) => browserName !== 'chromium', ...)` to gate browser-specific behavior.