Стратегии тестирования

Axe-core — это библиотека для автоматического анализа доступности веб-страниц. Она позволяет выявлять нарушения стандартов WCAG (Web Content Accessibility Guidelines) и интегрируется с различными инструментами тестирования, включая браузеры, фреймворки для юнит-тестирования и CI/CD-пайплайны. Основной подход библиотеки заключается в выполнении правил проверки DOM-структуры страницы и генерации подробного отчета о найденных проблемах.

Установка и интеграция

Для использования Axe-core в проекте на JavaScript необходимо установить пакет:

npm install axe-core

Для браузерного окружения подключение можно выполнить через CDN:

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

В Node.js можно использовать модуль напрямую:

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

После подключения библиотеки можно приступать к конфигурированию и запуску проверок.

Конфигурация проверок

Axe-core предоставляет гибкие механизмы настройки правил:

  • Включение или отключение правил:

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

  • Контекст проверки: позволяет ограничить область анализа определёнными элементами DOM:

    const context = {
  include: [['#main-content']],
  exclude: [['.ads']]
};

  • Уровень строгости: можно выбирать приоритетные нарушения (minor, moderate, serious, critical), что удобно при интеграции с автоматическими тестами.

Выполнение тестов

Для браузерного окружения проверки выполняются следующим образом:

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

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

В Node.js проверка через Puppeteer или Playwright выглядит так:

const { chromium } = require('playwright');
const axeCore = require('axe-core');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.addScriptTag({ path: require.resolve('axe-core') });
  const results = await page.evaluate(async () => {
    return await axe.run();
  });
  console.log(results.violations);
  await browser.close();
})();

Анализ результатов

Каждое нарушение в отчете содержит:

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

Стратегии тестирования

  1. Тестирование отдельных компонентов Проверка отдельных React-компонентов или Vue-компонентов перед интеграцией на страницу помогает выявлять проблемы на ранних этапах разработки. Для этого можно использовать axe-core совместно с @testing-library/react или @testing-library/vue:

    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);
});

  2. Сквозное тестирование страниц Использование Puppeteer или Playwright позволяет проводить комплексную проверку всей страницы с динамическим контентом, модальными окнами и интерактивными элементами.

  3. Интеграция в CI/CD Автоматическое выполнение проверок при каждом деплое или PR гарантирует постоянный контроль доступности. Скрипт CI может завершаться с ошибкой, если найдено критическое нарушение, что повышает качество продукта.

  4. Фокус на критических правилах Для больших проектов полезно настраивать фильтрацию по уровню серьезности, чтобы сначала устранять критические и серьезные нарушения, оставляя minor- и moderate-проблемы для последующих итераций.

Практические советы

  • Настройка исключений для динамически генерируемого контента предотвращает ложные срабатывания.
  • Объединение Axe-core с инструментами скриншотного тестирования позволяет отслеживать визуальные нарушения в сочетании с доступностью.
  • Регулярная актуализация правил библиотеки гарантирует соответствие последним стандартам WCAG.

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

Оглавление