Playwright

End-to-end testing framework by Microsoft that supports Chromium, Firefox, and WebKit. Auto-waiting, parallel execution, the Trace Viewer for debugging, a codegen recorder, and built-in API testing — all in one modern testing toolkit.

What is Playwright?

Playwright is an open-source end-to-end testing framework developed by Microsoft. It automates real browser instances — Chromium (Chrome/Edge), Firefox, and WebKit (Safari) — via a single, consistent API. Unlike older automation tools, Playwright was designed from the ground up for modern web applications: single-page apps, server-rendered apps, multi-tab flows, iframes, and web components.

Tests run in parallel by default, use smart auto-waiting to eliminate flakiness, and can target mobile device emulation. The Trace Viewer records a full timeline of every test action for deterministic debugging. Codegen records user interactions and produces test code automatically. Playwright supports TypeScript, JavaScript, Python, Java, and C#.

Key Features

• Auto-waiting — waits for elements to be visible, enabled, and stable before acting — no explicit waits needed
• Cross-browser — Chromium, Firefox, and WebKit with a single test suite; mobile device emulation included
• Trace Viewer — captures screenshots, DOM snapshots, and network activity for every test step; replay in the browser
• Codegen — record interactions in a real browser and generate test code using accessible locators
• Fixtures — composable, reusable test setup (auth state, mock services, custom page objects) via test.extend()
• API testing — built-in HTTP client for testing REST APIs without a browser in the same test suite
• Parallelism — tests run in parallel by default; workers and sharding configurable for large CI suites
• Component testing — test React, Vue, and Svelte components in isolation with @playwright/experimental-ct-*

Installation

# Create a new project with Playwright pre-configured
npm init playwright@latest

# Add Playwright to an existing project
npm install --save-dev @playwright/test

# Install browser binaries (Chromium, Firefox, WebKit)
npx playwright install

# Run tests
npx playwright test

# Run tests with UI mode (interactive, time-travel debugging)
npx playwright test --ui

# Generate tests using the codegen tool
npx playwright codegen https://example.com

Writing Tests

Tests are organized with test.describe blocks and individual test() cases. Use accessible locators (getByRole, getByLabel) rather than CSS selectors for resilient tests.

// tests/auth.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Authentication', () => {
  test('user can log in with valid credentials', async ({ page }) => {
    await page.goto('/login');

    // Fill in the login form
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('s3cret');
    await page.getByRole('button', { name: 'Sign in' }).click();

    // Playwright auto-waits for navigation to complete
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
  });

  test('shows error for wrong password', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('wrong');
    await page.getByRole('button', { name: 'Sign in' }).click();

    await expect(page.getByText('Invalid credentials')).toBeVisible();
  });
});

Fixtures for Reusable Setup

Fixtures replace beforeEach hooks with composable, type-safe setup. An auth fixture logs in once and passes the authenticated page to each test that needs it — without repeating the login steps.

// fixtures/auth.ts — a custom fixture that pre-authenticates
import { test as base, expect } from '@playwright/test';

type AuthFixtures = {
  authenticatedPage: Page;
};

export const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // Log in once, share the authenticated browser state
    await page.goto('/login');
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('adminpass');
    await page.getByRole('button', { name: 'Sign in' }).click();
    await page.waitForURL('/dashboard');
    await use(page);
  },
});

// Use in tests
test('admin can delete a user', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/users');
  // ...
});

API Testing

The request fixture gives you a full HTTP client for testing APIs without launching a browser. Useful for testing REST endpoints or verifying back-end state after a UI action.

// API testing with Playwright — no browser needed
import { test, expect } from '@playwright/test';

test('GET /api/users returns a list', async ({ request }) => {
  const response = await request.get('/api/users');
  expect(response.status()).toBe(200);

  const users = await response.json();
  expect(Array.isArray(users)).toBe(true);
  expect(users.length).toBeGreaterThan(0);
  expect(users[0]).toHaveProperty('id');
});

test('POST /api/users creates a new user', async ({ request }) => {
  const response = await request.post('/api/users', {
    data: { name: 'Alice', email: '[email protected]' }
  });
  expect(response.status()).toBe(201);
  const user = await response.json();
  expect(user.email).toBe('[email protected]');
});

Configuration

playwright.config.ts controls browsers, parallelism, retries, base URL, tracing, and screenshot policies. Define multiple projects to test across browsers and viewports in one run.

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,          // run tests in parallel
  forbidOnly: !!process.env.CI, // fail CI if test.only is left in
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry', // capture traces on retry
    screenshot: 'only-on-failure',
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
  ],
});

Playwright vs Cypress

Pros and Cons