Параметр reporter

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

Основные типы reporter

Параметр reporter задается при вызове метода axe.run() или при использовании командной строки, если применяется библиотека через Node.js. Он принимает строковое значение, определяющее формат отчета. В стандартной поставке Axe-core поддерживаются следующие типы:

  • v2 Стандартный JSON-формат версии 2. Содержит подробную структуру результатов, включая сведения о правилах, нарушениях, предупреждениях и информации о тестируемых элементах. Пример структуры:

    {
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": ["wcag2aa", "wcag143"],
      "description": "Текст должен иметь достаточный контраст с фоном",
      "nodes": [
        {
          "html": "<p style='color:#777;'>Пример текста</p>",
          "target": ["p"],
          "failureSummary": "Контраст недостаточен..."
        }
      ]
    }
  ]
}

  • v1 Более старый формат JSON, совместимый с предыдущими версиями Axe. Отличается меньшей структурной детализацией. Используется при интеграции со старыми инструментами автоматизации.

  • html Генерация отчета в виде HTML-страницы. Позволяет быстро визуализировать нарушения и предупреждения в браузере без дополнительной обработки. Поддерживает цветовое выделение уровней нарушений (critical, serious, moderate, minor) и навигацию по DOM.

  • csv Формат для интеграции с аналитическими системами. Каждая строка представляет отдельное нарушение или узел, содержащий информацию о id правила, уровне влияния и селекторах элементов. Удобно использовать для массовой обработки и построения графиков доступности.

  • json Универсальный формат JSON, предоставляющий полную информацию о проверке. Отличается от v2 более гибкой структурой, которую можно модифицировать под нужды конкретного проекта.

Использование параметра reporter в коде

При запуске анализа через Jav * aScript:

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

axe.run(document, {
  runOnly: ['wcag2aa'],
  reporter: 'v2'
}).then(results => {
  console.log(JSON.stringify(results, null, 2));
});

В данном примере результаты будут сформированы в формате v2, что удобно для последующей интеграции в CI/CD или системы логирования.

Особенности настройки

  1. Множественные форматы Axe-core позволяет одновременно использовать несколько форматов через массив:

    axe.run(document, {
  reporter: ['v2', 'html']
});

    В этом случае библиотека вернет результаты в формате JSON и сгенерирует HTML-отчет.

  2. Совместимость с Node.js В серверных сценариях параметр reporter позволяет направлять результаты проверки в файлы или консоль:

    const fs = require('fs');

axe.run(document, { reporter: 'html' }).then(results => {
  fs.writeFileSync('axe-report.html', results);
});

  3. Пользовательские репортеры Axe-core поддерживает создание своих репортеров. Для этого достаточно определить функцию, принимающую объект результатов и возвращающую произвольное представление:

    const customReporter = results => {
  return results.violations.map(v => v.id).join(', ');
};

axe.run(document, { reporter: customReporter }).then(console.log);

Практические рекомендации

  • Для интеграции в автоматизированное тестирование лучше использовать v2 или json, так как они содержат полную информацию о нарушениях.
  • Для ручного аудита или презентации результатов удобен html, так как визуализация ускоряет анализ и позволяет быстро находить проблемные элементы.
  • При работе с аналитикой или построении отчетов за большой период эффективен csv, так как его легко обрабатывать в таблицах и BI-системах.

Структура результата по reporter

Независимо от выбранного формата, результат содержит основные ключи:

  • violations — список нарушений доступности;
  • incomplete — элементы, которые не удалось полностью проверить;
  • passes — элементы, прошедшие проверки;
  • inapplicable — элементы, к которым проверка неприменима.

Каждый элемент violations включает:

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

Итоговая роль reporter

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

Использование разных форматов в зависимости от контекста повышает эффективность анализа и упрощает обработку результатов в командах разработки и QA.

Оглавление