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.