Modern QA2026The Complete Pipeline — tiles
Log inJoin
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