Логирование ошибок

Библиотека Axe-core предназначена для автоматического тестирования доступности веб-приложений и выявления нарушений стандартов WCAG (Web Content Accessibility Guidelines). Основной механизм работы библиотеки заключается в анализе DOM-дерева страницы и выявлении потенциальных проблем с доступностью. Эффективное логирование ошибок играет ключевую роль для интеграции Axe-core в процесс разработки и тестирования.

Основы работы с результатами проверок

При запуске теста Axe-core возвращает объект с результатами, содержащий несколько ключевых полей:

  • violations – массив выявленных нарушений доступности. Каждый объект описывает конкретную ошибку, её id, уровень серьёзности (impact), селекторы элементов и рекомендации по исправлению.
  • incomplete – ошибки, проверка которых не может быть полностью завершена автоматически. Эти элементы требуют ручного анализа.
  • passes – успешные проверки, элементы, которые полностью соответствуют правилам.
  • inapplicable – правила, которые не применимы к текущей структуре DOM.

Пример базового вызова метода:

import axe from 'axe-core';

axe.run(document, {}, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

Форматирование и структурирование логов

Прямое логирование массива violations в консоль может быть недостаточно информативным. Для удобства анализа рекомендуется структурировать вывод:

  1. Группировка по severity (impact):
const groupedViolations = results.violations.reduce((acc, violation) => {
    const { impact } = violation;
    if (!acc[impact]) acc[impact] = [];
    acc[impact].push(violation);
    return acc;
}, {});
console.log(groupedViolations);
  1. Выделение целевых элементов и сообщений:

Каждая ошибка содержит массив nodes, описывающий конкретные элементы:

results.violations.forEach(v => {
    console.log(`Ошибка: ${v.id} (Impact: ${v.impact})`);
    v.nodes.forEach(node => {
        console.log(`  Элемент: ${node.target.join(', ')}`);
        console.log(`  Сообщение: ${node.failureSummary}`);
    });
});

Такой подход позволяет сразу видеть, где именно в DOM возникает проблема и какие рекомендации предоставляет Axe-core.

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

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

const fs = require('fs');

axe.run(document, {}, (err, results) => {
    if (err) throw err;
    fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));
});

Сохранённый JSON можно использовать для:

  • построения графиков и отчетов о доступности;
  • уведомления команды разработки о новых нарушениях;
  • отслеживания динамики исправления ошибок со временем.

Фильтрация и приоритизация

Не все нарушения требуют одинакового внимания. Axe-core предоставляет поле impact, которое может принимать значения: minor, moderate, serious, critical. Для логирования имеет смысл фильтровать ошибки по уровню серьёзности:

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

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

Пользовательские форматы логирования

В крупных проектах удобно создавать собственные форматы логов. Например, можно формировать отчёты в виде таблиц Markdown:

let report = '| Элемент | Ошибка | Уровень |\n|---------|--------|--------|\n';
results.violations.forEach(v => {
    v.nodes.forEach(node => {
        report += `| ${node.target.join(', ')} | ${v.help} | ${v.impact} |\n`;
    });
});
fs.writeFileSync('axe-report.md', report);

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

Автоматическое уведомление о нарушениях

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

  • через email-рассылку;
  • интеграцию с системами управления задачами (Jira, Trello);
  • вывод сообщений в консоль сборочного сервера при критических ошибках:
if (criticalViolations.length > 0) {
    console.error('Найдены критические ошибки доступности:');
    criticalViolations.forEach(v => console.error(`- ${v.id}: ${v.help}`));
    process.exit(1); // остановка CI при критических нарушениях
}

Логирование динамических изменений

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

document.querySelector('#loadButton').addEventListener('click', () => {
    axe.run(document, {}, (err, results) => {
        if (err) throw err;
        console.log('Ошибки после загрузки:', results.violations);
    });
});

Это позволяет фиксировать доступность на каждом этапе взаимодействия пользователя с интерфейсом.

Вывод

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

Оглавление