Jenkins

Axe-core — это мощная библиотека для автоматизированного тестирования доступности веб-приложений. Она реализует рекомендации WCAG (Web Content Accessibility Guidelines) и позволяет выявлять проблемы доступности на страницах и в компонентах веб-приложений. Библиотека написана на JavaScript и может использоваться как в браузере, так и в среде Node.js.

Установка и интеграция

Для использования в проекте на Node.js или с тестовыми фреймворками, Axe-core устанавливается через npm:

npm install axe-core

Для фронтенд-тестов можно подключить скрипт напрямую:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.7.3/axe.min.js"></script>

После подключения библиотека доступна через глобальный объект axe в браузере или через импорт в Node.js:

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

Основные методы

axe.run()

Главный метод для проверки доступности. Возвращает объект с результатами аудита:

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

Параметры метода:

  1. context — область проверки (например, document, CSS-селектор или элемент DOM).
  2. options — настройки правил, исключений, тегов.
  3. callback — функция обратного вызова с ошибкой и результатами аудита.

axe.configure()

Позволяет настраивать правила, активировать или деактивировать конкретные проверки:

axe.configure({
    rules: [
        { id: 'color-contrast', enabled: true },
        { id: 'image-alt', enabled: false }
    ],
    checks: [],
    reporter: 'v2'
});
  • rules — включение/отключение определённых правил.
  • checks — расширенные настройки проверок.
  • reporter — формат отчёта.

Результаты аудита

Метод axe.run() возвращает объект с ключевыми полями:

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

Пример обработки нарушений:

results.violations.forEach(v => {
    console.log(`Нарушение: ${v.id}`);
    console.log(`Описание: ${v.description}`);
    v.nodes.forEach(node => {
        console.log(`Элемент: ${node.html}`);
        console.log(`Рекомендации: ${node.failureSummary}`);
    });
});

Настройка правил и тегов

Axe-core позволяет группировать проверки с помощью тегов:

  • wcag2a, wcag2aa, wcag21aa — соответствие разным уровням WCAG.
  • section508 — проверка на соответствие стандарту Section 508.

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

axe.run(document, { runOnly: { type: 'tag', values: ['wcag2aa'] } }, callback);

Интеграция с тестовыми фреймворками

Cypress

import 'cypress-axe';

cy.visit('/page');
cy.injectAxe();
cy.checkA11y();
  • cy.injectAxe() — внедряет Axe-core в DOM страницы.
  • cy.checkA11y() — выполняет проверку доступности и выводит отчёт.

Jest + Puppeteer

const { axe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

const html = await page.content();
const results = await axe(html);
expect(results).toHaveNoViolations();

Практические советы

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

Интеграция с Jenkins

Axe-core легко интегрируется в Jenkins через скрипты Node.js или фреймворки вроде Cypress. Для этого:

  1. Установить зависимости через npm install.
  2. Настроить тесты доступности как отдельный этап pipeline.
  3. Использовать console.log или отчёты в формате JSON для публикации результатов в Jenkins.

Пример pipeline-скрипта:

pipeline {
    agent any
    stages {
        stage('Accessibility Test') {
            steps {
                sh 'npm install'
                sh 'npx cypress run'
            }
        }
    }
}

Отчёты можно сохранять как артефакты Jenkins для анализа нарушений доступности по каждому билду.

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

  • Создание кастомных правил — Axe-core позволяет добавлять собственные проверки через API axe.addRule().
  • Асинхронные проверки — можно проверять элементы динамически добавляемого DOM.
  • Интеграция с визуальными тестами — комбинировать с Puppeteer или Playwright для комплексного тестирования интерфейсов.

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

Оглавление