Тестирование доступности помогает убедиться, что пользовательский интерфейс доступен для всех, включая людей с повышенными потребностями.

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

Эта статья - своеобразный мини-гайд для быстрого старта вместе с Cypress и axe-core.

Почему такое сочетание технологий?

Axe-core - это надежный движок, соответствует стандартам WCAG. Он проверяет действительно реальные проблемы: контраст, aria-label, роли, альтернативный текст. Его легко интегрировать.

Cypress - удобный фреймворк, с огромным количеством функций “из коробки”. Легкая установка, большое количество примеров. Сохраняет скриншоты, делает запись видео, идеален для пользовательских тестов.

Typescript - мой любимый инструмент. Требует чуть больше времени при настройке проекта, но зато в дальнейшем помогает выявлять явные ошибки.

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

npm install --save-dev typescript cypress cypress-axe mochawesome mochawesome-merge mochawesome-report-generator rimraf

Добавляем команду для тестирования доступности: axeCheck

Добавим в файл cypress/support/commands.ts:

import 'cypress-axe';

Cypress.Commands.add('axeCheck', () => {
  cy.injectAxe();
  cy.checkA11y(undefined, undefined, (violations) => {
    if (violations.length) {
      const violationMessages = violations.map((v, i) => {
        return `\n[${i + 1}] X ${v.id} - ${v.help}
Element: ${v.nodes[0].html}
Summary: ${v.nodes[0].failureSummary}
Impact: ${v.impact}
Rule: ${v.helpUrl}
`;
      }).join('\n');
      throw new Error(`Accessibility violations:\n${violationMessages}`);
    }
  });
});

Добавляем типизацию (создаем файл commands.d.ts, если он не был создан, и добавляем интерфейс):

declare namespace Cypress {
  interface Chainable {
    injectAxeAndCheck(): Chainable<void>;
  }
}

Первый тест

Наш первый тест нужен для того, чтобы убедиться, что все настройки и зависимости правильные, что все работает так, как нужно. Для тестирования выбран ebay.com.

describe('A11y check: eBay homepage', () => {
  it('Check for accessibility errors', () => {
    cy.visit('https://www.ebay.com/');
    cy.axeAndCheck();
  });
});

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

Добавляем в cypress.config.ts подключение репортера mochawesome:

reporter: 'mochawesome',
reporterOptions: {
  reportDir: 'cypress/reports',
  overwrite: false,
  html: true,
  json: true,
  charts: true,
  reportPageTitle: 'A11y-check report',
  embeddedScreenshots: true,
  inlineAssets: true,
}

Сводный отчёт

Если тестов больше 1, то mochawesome будет генерировать отдельные файлы отчетов (json и html) для каждого файла с тестами. Поэтому добавляем в package.json следующие скрипты:

команду для удаления отчетов по предыдущим запускам:

"clean": "rimraf cypress/reports && rimraf cypress/merged"

запуск cypress в фоновом режиме, без открытия браузера:

"test": "cypress run"

и сами команды для создания отчетов:

"merge-reports": "mochawesome-merge cypress/reports/*.json > cypress/merged/mochawesome.json",

"generate-report": "marge cypress/merged/mochawesome.json --reportDir cypress/merged --reportFilename report",

"test:report": "npm run clean && npm run test && npm run merge-reports && npm run generate-report"

Запуск

npm run test:report - всего одна команда, которая запускает тесты в фоновом режиме без открытия браузера, удаляет предыдущие отчеты, генерирует новые и объединяет их в один сводный отчет.

Результат

Получаем подробный вывод об ошибках в консоль:

Вывод результатов тестирования доступности в консоль

А также отчет, который поможет разработчикам легко найти нужный элемент, разобраться, какое правило нарушено, и посмотреть, насколько критична эта ошибка:

Заключение

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

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

Cypress + axe-core: быстрый старт тестов на доступность