End-to-end tests with Playwright
Playwright drives a real browser through your real app. It is slower than unit or component tests and flakier, but it catches a class of bugs no other layer can: things that break when the whole system runs together. Use it sparingly and only for the critical user journeys.
import { test, expect } from '@playwright/test';
test('user can log in and see the catalog', async ({ page }) => {
await page.goto('http://localhost:3000/login');
await page.getByLabel('Username').fill('me');
await page.getByLabel('Password').fill('secret123');
await page.getByRole('button', { name: /log in/i }).click();
await expect(page).toHaveURL(/\/$/);
await expect(page.getByRole('heading', { name: /our catalog/i })).toBeVisible();
});A login journey tested through a real browser.
Pick three to five critical journeys to E2E test: login, checkout, create account, the flow your business revenue depends on. Do not try to E2E test every corner. The reliability cost is too high for the coverage you get, and you already have unit and component tests for the small stuff.
Quiz: Quiz
Loading practice…