Окружение-специфичные настройки

Библиотека axe-core является мощным инструментом для автоматизированного тестирования доступности веб-приложений. Для интеграции в сложные проекты и оптимизации тестов часто требуется настройка поведения библиотеки под конкретное окружение — будь то браузер, Node.js или специфическая тестовая среда.

Конфигурация через axe.configure()

Метод axe.configure() позволяет определить глобальные правила поведения библиотеки. В параметрах конфигурации можно указать:

  • rules – набор правил, которые будут включены или отключены. Например, для тестов на staging-сервере можно отключить проверки, которые не актуальны для временного контента:
axe.configure({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'label', enabled: false }
  ]
});

  • checks – более низкоуровневая настройка проверки элементов DOM, полезная при интеграции с кастомными компонентами, которые могут использовать нестандартные атрибуты.

  • reporter – определяет способ вывода результатов (например, в консоль, JSON или в сторонние системы логирования).

Настройка под браузерное окружение

При использовании axe-core в браузере важны следующие аспекты:

  1. Асинхронная инициализация. Скрипт может быть загружен динамически, поэтому вызовы axe.run() рекомендуется оборачивать в промис:
import axe from 'axe-core';

document.addEventListener('DOMContentLoaded', async () => {
  const results = await axe.run(document, {
    runOnly: {
      type: 'tag',
      values: ['wcag2a', 'wcag2aa']
    }
  });
  console.log(results.violations);
});
  1. Фильтрация элементов. Через include и exclude можно определить конкретные области страницы для проверки, что ускоряет тестирование и исключает динамический контент, например, рекламные блоки:
axe.run({
  include: [['#main-content']],
  exclude: [['.ad-banner']]
});
  1. Модули браузерных расширений. В окружении браузера возможна интеграция с DevTools или тестовыми фреймворками (Cypress, Selenium), где axe может запускаться через API плагина, сохраняя конфигурацию окружения.

Настройка под Node.js

Для серверной автоматизации тестирования axe-core предоставляет возможность использовать jsdom или Puppeteer:

  • jsdom позволяет создать виртуальный DOM:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const axe = require('axe-core');

const dom = new JSDOM('<!DOCTYPE html><html><body><button>Click</button></body></html>');
const results = axe.run(dom.window.document);
  • Puppeteer обеспечивает работу с реальными страницами, эмулируя браузерное окружение. Важно корректно передавать настройки:
const puppeteer = require('puppeteer');
const axeCore = require('axe-core');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
  await page.addScriptTag({ path: require.resolve('axe-core') });

  const results = await page.evaluate(async () => {
    return await axe.run({
      runOnly: {
        type: 'tag',
        values: ['wcag2aa']
      }
    });
  });

  console.log(results.violations);
  await browser.close();
})();

Динамическая настройка правил

Для разных окружений можно определить отдельные профили правил. Например, для development-сервера включить все проверки, а для production — только критичные:

const environment = process.env.NODE_ENV;

const config = {
  rules: environment === 'production'
    ? [{ id: 'color-contrast', enabled: true }]
    : [{ id: 'color-contrast', enabled: true }, { id: 'label', enabled: true }]
};

axe.configure(config);

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

Локализация сообщений

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

axe.configure({
  locale: {
    'color-contrast': {
      description: 'Контраст текста и фона недостаточен',
      help: 'Увеличить контраст текста на странице'
    }
  }
});

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

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

axe.run(document).then(results => {
  const fs = require('fs');
  fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));
});

Комбинация профилей правил, фильтрации элементов и форматов вывода обеспечивает гибкое управление тестами доступности под конкретное окружение.

Использование тегов и категорий

Для удобного разделения правил по критичности применяются теги (tags). Это позволяет запускать только нужные проверки в разных окружениях:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
});
  • wcag2a — минимальный уровень соответствия стандартам WCAG.
  • wcag2aa — расширенный уровень, критичный для большинства приложений.

Совмещение с кастомными правилами

В сложных проектах нередко требуется добавить собственные проверки. axe-core поддерживает регистрацию кастомных правил через axe.registerRule():

axe.registerRule({
  id: 'custom-button-label',
  selector: 'button',
  evaluate: node => node.textContent.trim() !== '',
  enabled: true
});

Эти правила автоматически учитываются в глобальной конфигурации и могут быть активированы только в определённых окружениях.

Этот набор инструментов и методов позволяет строить гибкую, масштабируемую архитектуру тестирования доступности, адаптированную под особенности конкретного окружения и стадии разработки приложения.

Оглавление