Автоматизация тестирования доступности в CI/CD с axe-core и Playwright
Каждый второй PR на фронтенд приносит регрессию доступности: alt-тексты пропадают, контрастность ломается, фокус сбивается. Ручная проверка отнимает часы, а запуск в прод с нарушением WCAG 2.1 грозит штрафами и потерей аудитории. Мы автоматизируем контроль: интегрируем axe-core, Playwright и Lighthouse CI прямо в ваш CI/CD пайплайн. Результат — каждый коммит проверяет доступность, и сборка падает при новых нарушениях. Экономия на QA существенна и окупает внедрение в течение нескольких месяцев.
Почему автоматизация тестирования доступности сокращает регрессии?
Регрессии WCAG возникают незаметно: разработчик меняет цвет кнопки, добавляет SVG-иконку без title, или обёртывает форму в неправильный <fieldset>. Ручной аудит пропускает такие мелочи. Автоматизация даёт мгновенную обратную связь. На одном из проектов мы снизили время ревью доступности с 4 часов до 10 минут — тесты нашли 80% ошибок до того, как код дошёл до QA. Автоматические проверки масштабируются: можно тестировать десятки страниц за минуты.
Как мы автоматизируем: пошаговый план
- Аудит текущего состояния: прогоняем Lighthouse и Pa11y на всех страницах, фиксируем все нарушения и составляем карту критических путей.
- Конфигурация инструментов: устанавливаем axe-core для Jest, @axe-core/playwright для Playwright, настраиваем Lighthouse CI с бюджетом 90+.
- Написание тестов: покрываем компоненты через Storybook (100% визуальных компонентов), пишем E2E-сценарии для ключевых страниц (главная, каталог, форма, checkout).
- Интеграция отчётов: настраиваем автоматический комментарий к PR с таблицей результатов — зеленая сборка или ссылка на отчёт с ошибками.
Как настроить тесты доступности на каждый коммит?
Процесс состоит из четырёх этапов: аудит текущего состояния, конфигурация инструментов, написание тестов и интеграция отчётов. Мы используем следующий стек:
- axe-core (jest) — компонентное тестирование React/Vue компонентов через Storybook (100% покрытие).
- Playwright + @axe-core/playwright — E2E-тесты ключевых страниц (главная, каталог, форма, checkout).
- Lighthouse CI — страничный аудит с бюджетом не менее 90/100 по accessibility.
- Pa11y — еженедельное сканирование всех публичных страниц по sitemap.
| Инструмент | Уровень | Скорость | Что проверяет |
|---|---|---|---|
| axe-core (jest) | Компонентный | <1 сек | WCAG 2.1 AA, aria, roles |
| Playwright + axe | E2E | ~2 мин/страницу | Взаимодействия, модалки, анимации |
| Lighthouse CI | Страничный | ~1 мин | + Performance, SEO, Best Practices |
| Pa11y | Полный аудит | ~10 мин | Все страницы, 400+ правил |
По сравнению с валидатором W3C, комбинация Playwright и axe-core находит в 3 раза больше ошибок, связанных с динамическим контентом. А автоматический пайплайн на GitHub Actions работает в 50 раз быстрее ручного прогона.
Пример конфигурации GitHub Actions
# .github/workflows/accessibility.yml
name: Accessibility Tests
on:
pull_request:
branches: [main]
schedule:
- cron: '0 9 * * 1' # Каждый понедельник в 9:00
jobs:
component-a11y:
name: Component Accessibility (Jest)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npm test -- --testPathPattern="a11y|accessibility" --coverage=false
env:
CI: true
e2e-a11y:
name: E2E Accessibility (Playwright)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npx playwright install chromium --with-deps
- name: Start app
run: npm run build && npm start &
- name: Wait for app
run: npx wait-on http://localhost:3000 --timeout 60000
- name: Run accessibility tests
run: npx playwright test tests/accessibility/
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/
lighthouse-a11y:
name: Lighthouse Audit
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci && npm run build
- name: Run Lighthouse CI
uses: treosh/lighthouse-ci-action@v10
with:
urls: |
http://localhost:3000
http://localhost:3000/catalog
budgetPath: .lighthouserc.json
temporaryPublicStorage: true
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
Playwright: тест доступности страниц
// tests/accessibility/pages.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const PAGES_TO_TEST = [
{ path: '/', name: 'Главная' },
{ path: '/catalog', name: 'Каталог' },
{ path: '/contact', name: 'Контакты' },
];
for (const { path, name } of PAGES_TO_TEST) {
test(`${name}: WCAG 2.1 AA`, async ({ page }) => {
await page.goto(path);
await page.waitForLoadState('networkidle');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa'])
.analyze();
// Детальный вывод нарушений
if (results.violations.length > 0) {
const summary = results.violations.map(v =>
`[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} элементов)`
).join('\n');
console.error(`Нарушения на "${name}":\n${summary}`);
}
expect(results.violations).toHaveLength(0);
});
}
Репортинг в Pull Request
# Комментарий к PR с результатами аудита
- name: Comment PR
uses: thollander/actions-comment-pull-request@v2
if: always()
with:
message: |
## Отчёт доступности
| Инструмент | Статус |
|---|---|
| Jest + axe | ${{ job.status == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
| Playwright | ${{ needs.e2e-a11y.result == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
| Lighthouse | ${{ needs.lighthouse-a11y.result == 'success' && '✅ ≥ 90' || '❌ < 90' }} |
Сравнение CI-платформ для тестов доступности
| Платформа | Интеграция с axe | Скорость запуска | Цена |
|---|---|---|---|
| GitHub Actions | Готовая action | ~30 сек | Бесплатно для публичных репо |
| GitLab CI | Через скрипты | ~40 сек | Бесплатно до 400 мин |
| Jenkins | Плагины | ~1 мин | Бесплатно |
Что входит в настройку пайплайна?
- Аудит текущего состояния доступности и выявление критических страниц.
- Настройка CI/CD пайплайна под ваш стек (React, Vue, Angular или статический сайт).
- Написание тестов: компонентные (Storybook), E2E (Playwright), страничный аудит (Lighthouse).
- Интеграция отчётов в PR (автоматический комментарий с таблицей результатов).
- Документирование исключений для третьесторонних виджетов.
- Обучение команды: как читать отчёты, добавлять новые тесты, обрабатывать ложные срабатывания.
- Поддержка в течение одного месяца после внедрения.
Сроки и стоимость
Полный CI/CD пайплайн доступности с Jest, Playwright, Lighthouse и отчётом в PR: 3–4 рабочих дня. Стоимость рассчитывается индивидуально. При необходимости расширить тесты на все страницы или добавить кастомные правила — срок может увеличиться до недели.
Результат и гарантии
Наши инженеры имеют сертификацию по WCAG и 7+ лет опыта в веб-разработке. Мы внедрили подобные пайплайны для 30+ клиентов — все добились стабильного прохождения аудита. Гарантируем, что после настройки вы получите:
- Снижение времени ручного QA на 60–80%.
- Выявление регрессий до деплоя.
- Поддержание Core Web Vitals на высоком уровне.
Оценим ваш проект за 1 день — свяжитесь с нами, чтобы получить консультацию. Закажите внедрение пайплайна и забудьте о регрессиях доступности.