Проверка доступности

Puppeteer — это библиотека Node.js для управления браузером Chromium или Chrome через протокол DevTools. Для тестирования доступности сначала необходимо установить Puppeteer: 

npm install puppeteer

После установки создаётся базовый скрипт для запуска браузера и открытия страницы: 

const puppeteer = require(&

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

Опция headless: true позволяет запускать браузер без графического интерфейса, что ускоряет тесты и снижает нагрузку на систему.

Интеграция с Axe для проверки доступности

Для тестирования доступности чаще всего используется библиотека axe-core. Она позволяет выявлять нарушения стандартов WCAG, такие как неправильные атрибуты ARIA, контраст текста, отсутствие альтернативного текста для изображений.

Установка зависимостей: 

npm install axe-core

Импорт и внедрение Axe в страницу Puppeteer: 

const puppeteer = require('puppeteer');
const axeSource = require('axe-core').source;

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

    // Внедрение axe-core на страницу
    await page.evaluate(axeSource);

    // Запуск анализа доступности
    const results = await page.evaluate(async () => {
        return await axe.run();
    });

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

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

  • axeSource содержит исходный код библиотеки, который внедряется на страницу через page.evaluate.
  • Метод axe.run() возвращает объект с массивом нарушений (violations), предупреждений (incomplete) и рекомендаций (passes).

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

Результат работы Axe можно фильтровать по типу нарушений или по критичности: 

results.violations.forEach(violation => {
    console.log(`Нарушение: ${violation.id}`);
    console.log(`Описание: ${violation.description}`);
    console.log(`Элементы:`);
    violation.nodes.forEach(node => {
        console.log(`  ${node.html}`);
        console.log(`  Исправление: ${node.failureSummary}`);
    });
});

Рекомендации по работе с результатами:

  • Использовать id для быстрого поиска и группировки схожих ошибок.
  • failureSummary часто содержит конкретные шаги по исправлению.
  • Автоматическое логирование всех нарушений помогает в интеграции с CI/CD.

Проверка конкретных элементов

Puppeteer позволяет проверять доступность отдельных элементов страницы, а не только всего DOM. Например, проверка кнопки: 

const buttonSelector = '#submit-button';
const buttonViolations = await page.evaluate(async (selector) => {
    const element = document.querySelector(selector);
    return await axe.run(element);
}, buttonSelector);

console.log(buttonViolations.violations);

Это полезно для модульного тестирования, когда страницы содержат сложные компоненты.

Настройка Axe под требования проекта

Axe позволяет конфигурировать правила, отключать или включать проверки: 

const config = {
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: false } // отключаем проверку альтернативного текста
    }
};

const results = await page.evaluate(async (config) => {
    return await axe.run(document, config);
}, config);

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

  • Игнорировать известные исключения.
  • Сосредоточиться на критичных для проекта правилах WCAG.
  • Повысить скорость тестирования за счёт отключения ненужных проверок.

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

Автоматизация проверок доступности в пайплайнах GitLab, GitHub Actions или Jenkins выполняется через Node.js скрипты. Пример проверки при сборке проекта: 

node accessibility-check.js

Результаты можно парсить и конвертировать в отчёты в формате JSON, HTML или Markdown для удобного отображения в CI/CD.

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

  • Запускать тесты на нескольких разрешениях экрана и браузерах для выявления адаптивных проблем доступности.
  • Сохранять скриншоты нарушений с помощью Puppeteer: 
await page.screenshot({ path: 'screenshot.png', fullPage: true });
  • Использовать селекторы для проверки конкретных интерактивных элементов (кнопки, ссылки, формы).
  • Постоянно обновлять версию axe-core, чтобы тесты соответствовали актуальным стандартам WCAG.

Работа с динамическим контентом

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

await page.waitForSelector('#main-content', { visible: true });
const results = await page.evaluate(async () => await axe.run());

Опция waitForSelector гарантирует, что анализ не выполнится до появления всех элементов на странице. Это особенно важно для модальных окон, выпадающих списков и интерактивных виджетов.

Дополнительные возможности Puppeteer в тестировании доступности

  • Скроллинг до элемента и проверка видимости: 
await page.$eval('#element', el => el.scrollIntoView());
  • Проверка состояния фокуса и навигации с клавиатуры: 
await page.keyboard.press('Tab');
const focusedElement = await page.evaluate(() => document.activeElement.id);
console.log(focusedElement);
  • Сбор аудита для нескольких страниц с использованием циклов и асинхронных вызовов: 
const urls = ['https://example.com', 'https://example.com/about'];
for (const url of urls) {
    await page.goto(url);
    const results = await page.evaluate(async () => await axe.run());
    console.log(`${url}: ${results.violations.length} нарушений`);
}

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

Оглавление