Воспроизведение ошибок

Библиотека Axe-core является мощным инструментом для автоматизированного тестирования доступности веб-приложений. Она позволяет выявлять проблемы с доступностью, анализировать HTML-структуру и предоставлять детальные отчёты о нарушениях стандартов WCAG. Для начала работы необходимо установить библиотеку через npm:

npm install axe-core

После установки библиотеку можно подключать в браузерных тестах или интегрировать с инструментами типа Jest, Cypress или Puppeteer.

Инициализация и запуск проверки

Для запуска анализа достаточно подключить Axe-core к DOM-дереву страницы и вызвать метод run.

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

axe.run(document, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    },
    resultTypes: ['violations', 'incomplete', 'passes']
}, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

Ключевые параметры:

  • runOnly – ограничение набора правил (только WCAG 2.1 A/AA, только конкретные категории).
  • resultTypes – указывает, какие результаты нужно вернуть: нарушения (violations), частично выполненные проверки (incomplete) и успешные проверки (passes).

Анализ результатов

Объект results содержит массивы violations, где каждая запись описывает конкретное нарушение:

  • id – уникальный идентификатор правила.
  • impact – уровень критичности (minor, moderate, serious, critical).
  • description – текстовое описание ошибки.
  • help – рекомендации по исправлению.
  • nodes – список DOM-элементов, где обнаружена проблема, с указанием точного пути и HTML-содержимого.

Пример анализа одной ошибки:

results.violations.forEach(violation => {
    console.log(`Правило: ${violation.id}`);
    console.log(`Уровень критичности: ${violation.impact}`);
    violation.nodes.forEach(node => {
        console.log(`Элемент: ${node.html}`);
        console.log(`CSS-селектор: ${node.target.join(', ')}`);
    });
});

Воспроизведение ошибок на практике

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

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

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Внедрение axe-core на страницу
    await page.addScriptTag({ path: require.resolve('axe-core') });
    const results = await page.evaluate(async () => {
        return await axe.run();
    });

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

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

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

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

axe.run(document, {
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: false }
    }
});

Можно отключать правила, которые не актуальны для проекта, или включать только те, которые имеют критическое значение. Также поддерживается пользовательская конфигурация тегов, позволяющая запускать проверки только для определённых блоков страницы:

axe.run(document.querySelector('#main-content'), {
    runOnly: {
        type: 'tag',
        values: ['wcag2aa']
    }
});

Логирование и интеграция с CI/CD

Результаты Axe-core удобно интегрировать в автоматические тесты и пайплайны CI/CD. Например, с Jest можно добавить кастомный тест:

test('Проверка доступности страницы', async () => {
    const results = await axe.run(document);
    expect(results.violations.length).toBe(0);
});

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

Воспроизведение сложных сценариев

Для сложных страниц с динамическим контентом важно вызывать axe.run после полной загрузки DOM и всех асинхронных элементов. Использование MutationObserver или ожиданий в тестах позволяет фиксировать ошибки, которые проявляются только при определённых условиях:

const observer = new MutationObserver(async () => {
    const results = await axe.run(document);
    console.log(results.violations);
});
observer.observe(document.body, { childList: true, subtree: true });

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

Дополнительные возможности

  • Custom rules – создание собственных правил проверки.
  • Contextual selectors – анализ конкретных частей страницы.
  • Logging to files – экспорт результатов в JSON или HTML для последующего анализа.

Эти функции делают Axe-core универсальным инструментом не только для быстрого выявления ошибок, но и для постоянного мониторинга доступности веб-приложений.

Оглавление