Selenium WebDriver

Axe-core — это библиотека для автоматизированного тестирования доступности веб-приложений, разработанная компанией Deque Systems. Она предоставляет инструменты для выявления проблем с доступностью (accessibility) на страницах, соответствующих стандартам WCAG, ARIA и другим нормативам. Библиотека написана на JavaScript и может работать в браузере, в Node.js и в связке с тестовыми фреймворками, такими как Selenium WebDriver.

Установка и подключение

Для работы с Axe-core в среде Node.js используется пакет axe-core через npm:

npm install axe-core

Подключение к тестовому коду в Node.js осуществляется стандартным require:

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

Для интеграции с браузером через Selenium WebDriver можно использовать axe.min.js, который внедряется на тестируемую страницу:

const fs = require('fs');
const { Builder, By } = require('selenium-webdriver');

(async function testAccessibility() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('https://example.com');
        const axeSource = fs.readFileSync('node_modules/axe-core/axe.min.js', 'utf8');
        await driver.executeScript(axeSource);
        const results = await driver.executeAsyncScript(function(callback) {
            axe.run(function(err, results) {
                if (err) throw err;
                callback(results);
            });
        });
        console.log(results.violations);
    } finally {
        await driver.quit();
    }
})();

Структура отчётов

Результаты сканирования Axe-core содержат несколько ключевых разделов:

  • violations — найденные нарушения стандартов доступности. Каждое нарушение включает:

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

  • passes — элементы, которые соответствуют стандартам.

  • incomplete — проверки, которые не удалось полностью выполнить.

  • inapplicable — проверки, которые не применимы к текущему DOM.

Пример анализа одного нарушения:

{
  "id": "color-contrast",
  "impact": "serious",
  "description": "Элементы с недостаточной контрастностью текста",
  "nodes": [
    {
      "html": "<p style='color:#aaa;'>Text</p>",
      "target": ["p"],
      "failureSummary": "Контраст текста с фоном недостаточен"
    }
  ]
}

Настройка и фильтрация проверок

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

const options = {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    },
    rules: {
        'color-contrast': { enabled: true },
        'label': { enabled: false }
    }
};

const results = await driver.executeAsyncScript(function(options, callback) {
    axe.run(document, options, function(err, results) {
        if (err) throw err;
        callback(results);
    });
}, options);
  • runOnly.type = “tag” позволяет запускать проверку только для определённых категорий стандартов WCAG.
  • rules позволяет индивидуально включать или отключать правила.

Интеграция с Selenium WebDriver

Для проведения комплексного тестирования доступности Axe-core идеально сочетается с Selenium. Основные этапы интеграции:

  1. Загрузка страницы через WebDriver.
  2. Внедрение axe.min.js с помощью executeScript.
  3. Запуск анализа через executeAsyncScript.
  4. Обработка результатов: фильтрация по impact, логирование нарушений, генерация отчётов.

Пример функции для повторного использования:

async function analyzeAccessibility(driver) {
    const axeSource = fs.readFileSync('node_modules/axe-core/axe.min.js', 'utf8');
    await driver.executeScript(axeSource);
    return await driver.executeAsyncScript(function(callback) {
        axe.run(document, { runOnly: { type: 'tag', values: ['wcag2aa'] } }, function(err, results) {
            if (err) throw err;
            callback(results);
        });
    });
}

Продвинутые возможности

  • Проверка отдельных элементов: можно передавать селектор в axe.run вместо всего документа, что ускоряет тестирование и повышает точность.
axe.run(document.querySelector('#main-content'), {}, callback);
  • Снижение ложных срабатываний: настройка rules и tags позволяет исключать элементы, которые намеренно не соответствуют некоторым стандартам.
  • Автоматическая генерация отчётов: результаты можно конвертировать в HTML, JSON или интегрировать в CI/CD для анализа доступности на этапе сборки.

Best Practices

  • Всегда выполнять проверку доступности на этапах разработки и тестирования, чтобы минимизировать стоимость исправления ошибок.
  • Комбинировать ручное тестирование с Axe-core, так как библиотека не способна полностью эмулировать опыт пользователей с ограничениями.
  • Интегрировать Axe-core с CI/CD: запуск сканирования на каждом pull request позволяет выявлять нарушения раньше и предотвратить деградацию доступности.
  • Логировать не только количество нарушений, но и их тип и локализацию, чтобы разработчики могли оперативно исправлять конкретные элементы DOM.

Axe-core в связке с Selenium WebDriver предоставляет мощный инструмент для автоматизированного контроля доступности, позволяя создавать веб-приложения, соответствующие современным стандартам WCAG и улучшая опыт пользователей с ограничениями.

Оглавление