Настройка CI/CD pipeline

Для начала работы с библиотекой axe-core необходимо установить её через npm или yarn:

npm install axe-core --save-dev

или

yarn add axe-core --dev

axe-core — это низкоуровневая библиотека для проверки доступности веб-страниц по стандартам WCAG 2.1. Она предоставляет API для запуска аудитов как в браузере, так и в Node.js окружении.

После установки библиотека может быть подключена через ES-модули:

import axe from 'axe-core';

или через CommonJS:

const axe = require('axe-core');

Основные концепции

axe-core работает с контекстом и правилами. Контекст определяет область DOM, в которой выполняется аудит. Правила определяют, какие проверки будут применяться.

Пример базового использования:

axe.run(document, { runOnly: ['wcag2aa'] }, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • document — контекст, где будут проверяться элементы.
  • runOnly — массив правил или категорий, например 'wcag2aa', 'section508'.
  • results.violations — список найденных нарушений с указанием элементов, описания и рекомендаций.

Настройка правил и исключений

В axe-core можно отключать отдельные правила или изменять их конфигурацию. Это полезно при интеграции в CI/CD, чтобы избежать ложноположительных срабатываний на динамические элементы.

const options = {
  rules: {
    'color-contrast': { enabled: false },
    'label': { enabled: true }
  }
};

axe.run(document, options, (err, results) => {
  console.log(results.violations);
});

Интеграция с Jest и другими тестовыми фреймворками

Для автоматизированного тестирования можно использовать axe-core совместно с Jest:

import { configureAxe, toHaveNoViolations } from 'jest-axe';
import { render } from '@testing-library/react';

expect.extend(toHaveNoViolations);

test('Компонент должен быть доступен', async () => {
  const { container } = render(<MyComponent />);
  const axe = configureAxe();
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Здесь:

  • jest-axe оборачивает axe-core в удобные методы для Jest.
  • configureAxe() позволяет задать глобальные настройки.
  • toHaveNoViolations упрощает утверждения в тестах.

Интеграция в CI/CD pipeline

Для проверки доступности на стадии сборки и деплоя axe-core можно запускать в скриптах CI/CD. Пример для GitHub Actions:

name: Accessibility Audit

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  axe-audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Установка Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Установка зависимостей
        run: npm ci
      - name: Запуск axe-core
        run: node scripts/axe-audit.js

В scripts/axe-audit.js можно реализовать аудит всех страниц приложения через Puppeteer или Playwright:

import puppeteer from 'puppeteer';
import axeCore from 'axe-core';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');

  const results = await page.evaluate(() => {
    return axe.run();
  });

  console.log(results.violations);
  if (results.violations.length > 0) process.exit(1);

  await browser.close();
})();
  • puppeteer.launch() открывает браузер без интерфейса.
  • page.evaluate() выполняет аудит непосредственно в DOM страницы.
  • process.exit(1) прерывает CI pipeline при найденных нарушениях, обеспечивая контроль качества.

Логирование и отчетность

axe-core позволяет сохранять результаты аудита в JSON для дальнейшей аналитики:

import fs from 'fs';

fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));

Собранные данные можно визуализировать или интегрировать с другими инструментами CI/CD, например с SonarQube или Allure, чтобы получать отчеты о доступности вместе с тестами покрытия кода и функциональными тестами.

Настройка для разных окружений

В больших проектах полезно иметь разные конфигурации axe-core для разработки, staging и production:

  • Development: полный аудит всех правил для обнаружения потенциальных проблем.
  • Staging: аудит только критичных правил WCAG 2.1 AA.
  • Production: выборочный аудит динамических страниц с минимальным влиянием на производительность.

Это достигается через отдельные файлы конфигурации или через переменные окружения:

const config = process.env.CI
  ? { runOnly: ['wcag2aa'] }
  : { runOnly: ['wcag21aa', 'section508'] };

axe.run(document, config, (err, results) => {
  console.log(results.violations);
});

Такой подход позволяет автоматизировать проверки доступности, предотвращая появление нарушений на релизных версиях приложения.

Оглавление