Playwright E2E Test Generator

Playwright is a Microsoft-maintained end-to-end testing framework supporting Chromium, Firefox, and WebKit. Unlike Cypress, Playwright supports multiple browsers natively and can run tests in parallel across different browsers. It also supports testing in Node.js, Python, Java, and .NET. Playwright is generally faster due to its multi-worker model and has first-class support for network interception, mobile emulation, and component testing.

locator() is the modern, recommended approach — it returns a Locator object that lazily resolves elements at action time and automatically retries. page.$() is the older ElementHandle approach that resolves immediately and does not auto-retry. Always prefer locator() for resilient tests. Locators also support chaining: page.locator('.form').locator('input[type=email]') scopes the inner selector to the parent.

Playwright auto-waits for elements to be visible and actionable before interacting. You rarely need explicit waits. For network requests, use await page.waitForResponse() or await page.waitForRequest(). For specific state, use await locator.waitFor({ state: 'visible' }). Avoid time-based waits (page.waitForTimeout) — they make tests slow and brittle. Use page.waitForLoadState('networkidle') only as a last resort for complex SPAs.

Playwright works well in CI. For GitHub Actions, use the official action: npx playwright install --with-deps in your setup step. Set CI=true to run in non-interactive mode. Use npx playwright test --reporter=github for GitHub annotation output. Playwright also generates HTML reports: npx playwright show-report. Store the playwright-report/ directory as a CI artifact for test failure debugging.

Fixtures are reusable setup/teardown units in Playwright. The built-in page fixture gives you a clean browser page for each test. You can create custom fixtures for common setup like logging in: test.extend({ loggedInPage: async ({ page }, use) => { await loginAs(page, '[email protected]'); await use(page); } }). Fixtures compose naturally and are automatically scoped to test, worker, or session lifetime.

Use --debug flag to open Playwright Inspector: npx playwright test --debug. The inspector lets you step through tests and inspect selectors. Use trace viewer for CI failures: configure trace: 'on-first-retry' in playwright.config.ts, then view with npx playwright show-trace trace.zip. Use page.pause() to freeze execution at a specific point during development. The --headed flag runs tests with a visible browser.