Параллельное выполнение

Библиотека Axe-core предоставляет инструменты для автоматизированного тестирования доступности веб-приложений. Она позволяет выявлять проблемы, связанные с нарушением стандартов WCAG (Web Content Accessibility Guidelines), и интегрируется как в браузерное окружение, так и в среду Node.js. В основе работы лежит анализ DOM и выполнение набора правил, проверяющих элементы страницы на соответствие критериям доступности.

Установка и подключение

Для Node.js используется пакет axe-core, устанавливаемый через npm:

npm install axe-core

В браузерных проектах библиотека подключается через скрипт:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.3/axe.min.js"></script>

После подключения можно инициировать анализ элементов страницы через метод axe.run(), который принимает два параметра:

  1. context — DOM-элемент или селектор, ограничивающий область проверки.
  2. options — объект с настройками, включая правила, исключения и конфигурацию отчёта.

Пример базового запуска проверки:

axe.run(document, { 
  runOnly: ['wcag2a', 'wcag2aa'] 
}).then(results => {
  console.log(results.violations);
});

Структура результатов

Результаты выполнения проверки формируются в виде объекта с ключевыми полями:

  • violations — массив нарушений, описывающий каждое правило, которое не соблюдается.
  • passes — массив успешно пройденных проверок.
  • incomplete — проверки, которые не удалось полностью выполнить.
  • inapplicable — правила, которые не применяются к текущему DOM.

Каждое нарушение содержит подробную информацию:

  • id — уникальный идентификатор правила.
  • impact — уровень серьёзности (critical, serious, moderate, minor).
  • description — текстовое объяснение проблемы.
  • nodes — список элементов DOM, где обнаружена проблема.

Конфигурация правил и опций

Можно включать или исключать отдельные правила через объект options:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false }
  }
});

Дополнительно возможно ограничить выполнение проверок определёнными стандартами:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'best-practice']
  }
});

Параллельное выполнение тестов

Для больших веб-приложений важно использовать параллельное выполнение проверок. Axe-core позволяет запускать несколько анализов одновременно через Promise API, что ускоряет тестирование страниц с множеством элементов и динамическим контентом.

Пример параллельного запуска:

const contexts = [
  document.querySelector('#header'),
  document.querySelector('#main'),
  document.querySelector('#footer')
];

const axePromises = contexts.map(ctx => axe.run(ctx));

Promise.all(axePromises)
  .then(resultsArray => {
    resultsArray.forEach((result, index) => {
      console.log(`Результаты для контекста ${index}:`, result.violations);
    });
  })
  .catch(err => console.error(err));

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

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

Axe-core легко интегрируется с Jest, Mocha и Cypress для автоматизации тестирования:

  • Jest: использование axe-core вместе с @testing-library/react для проверки компонентов React.
  • Cypress: через cypress-axe обеспечивается проверка доступности во время E2E-тестов.

Пример с Jest:

import { render } from '@testing-library/react';
import axe from 'axe-core';
import MyComponent from './MyComponent';

test('Компонент соответствует стандартам доступности', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});

Работа с динамическим контентом

Для SPA и приложений с динамическими обновлениями DOM важно запускать анализ после полной отрисовки элементов:

function checkAccessibility() {
  return axe.run(document.querySelector('#app'));
}

// Пример использования с MutationObserver
const observer = new MutationObserver(() => {
  checkAccessibility().then(results => {
    console.log(results.violations);
  });
});

observer.observe(document.querySelector('#app'), { childList: true, subtree: true });

Такой подход обеспечивает проверку только актуального контента и предотвращает избыточные вызовы на несуществующие элементы.

Выводы по организации параллельного анализа

  • Использование массивов контекстов и Promise.all позволяет масштабировать тестирование.
  • Ограничение области проверки через селекторы уменьшает время анализа и количество ложных срабатываний.
  • Конфигурация правил через runOnly и rules повышает точность и адаптируемость тестов под конкретные проекты.
  • Интеграция с тестовыми фреймворками обеспечивает постоянный контроль доступности на этапе разработки и CI/CD.

Эффективное использование параллельного выполнения в Axe-core обеспечивает быстрый и надёжный анализ доступности, особенно в больших проектах с множеством интерактивных компонентов и динамически загружаемым контентом.

Оглавление