npmIntermediate

@playwright/test

End-to-end browser testing framework that runs tests in Chromium, Firefox, and WebKit.

testinge2ebrowserautomationtypescript

The Problem

Unit tests pass but users still hit broken flows. The checkout button works in isolation but breaks when combined with auth state and the cart. You need tests that run in a real browser, click real buttons, and verify what users actually see.

Mental Model

Playwright controls a real browser (Chromium, Firefox, or WebKit) via the DevTools protocol. You navigate pages, interact with elements using locators (resilient selectors), and assert on page state. Tests run in parallel across browsers. Failed tests auto-save screenshots and traces.

60-second start

Write your first E2E test

npm init playwright@latest
import { test, expect } from '@playwright/test'

test('homepage loads', async ({ page }) => {
  await page.goto('https://example.com')
  await expect(page).toHaveTitle(/Example/)
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
})
npx playwright test
npx playwright test --ui  # interactive mode

Use it when

Critical user flows (login, checkout, onboarding), cross-browser compatibility checks, visual regression testing, scraping JS-rendered content, accessibility audits.

Skip it when

Unit or integration testing (Vitest/Jest is faster). Tests that don't need a real browser. Simple API testing (use supertest or fetch).

Alternatives

cypressBetter DX, interactive test runner, but Chromium-only and slower on CI.

puppeteerGoogle's CDP library, Chromium-only, no test runner built in.

seleniumMature, multi-language, but verbose API and slower than Playwright.

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.