End-to-End Testing with Playwright

By Michael Samuel Naeem · January 2, 2026 · 8 min read

TestingPlaywrightE2EFrontend

Our Cypress suite took 45 minutes and failed on unrelated tests weekly. We rewrote the critical paths in Playwright — twelve tests covering signup, checkout, and account management. Runtime dropped to four minutes. Failures dropped to near zero because Playwright's auto-waiting eliminated the timing issues that caused 80% of our Cypress flakes.

Playwright is a browser automation framework for end-to-end testing. It controls real browsers programmatically, simulating user interactions and asserting on page state. Unlike unit tests that mock the browser, E2E tests verify the entire stack works together.

Setup and first test

npm init playwright@latest

import { test, expect } from "@playwright/test";

test("complete purchase flow", async ({ page }) => {
  await page.goto("/products/widget");
  await page.getByRole("button", { name: "Add to Cart" }).click();
  await page.getByRole("link", { name: "Cart" }).click();
  await page.getByRole("button", { name: "Checkout" }).click();
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByRole("button", { name: "Pay" }).click();
  await expect(page.getByText("Order confirmed")).toBeVisible();
});

Playwright auto-waits for elements to be visible, enabled, and stable before interacting.

Locator strategies

Prefer user-facing locators: getByRole, getByLabel, getByText, getByTestId. Avoid CSS classes that change with styling.

Network interception

await page.route("**/api/payments", (route) => {
  route.fulfill({ status: 402, body: JSON.stringify({ error: "Card declined" }) });
});

Intercept for error scenarios. Use real APIs for happy-path tests when a test environment is available.

Page Object Model

Encapsulate page interactions to reduce duplication. When the checkout form redesigns, update one file instead of twenty tests.

Auth setup project

Parallel execution

export default defineConfig({
  fullyParallel: true,
  retries: process.env.CI ? 1 : 0,
  use: { baseURL: "http://localhost:3000", trace: "on-first-retry" },
  webServer: { command: "npm run dev", port: 3000 },
});

Test data management

Seed data via API in beforeEach, not through the UI. A test seed endpoint creates known state in milliseconds.

Operational checklist for teams

Assign an owner for each recurring failure mode. Measure baseline before changes and compare after two sprints. Document the fix in the team wiki or runbook so the next engineer does not rediscover it. Schedule a quarterly review of metrics, tooling, and process — what reduced flakes or improved quality last quarter should be doubled down on; what did not work should be retired explicitly rather than left on the books.

Operational checklist for teams

Flake resistance patterns

Playwright's auto-wait reduces flakes but does not eliminate them. Use locator API over raw selectors; chain getByRole for accessibility-aligned queries. Isolate tests with fresh browser context per test — shared state causes order-dependent failures. Run E2E against staging with production-like data seed, not empty databases. Parallelize by spec file, not by test within file, when tests share database state.

Network conditioning in CI

Run one smoke spec per PR on default network and nightly suite with slow3G emulation for checkout flow. Service workers and HTTP/3 behave differently under throttle — catches timeouts unit tests miss. Record trace on first retry only to balance artifact storage.

Test data isolation

Each Playwright worker gets unique email prefix {workerIndex}[email protected] — parallel tests never collide on unique email constraint. Global setup seeds reference data once; tests only create deltas.