Playwright how-to

Browser e2e tests against the Next dev server (this monorepo uses port 7777).

Install

pnpm add -D @playwright/test
pnpm exec playwright install chromium
# or: pnpm run test:e2e:install

Item	Detail
Config	playwright.config.ts
Specs	e2e/**/*.spec.ts
Base URL	app dev URL (here: http://localhost:7777)

Commands

pnpm run test:e2e
pnpm run test:e2e:ui
pnpm run test:e2e:codegen   # start `pnpm run dev` first
pnpm exec playwright test e2e/<feature>/<file>.spec.ts

Implementation examples

Config with webServer

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:7777' },
  webServer: {
    command: 'pnpm run dev',
    url: 'http://localhost:7777',
    reuseExistingServer: !process.env.CI,
  },
});

Role-based spec

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

test('home shows main landmark', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('main')).toBeVisible();
});

Mock a mutating API

await page.route('**/api/contact-enquiry', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ ok: true }),
  });
});

Codegen

pnpm run dev
pnpm run test:e2e:codegen
# clean up to getByRole / labels before commit

Unit vs e2e

Layer	Tool	Use for
Unit	Vitest	Pure logic
E2E	Playwright	Navigation, a11y, forms, redirects