Playwright

Axe-core — это мощная библиотека для автоматизированного тестирования доступности веб-приложений. Она позволяет выявлять проблемы с доступностью (a11y) на уровне DOM, поддерживает интеграцию с различными инструментами тестирования и подходит для работы как в браузере, так и в среде Node.js.

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

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

npm install axe-core --save-dev

В браузерных сценариях библиотека подключается через <script> или с помощью bundler’ов:

import axe from 'axe-core';

Важный момент: Axe-core не запускается сам по себе на сервере без DOM, поэтому для Node.js чаще используют связку с jsdom или тестовыми фреймворками, поддерживающими эмуляцию DOM, например Playwright или Puppeteer.

Инициализация и базовое сканирование

Основной метод для запуска сканирования — axe.run. Он принимает DOM-узел и объект с настройками:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
}).then(results => {
  console.log(results.violations);
});

Ключевые моменты:

  • runOnly — ограничивает набор правил по тегам, стандартам или конкретным правилам.
  • rules — позволяет включать или отключать отдельные проверки.
  • Результат содержит массив violations, описывающий найденные проблемы, их местоположение в DOM, уровень серьезности и рекомендации.

Интеграция с Playwright

Axe-core часто используется вместе с Playwright для интеграционного тестирования. Сценарий типичного теста:

import { test, expect } from '@playwright/test';
import axe from 'axe-core';

test('Проверка доступности страницы', async ({ page }) => {
  await page.goto('https://example.com');

  // Вставка axe-core в браузерную страницу
  await page.addScriptTag({ path: require.resolve('axe-core/axe.min.js') });

  // Выполнение сканирования в контексте страницы
  const violations = await page.evaluate(async () => {
    return await axe.run(document, {
      runOnly: { type: 'tag', values: ['wcag2aa'] }
    });
  });

  console.log(violations.violations);
  expect(violations.violations.length).toBe(0);
});

Особенности интеграции:

  • page.addScriptTag загружает axe-core в контекст страницы, что позволяет работать с реальным DOM.
  • page.evaluate выполняет функцию в браузере, возвращая результаты обратно в Node.js.
  • Позволяет использовать стандартные методы Playwright для навигации, кликов и заполнения форм перед проверкой доступности.

Настройка правил и тегов

Axe-core включает сотни правил, сгруппированных по тегам WCAG. Основные параметры конфигурации:

  • rules — объект, где ключи — имена правил, а значения — настройки. Пример: отключение проверки контраста:
rules: { 'color-contrast': { enabled: false } }
  • runOnly — можно указать набор тегов (wcag2a, wcag2aa, wcag21aa) или конкретных правил:
runOnly: { type: 'rule', values: ['image-alt', 'label'] }
  • resultTypes — позволяет фильтровать типы результатов: violations, incomplete, passes, inapplicable.

Обработка результатов

Объект violations содержит ключевые поля:

  • id — идентификатор правила.
  • impact — уровень серьезности (critical, serious, moderate, minor).
  • description — краткое описание проблемы.
  • help — ссылка на руководство по исправлению.
  • nodes — массив DOM-элементов с проблемой, содержащий CSS-селекторы и HTML.

Пример обработки:

violations.violations.forEach(v => {
  console.log(`Проблема: ${v.description} (уровень: ${v.impact})`);
  v.nodes.forEach(node => {
    console.log(`  Элемент: ${node.html}`);
  });
});

Использование Axe-core для CI/CD

Axe-core хорошо интегрируется с CI/CD:

  • В качестве шага тестирования доступности можно запускать скрипты на Playwright.
  • Автоматическая генерация отчетов о нарушениях доступности.
  • Возможность fail-fast: остановка сборки при обнаружении критических проблем.

Пример конфигурации в GitHub Actions:

- name: Run Playwright accessibility tests
  run: npx playwright test --project=chromium

Расширенные возможности

  • Встраивание кастомных правил: можно добавлять свои проверки через API Axe-core.
  • Контекстные проверки: запуск только на определённых частях DOM.
  • Интеграция с Jest: использование jest-axe для unit-тестирования компонентов React/Vue.

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

Оглавление