cypress-axe плагин

cypress-axe — это плагин для интеграции библиотеки axe-core в Cypress, предназначенной для автоматизированного тестирования доступности веб-приложений. Он позволяет проверять страницы на соответствие стандартам WCAG, выявлять проблемы с цветовой контрастностью, навигацией и семантикой элементов.

Для установки используется npm:

npm install --save-dev cypress-axe

После установки необходимо подключить плагин в файле cypress/support/e2e.js:

import 'cypress-axe';

Или, если используется CommonJS:

require('cypress-axe');

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

Перед выполнением любых проверок необходимо внедрить скрипт axe на тестируемую страницу:

cy.visit('/страница')
cy.injectAxe();

Ключевой момент: вызов cy.injectAxe() должен происходить после полной загрузки DOM, чтобы библиотека могла корректно анализировать структуру страницы.

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

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

cy.checkA11y();

Эта команда автоматически анализирует весь DOM и выводит в консоль найденные проблемы с доступностью. Можно дополнительно указать параметры для фильтрации или исключения определённых элементов:

cy.checkA11y(null, {
  includedImpacts: ['critical', 'serious'],
  exclude: ['.advertisement', '#banner']
});

includedImpacts — задаёт, какие уровни критичности ошибок будут проверяться (minor, moderate, serious, critical). exclude — CSS-селекторы элементов, которые необходимо пропустить при проверке.

Проверка отдельных компонентов

cypress-axe позволяет тестировать не только всю страницу, но и отдельные компоненты:

cy.get('.form-login').then(($el) => {
  cy.checkA11y($el, {
    rules: {
      'color-contrast': { enabled: true },
      'image-alt': { enabled: true }
    }
  });
});

Особенности:

  • Передаётся элемент DOM через Cypress get() или find().
  • Можно включать или отключать конкретные правила, что позволяет сосредоточиться на критических аспектах доступности.

Настройка отчётов

По умолчанию ошибки выводятся в консоль Cypress. Для удобства можно интегрировать отчёты с другими инструментами или сохранить их в файл:

cy.checkA11y(null, null, (violations) => {
  cy.task('logA11yViolations', violations);
});

В файле cypress/plugins/index.js настраивается задача logA11yViolations:

module.exports = (on, config) => {
  on('task', {
    logA11yViolations(violations) {
      console.table(violations);
      return null;
    }
  });
};

Это позволяет сохранять структурированные данные о нарушениях и использовать их в CI/CD-процессах.

Использование с кастомными правилами

axe-core поддерживает кастомные правила, которые можно подключить через cypress-axe. Пример:

const customRule = {
  id: 'no-empty-links',
  selector: 'a',
  any: [{
    id: 'link-has-text',
    evaluate: (node) => node.textContent.trim().length > 0,
    message: 'Ссылка не должна быть пустой'
  }]
};

cy.injectAxe({
  rules: [customRule]
});
cy.checkA11y();

Это позволяет расширять стандартный набор проверок и учитывать внутренние требования проекта.

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

Для автоматизации тестирования доступности в CI/CD можно добавить шаги в пайплайн, которые запускают Cypress с проверкой доступности:

cypress run --spec "cypress/e2e/accessibility.cy.js"

Результаты нарушений можно обрабатывать через cy.task, формируя отчёты для команды разработки.

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

  • Вызывать cy.injectAxe() после полной загрузки страницы, иначе проверка будет неполной.
  • Использовать includedImpacts для фильтрации серьёзных ошибок на этапе CI, чтобы не перегружать отчёты мелкими проблемами.
  • Проверять отдельные компоненты отдельно, особенно динамические элементы, которые подгружаются через JavaScript.
  • Интегрировать с CI/CD для регулярной проверки доступности, что предотвращает появление новых нарушений после релизов.

cypress-axe обеспечивает эффективную автоматизацию аудита доступности, позволяя выявлять проблемы на ранних этапах разработки и поддерживать высокие стандарты качества веб-приложений.

Оглавление