Кастомные репортеры

Библиотека Axe-core предоставляет мощный API для тестирования доступности веб-приложений. Одним из ключевых механизмов расширения функционала является создание кастомных репортеров. Репортеры отвечают за обработку результатов аудита, их фильтрацию, форматирование и вывод в нужный формат: консоль, файлы, базы данных или сторонние сервисы.

По умолчанию Axe-core использует встроенный репортер, выводящий результаты в консоль браузера. Кастомизация позволяет интегрировать библиотеку в сложные пайплайны тестирования и создавать специализированные отчёты.

Структура кастомного репортера

Репортер — это объект с функцией report(results), где results — результат анализа доступности, содержащий массивы violations, incomplete, passes и inapplicable.

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

const myCustomReporter = {
  report: (results) => {
    results.violations.forEach(violation => {
      console.log(`Ошибка доступности: ${violation.id}`);
      console.log(`Описание: ${violation.description}`);
      console.log(`Элементы:`, violation.nodes.map(node => node.html));
    });
  }
};

Здесь results.violations содержит объекты с ключевыми свойствами:

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

Подключение кастомного репортера

Для интеграции кастомного репортера используется метод axe.run() с передачей функции reporter:

import axe from 'axe-core';

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  myCustomReporter.report(results);
});

Важный момент: кастомный репортер не изменяет сам процесс анализа. Он только получает итоговый объект с результатами.

Форматирование и фильтрация результатов

Кастомные репортеры часто используют фильтрацию по уровню серьёзности или по типу элемента:

const criticalReporter = {
  report: (results) => {
    const criticalViolations = results.violations.filter(v => v.impact === 'critical');
    criticalViolations.forEach(v => {
      console.log(`Критическая ошибка: ${v.id}`);
      v.nodes.forEach(node => console.log(node.html));
    });
  }
};

Дополнительно можно формировать JSON-отчёты или экспортировать результаты в базы данных:

const fs = require('fs');

const jsonReporter = {
  report: (results) => {
    const json = JSON.stringify(results, null, 2);
    fs.writeFileSync('axe-results.json', json);
  }
};

Асинхронные кастомные репортеры

Axe-core поддерживает асинхронные репортеры для интеграции с сетевыми запросами, CI/CD пайплайнами и внешними сервисами:

const asyncReporter = {
  report: async (results) => {
    await fetch('https://api.example.com/axe-results', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(results)
    });
  }
};

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

Комбинирование нескольких репортеров

В крупных проектах иногда требуется вывод в несколько форматов одновременно (например, консоль + файл + CI):

const combinedReporter = {
  report: (results) => {
    consoleReporter.report(results);
    fileReporter.report(results);
  }
};

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

Создание адаптивных репортеров

Кастомные репортеры могут адаптироваться под разные контексты:

Игнорирование определённых элементов или страниц;
Группировка ошибок по компонентам или страницам;
Формирование статистики по типам нарушений и их количеству.

Пример группировки по компонентам:

const componentReporter = {
  report: (results) => {
    const grouped = results.violations.reduce((acc, v) => {
      v.nodes.forEach(node => {
        const component = node.target[0].split(' ')[0]; // простой пример группировки по селектору
        if (!acc[component]) acc[component] = [];
        acc[component].push(v.id);
      });
      return acc;
    }, {});
    console.log(grouped);
  }
};