Setup E2e Testing

Set up Playwright + Testcontainers + axe-core for e2e and accessibility testing. Includes patterns for forms, tables, workflows. Use when setting up e2e tests or writing Playwright tests.

redpanda-data a00a445 2 files · 4.1 KB Updated 6 repo stars

File contents

E2E Testing

Conventions

  • e2e/*.spec.ts -- all e2e tests use .spec.ts
  • Name by feature: login.spec.ts, create-topic.spec.ts
  • Selectors: getByRole > getByLabel > getByText > getByTestId > CSS
  • Test IDs: {feature}-{element}, {feature}-{element}-{index}, {feature}-{state}

Accessibility -- axe on every page

import { test, expect } from '../fixtures/base'
test('page is accessible', async ({ page, makeAxeBuilder }) => {
  await page.goto('/topics/create')
  const results = await makeAxeBuilder().analyze()
  expect(results.violations).toEqual([])
})

Monitor for E2E

Monitor: bun run test:e2e -- stream results, react fail before suite finish.

Agent-Browser vs Playwright

Task Tool
Test suites Playwright via Monitor: bun run test:e2e
Generate selectors agent-browser snapshot (a11y tree)
Visual smoke test agent-browser screenshot --annotate
Interactive debug Playwright UI mode
CI Playwright
AI page inspection agent-browser

Setup (install, config, fixtures, Testcontainers): see SETUP.md.

redpanda-data/ui-harness/tree/main/setup-e2e-testing commit a00a445dd7

Frequently asked questions

npx skillmds@latest add redpanda-data/setup-e2e-testing