CI-пайплайн визуального тестирования и доступности

Updated Jul 2026

Полный пайплайн

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

Этапы пайплайна по скорости и охвату

Стратегия обработки сбоев

Мониторинг и отчётность

Дашборд оценки доступности

# Track accessibility compliance over time
def generate_a11y_dashboard(reports):
    """Generate accessibility trend data from CI reports."""
    trends = []
    for report in reports:
        trends.append({
            "date": report["date"],
            "total_violations": report["total_violations"],
            "critical": report["critical"],
            "serious": report["serious"],
            "pages_tested": report["pages_tested"],
            "compliance_rate": 1 - (report["total_violations"] / report["pages_tested"]),
        })

    return {
        "current_violations": trends[-1]["total_violations"],
        "trend": "improving" if trends[-1]["total_violations"] < trends[-2]["total_violations"] else "degrading",
        "compliance_rate": f"{trends[-1]['compliance_rate']:.1%}",
        "history": trends,
    }

Ключевые выводы

• AI-визуальное тестирование устраняет проблему ложных срабатываний, которая погубила внедрение попиксельного сравнения. Модели компьютерного зрения могут отличить значимые изменения от шума рендеринга.
• axe-core автоматически выявляет 30-40% проблем доступности -- запускайте его на каждой странице при каждом PR. Оставшиеся 60-70% требуют экспертной оценки человека и AI-аудита.
• Цветовой контраст — наиболее часто нарушаемый критерий WCAG и самый простой для автоматического тестирования. Закодируйте соотношения 4.5:1 и 3:1 в ваш CI-пайплайн.
• Тестирование клавиатурной навигации выявляет реальные проблемы пользователей -- если ваш процесс оформления заказа нельзя пройти только с клавиатуры, вы исключаете пользователей и приглашаете судебные иски.
• European Accessibility Act вступил в силу -- если ваш продукт продаётся в ЕС, соответствие WCAG 2.1 AA является юридически обязательным, а не опциональным.
• Верификация дизайн-токенов предотвращает дрифт дизайна -- автоматическое сравнение спецификаций Figma и вычисленных CSS-стилей выявляет постепенное расхождение, которое ручное ревью пропускает.
• Визуальное тестирование компонентов в Storybook выявляет проблемы раньше, чем скриншоты уровня страницы, при значительно меньших затратах.

Тезис для собеседования

«Я подхожу к визуальному тестированию и тестированию доступности как к взаимодополняющим дисциплинам. Для визуальной регрессии я использую комбинацию встроенного сравнения скриншотов Playwright для скорости и инструмента вроде Percy или Chromatic для кроссбраузерного покрытия с AI-триажем, который фильтрует шум рендеринга и отмечает только значимые изменения. Для доступности я запускаю axe-core на каждой странице при каждом PR как минимум — он автоматически выявляет 30-40% проблем WCAG 2.1 AA. Но я выхожу за рамки сканирования на основе правил, используя AI-агентов, которые могут оценить, является ли alt-текст действительно описательным, направляют ли сообщения об ошибках пользователя и является ли поток чтения логичным — то, что axe-core принципиально не может оценить. Я также тестирую клавиатурную навигацию сквозным образом: наш процесс оформления заказа должен быть проходим без мыши, с видимыми индикаторами фокуса и корректным захватом фокуса в модальных окнах. С учётом вступления в силу European Accessibility Act и более 4 000 исков по ADA в год в США, доступность — не приятное дополнение, а юридическое и бизнес-требование, которое я встраиваю в CI-пайплайн с первого дня.»