Playwright Test Generator

Playwright is an E2E testing framework from Microsoft that supports Chromium, Firefox, and WebKit in a single test run. Unlike Cypress (which runs inside the browser), Playwright drives browsers externally via DevTools Protocol, enabling true multi-tab testing, native file uploads, and parallel browser testing. Playwright's async/await API is more idiomatic for TypeScript developers, and its Locator API has built-in auto-waiting so you rarely need explicit waits.

Playwright's Locator API (page.locator(), page.getByTestId(), page.getByRole(), page.getByText()) is the recommended way to find elements. Unlike page.$() (which returns a static ElementHandle that can go stale), Locators are lazy — they re-query the DOM on every action and automatically wait for the element to be actionable. This eliminates most timing-related flakiness. Use page.getByTestId() for data-testid attributes and page.getByRole() for accessible elements.

page.route(pattern, handler) intercepts network requests matching the glob pattern (e.g. '**/api/users'). In the handler, you can call route.fulfill({ status, body }) to return a fake response, route.abort() to simulate network errors, or route.continue() to pass through. This lets you test loading states, error handling, and edge cases without a real backend. Always set up routes before navigating to the page.

Configure projects in playwright.config.ts: each project specifies a browser via devices (e.g. devices['Desktop Chrome']). Run npx playwright test to execute all projects, or npx playwright test --project=chromium for one browser. In CI, run them in parallel with workers: 4. The Playwright HTML reporter (npx playwright show-report) shows results per browser with screenshots and traces.

Playwright traces (trace: 'on-first-retry' or 'retain-on-failure' in playwright.config.ts) record a complete timeline of your test — screenshots, network requests, console logs, and DOM snapshots at every step. When a test fails in CI, download the trace.zip and open it with npx playwright show-trace trace.zip. You get a full interactive timeline to debug exactly where the test diverged from expectations.

Use devices from @playwright/test: import { devices } from '@playwright/test'. Then in your playwright.config.ts projects, add { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } }. Within a test, override with await page.setViewportSize({ width: 375, height: 667 }). You can also emulate geolocation, timezone, and device pixel ratio. Run mobile tests in parallel with desktop tests using separate project configs.