Jasmine

Axe-core — это мощная библиотека для автоматического тестирования доступности веб-приложений, написанная на JavaScript. Она интегрируется с различными средами тестирования, включая браузерные тесты и фреймворки типа Jasmine, и позволяет выявлять проблемы соответствия стандартам WCAG 2.1 и Section 508.

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

Для работы с Axe-core в среде Jasmine используется пакет axe-core, который можно установить через npm:

npm install axe-core --save-dev

После установки библиотеку подключают в тестовом файле:

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

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

import axe from 'axe-core';

Основные концепции

Axe-core работает на основе правил (rules), которые описывают конкретные проверки доступности. Каждое правило включает:

  • id — уникальный идентификатор правила.
  • impact — уровень важности (minor, moderate, serious, critical).
  • description — краткое описание проблемы.
  • help — пояснение и рекомендации по исправлению.

Инициализация и запуск анализа

Для анализа DOM используется метод axe.run, который принимает два параметра:

  1. Элемент или селектор — узел DOM, который необходимо проверить.
  2. Опции — настройки запуска, включая фильтры правил и исключения.

Пример базового запуска в Jasmine:

describe('Accessibility tests', () => {
  it('should have no accessibility violations', async () => {
    const results = await axe.run(document.body);
    expect(results.violations.length).toBe(0);
  });
});

В этом примере axe-core анализирует весь document.body и возвращает массив violations — найденных нарушений доступности.

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

Библиотека позволяет включать и отключать отдельные правила:

const options = {
  runOnly: {
    type: 'rule',
    values: ['color-contrast', 'label']
  }
};

const results = await axe.run(document.body, options);

Можно также игнорировать определённые элементы с помощью селекторов:

const options = {
  exclude: [['.ignore-this-section']]
};

Асинхронная интеграция с Jasmine

Так как axe.run возвращает промис, важно правильно обрабатывать асинхронность в тестах Jasmine. Для этого используют async/await или колбэк done:

it('checks accessibility asynchronously', (done) => {
  axe.run(document.body).then(results => {
    expect(results.violations.length).toBe(0);
    done();
  });
});

Работа с результатами

Объект results содержит следующие ключевые свойства:

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

Каждый элемент violation включает:

  • id — идентификатор правила.
  • impact — уровень важности.
  • description и help — описание проблемы и рекомендации.
  • nodes — конкретные элементы DOM, нарушающие правило.

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

results.violations.forEach(violation => {
  console.log(`Rule: ${violation.id}`);
  console.log(`Impact: ${violation.impact}`);
  violation.nodes.forEach(node => {
    console.log(`Element: ${node.html}`);
    console.log(`Failure Summary: ${node.failureSummary}`);
  });
});

Интеграция с браузерными тестами

Axe-core удобно использовать совместно с Jasmine и инструментами типа Protractor, Puppeteer или Cypress, что позволяет проверять доступность динамически создаваемого контента.

Пример с Puppeteer:

const puppeteer = require('puppeteer');

describe('Accessibility with Puppeteer', () => {
  let browser, page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('http://localhost:3000');
  });

  it('has no accessibility violations', async () => {
    const results = await page.evaluate(async () => {
      return await axe.run(document.body);
    });
    expect(results.violations.length).toBe(0);
  });

  afterAll(async () => {
    await browser.close();
  });
});

Настройка отчетности

Для удобства анализа нарушений можно использовать генерацию отчетов в различных форматах, включая JSON или HTML:

const fs = require('fs');
fs.writeFileSync('axe-report.json', JSON.stringify(results, null, 2));

Дополнительно существуют пакеты для визуализации, например axe-html-reporter, позволяющие создавать наглядные отчеты.

Продвинутая фильтрация

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

const seriousViolations = results.violations.filter(v => v.impact === 'serious');

Это позволяет сосредоточиться на критических проблемах и оптимизировать процесс исправления.

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

Axe-core легко интегрируется в процессы непрерывной интеграции:

  • Запуск тестов на сервере после деплоя.
  • Автоматическое прерывание сборки при обнаружении критических нарушений.
  • Формирование отчетов для команды QA.

Применение axe-core в таких сценариях позволяет поддерживать высокий стандарт доступности на протяжении всего жизненного цикла продукта.

Оглавление