Тестирование доступности является важным аспектом современной веб-разработки. Обеспечивая доступность ваших приложений, вы не только повышаете удобство использования для значительной части пользователей, но и соблюдаете этические стандарты и юридические требования. В то время как ручное тестирование доступности имеет решающее значение, автоматизированные инструменты могут ускорить процесс и выявить проблемы, которые могут ускользнуть. Одним из таких инструментов является Cypress, популярный фреймворк для сквозного тестирования веб-приложений. В этом посте мы поделимся советами по автоматизации тестирования доступности с помощью Cypress.

Понимание кипариса и его преимуществ

Cypress — это среда сквозного тестирования на основе JavaScript с открытым исходным кодом, которая не использует Selenium, в отличие от многих других инструментов тестирования. Управляя браузером напрямую, он предлагает более надежную и быструю среду тестирования.

К преимуществам кипариса относятся:

  • Перезагрузка в реальном времени: Cypress предлагает автоматическую перезагрузку всякий раз, когда вы вносите изменения в свои тесты.
  • Возможность отладки: он предоставляет читаемые ошибки и трассировки стека, которые упрощают отладку.
  • Путешествие во времени: Cypress делает моментальные снимки во время выполнения ваших тестов. Наведите указатель мыши на команды в журнале команд, чтобы точно увидеть, что происходило на каждом шаге.

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

1. Установите необходимые зависимости

Вам необходимо установить Cypress и cypress-axe. Вы можете сделать это с помощью npm:

npm install --save-dev cypress cypress-axe axe-core

2. Интеграция Cypress-axe

В файле commands.js вашего проекта добавьте следующее:

import 'cypress-axe'

Это добавит команды cy.injectAxe и cy.checkA11y в глобальный объект cy.

3. Ввести топор

Перед запуском проверки доступности вам необходимо внедрить среду выполнения топора на тестируемую страницу. Вы можете сделать это, вызвав команду cy.injectAxe в хуке beforeEach:

beforeEach(() => {
  cy.visit('https://your-website-under-test.com')
  cy.injectAxe()
})

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

Теперь вы можете использовать команду cy.checkA11y() для запуска проверок доступности. Вы можете запустить эту команду без аргументов, чтобы проверить весь документ, или вы можете указать контекст для проверки определенного компонента:

it('Has no detectable accessibility violations on load', () => {
  cy.checkA11y()
})

5. Запустите тесты Cypress из терминала

Вы можете запустить тесты Cypress из терминала с помощью команды npm run:

npm run cypress:open

Эта команда откроет приложение Cypress в вашей среде разработки, из которого вы сможете выбрать тесты, которые хотите запустить.

Однако, чтобы запускать тесты без участия пользователя (без открытия приложения), вместо этого используйте команду cypress run:

npm run cypress:run

Эта команда запускает тесты в безголовом браузере (по умолчанию Electron). Если вы хотите указать другой браузер, вы можете добавить флаг --browser к скрипту cypress run в файле package.json:

{
  "scripts": {
    "cypress:run": "cypress run --browser chrome"
  }
}

Затем вы можете запустить:

npm run cypress:run

Теперь ваши тесты будут запускаться в Chrome вместо Electron.

Если вы хотите запустить определенный тестовый файл вместо всех тестов, вы можете указать путь к файлу:

npm run cypress:run -- --spec "cypress/integration/my-test-file.js"

Помните, что эти команды следует запускать из корня вашего проекта, где находятся ваш каталог node_modules и файлы конфигурации cypress.json.

Советы профессионалов по автоматическому тестированию доступности с помощью Cypress

Хотя базовая настройка поможет вам начать с автоматизированного тестирования специальных возможностей, вот несколько советов, как максимально эффективно использовать тестирование Cypress:

1. Настройте свои тесты

С помощью cypress-axe вы можете настроить тесты специальных возможностей, которые хотите запустить, указав параметры для команды checkA11y. Вы можете указать определенные правила, чтобы пропустить их или сосредоточиться на них. Например, вы можете захотеть провалить тест только при наличии «критических» или «серьезных» нарушений. Вот пример того, как вы можете это сделать:

Cypress.Commands.overwrite("checkA11y", (originalFn, options) => {
  const mergedOptions = {
    ...(typeof options === "object" ? options : {}),
    includedImpacts: ["critical", "serious"],
  };

  return originalFn(undefined, mergedOptions);
});

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

Не забудьте добавить этот код в свой файл commands.js, чтобы он был доступен глобально в тестах Cypress.

2. Включите CI/CD

Для более надежного процесса тестирования доступности интегрируйте тесты Cypress в конвейер непрерывной интеграции/непрерывного развертывания (CI/CD). Это гарантирует, что проверки доступности выполняются регулярно и автоматически, выявляя потенциальные проблемы на ранних этапах цикла разработки.

Простой способ сделать это — использовать GitHub Actions, который позволяет вам создать рабочий процесс, который автоматически запускает ваши тесты всякий раз, когда происходит отправка в репозиторий. Вот базовый пример рабочего процесса GitHub Actions, который запускает тесты Cypress:

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: npm ci

      - name: Run Cypress Tests
        run: npm run cypress:run

В этом рабочем процессе:

  1. Шаг Checkout проверяет ваш репозиторий, чтобы ваш рабочий процесс мог получить доступ к его содержимому.
  2. Шаг Install Dependencies использует npm для установки зависимостей вашего проекта, которые должны включать Cypress и любые другие пакеты, необходимые вашим тестам.
  3. Шаг Run Cypress Tests запускает скрипт cypress:run, который должен запускать ваши тесты Cypress.

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

Помните, что вам нужно добавить этот рабочий процесс в каталог .github/workflows в вашем репозитории. Для более сложных рабочих процессов может потребоваться дополнительная установка или настройка. Всегда обращайтесь к официальной документации GitHub Actions и Cypress для получения более подробной информации.

3. Не полагайтесь исключительно на автоматизацию

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

Существует несколько инструментов, которые могут помочь вам вручную проверить наличие проблем с доступностью. К ним относятся:

  • Программы чтения с экрана: такие инструменты, как NVDA, JAWS и VoiceOver, помогут вам понять, как ваш веб-сайт воспринимается пользователями, использующими эти технологии. Перемещаясь по сайту с помощью программы чтения с экрана, вы сможете выявлять проблемы, которые могут не обнаруживаться автоматическими тестами.
  • Навигация с помощью клавиатуры. Попробуйте перемещаться по сайту, используя только клавиатуру. Это позволит вам определить, доступны ли все интерактивные элементы и могут ли они управляться пользователями, использующими только клавиатуру.
  • Анализаторы цветового контраста: такие инструменты, как средство проверки цветового контраста WebAIM или встроенное средство проверки контраста в инструментах разработки браузера, могут помочь вам убедиться, что цвета вашего сайта соответствуют стандартам контрастности.

Подведение итогов

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

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

Если вам понравился этот пост, подпишитесь на меня, чтобы узнать больше. Спасибо!