JSON reporter

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

Основные возможности JSON reporter

  1. Структурированные результаты JSON reporter возвращает результаты тестирования в виде объекта с несколькими ключевыми полями:

    • violations — список всех найденных нарушений доступности.
    • incomplete — проверки, которые не были выполнены полностью из-за ограничения среды.
    • passes — тесты, успешно пройденные элементами страницы.
    • inapplicable — правила, которые не применимы к текущей странице или элементу.

  2. Подробная информация о нарушениях Каждое нарушение содержит следующие поля:

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

  3. Гибкость интеграции JSON формат позволяет:

    • Легко интегрировать результаты с CI/CD системами, такими как Jenkins, GitLab CI или GitHub Actions.
    • Сохранять отчеты для исторической аналитики и отслеживания прогресса.
    • Программно фильтровать нарушения по степени критичности или типу правила.

Использование JSON reporter

Для запуска Axe-core с JSON output используется API axe.run() и дополнительная обработка результатов:

const axe = require('axe-core');
const { JSDOM } = require('jsdom');

const dom = new JSDOM(`<html><body><button>Click</button></body></html>`);
const { window } = dom;

axe.run(window.document).then(results => {
    const jsonReport = JSON.stringify(results, null, 2);
    console.log(jsonReport);
});

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

  • JSON.stringify(results, null, 2) — форматирование с отступами для удобного чтения.
  • results содержит все разделы (violations, passes, incomplete, inapplicable), что делает возможным детальный анализ каждого элемента.

Структура отчета JSON

Пример упрощенной структуры отчета:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Элемент имеет недостаточный контраст",
      "help": "Использовать цвета с более высоким контрастом",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.4/color-contrast",
      "nodes": [
        {
          "html": "<button style=\"color: #aaa; background: #fff\">Click</button>",
          "target": ["button"],
          "failureSummary": "Контраст между цветом текста и фоном недостаточен"
        }
      ]
    }
  ],
  "passes": [],
  "incomplete": [],
  "inapplicable": []
}

Фильтрация и обработка результатов

JSON reporter позволяет программно фильтровать результаты. Например, можно получить только критические нарушения:

const criticalViolations = results.violations.filter(v => v.impact === 'critical');
criticalViolations.forEach(v => {
    console.log(`${v.id}: ${v.description}`);
});

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

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

JSON отчеты удобно использовать совместно с различными инструментами:

  • Jenkins: сохранение отчета как артефакта и последующая генерация графиков.
  • GitHub Actions: автоматическое добавление комментариев к pull request с найденными нарушениями.
  • Custom Dashboards: сбор данных из нескольких запусков и визуализация статистики доступности.

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

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

  1. Настройка уровней серьезности Можно запускать Axe с фильтрацией по impact, чтобы учитывать только серьёзные или критические нарушения.

  2. Сбор метаданных страницы В JSON отчете можно добавлять дополнительные поля, например URL страницы, имя теста, timestamp, что полезно для аналитики.

  3. Объединение нескольких отчетов JSON позволяет объединять результаты с разных страниц или компонентов, формируя единый массив violations для комплексной проверки всего приложения.

JSON reporter является центральным инструментом при автоматизации тестирования доступности, обеспечивая структурированные, машиночитаемые данные, готовые для анализа, интеграции и визуализации. Его возможности позволяют не только выявлять нарушения, но и системно управлять качеством доступности веб-приложений на всех этапах разработки.

Оглавление