# 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.

- Skill: `redpanda-data/setup-e2e-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add redpanda-data/setup-e2e-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/redpanda-data/setup-e2e-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: redpanda-data (https://skillmd.com/u/redpanda-data)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/redpanda-data/setup-e2e-testing

---


# 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

```ts
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](SETUP.md).