Add Playwright accessibility and mobile layout e2e tests
Set up end-to-end test infrastructure with Docker Compose test environment, Playwright config, and automated global setup/teardown that seeds a test database and creates fixtures via the API. Tests cover 11 pages across both dark/light themes for WCAG 2.0 AA accessibility (axe-core), and across 3 viewports (mobile, tablet, desktop) for horizontal overflow and touch target validation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
57
frontend/e2e/accessibility.spec.ts
Normal file
57
frontend/e2e/accessibility.spec.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import AxeBuilder from '@axe-core/playwright'
|
||||
import { expect, test } from '@playwright/test'
|
||||
|
||||
import { loadFixtures } from './fixtures'
|
||||
|
||||
const fixtures = loadFixtures()
|
||||
|
||||
const pages = [
|
||||
{ name: 'Home', path: '/' },
|
||||
{ name: 'RunList', path: '/runs' },
|
||||
{ name: 'NewRun', path: '/runs/new' },
|
||||
{ name: 'RunEncounters', path: `/runs/${fixtures.runId}` },
|
||||
{ name: 'GenlockeList', path: '/genlockes' },
|
||||
{ name: 'NewGenlocke', path: '/genlockes/new' },
|
||||
{ name: 'GenlockeDetail', path: `/genlockes/${fixtures.genlockeId}` },
|
||||
{ name: 'Stats', path: '/stats' },
|
||||
{ name: 'AdminGames', path: '/admin/games' },
|
||||
{ name: 'AdminPokemon', path: '/admin/pokemon' },
|
||||
{ name: 'AdminEvolutions', path: '/admin/evolutions' },
|
||||
]
|
||||
|
||||
const themes = ['dark', 'light'] as const
|
||||
|
||||
for (const theme of themes) {
|
||||
test.describe(`Accessibility — ${theme} mode`, () => {
|
||||
test.use({
|
||||
storageState: undefined,
|
||||
})
|
||||
|
||||
for (const { name, path } of pages) {
|
||||
test(`${name} (${path}) has no WCAG violations`, async ({ page }) => {
|
||||
// Set theme before navigation
|
||||
await page.addInitScript((t) => {
|
||||
localStorage.setItem('ant-theme', t)
|
||||
}, theme)
|
||||
|
||||
await page.goto(path, { waitUntil: 'networkidle' })
|
||||
|
||||
const results = await new AxeBuilder({ page })
|
||||
.withTags(['wcag2a', 'wcag2aa'])
|
||||
.analyze()
|
||||
|
||||
const violations = results.violations.map((v) => ({
|
||||
id: v.id,
|
||||
impact: v.impact,
|
||||
description: v.description,
|
||||
nodes: v.nodes.length,
|
||||
}))
|
||||
|
||||
expect(
|
||||
violations,
|
||||
`${name} (${theme}): ${violations.length} accessibility violations found:\n${JSON.stringify(violations, null, 2)}`,
|
||||
).toHaveLength(0)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user