E2E TEST

e2e-test.ts

Playwright E2E + axe-core a11y: page objects, auth helpers, network mocks, CWV measurement.

Stark

WHAT THIS PATTERN TEACHES

How to write E2E tests with Playwright: Page Object Model for organization, axe-core a11y scanning as default fixture (every page gets a free a11y check), deterministic state with clean temp dirs, auth helpers for login flows, network mocking for API isolation, and Core Web Vitals measurement via PerformanceObserver.

WHEN TO USE THIS

Any web application that needs browser-level testing -- login flows, multi-page journeys, a11y compliance, visual regression.

AT A GLANCE

test('homepage loads and is accessible', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toBeVisible();
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toHaveLength(0);
});

FRAMEWORK IMPLEMENTATIONS

TypeScript

import { test, expect, type Page } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

// Page Object Model
class DashboardPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/dashboard');
  }
  get heading() {
    return this.page.getByRole('heading', { name: /dashboard/i });
  }
  get projectList() {
    return this.page.getByRole('list', { name: /projects/i });
  }
}

// Auth helper — reusable login fixture
async function loginAs(page: Page, email: string, password: string) {

← All Patterns