69 / 74 · 10 Visual & Accessibility Testing · Visual and Accessibility CI Pipeline← prev⊞ allnext →☰ Read as one page
13.1The Complete Pipeline
# .github/workflows/visual-a11y.yml
name: Visual & Accessibility Tests
on: [pull_request]
jobs:
accessibility:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npm run build
- name: Start app
run: npm run start &
env:
PORT: 3000
- name: Wait for app
run: npx wait-on http://localhost:3000 --timeout 30000
- name: Run axe-core accessibility audit
run: npx playwright test tests/accessibility/ --reporter=json > a11y-results.json
- name: Upload accessibility report
if: always()
uses: actions/upload-artifact@v4
with:
name: accessibility-report
path: a11y-results.json
visual-regression:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- name: Build Storybook
run: npx storybook build -o storybook-static
- name: Run Chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitOnceUploaded: true
design-token-drift:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build && npm run start &
- name: Wait for app
run: npx wait-on http://localhost:3000 --timeout 30000
- name: Verify design tokens
run: npx playwright test tests/design-system/
- name: Check Figma drift
if: env.FIGMA_TOKEN != ''
run: python scripts/figma_design_drift.py --report drift-report.json
env:
FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
keyboard-navigation:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build && npm run start &
- name: Wait for app
run: npx wait-on http://localhost:3000 --timeout 30000
- name: Run keyboard navigation tests
run: npx playwright test tests/accessibility/keyboard-navigation.spec.ts