E2E тестирование клавиатурной навигации

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

Проверка фокусируемых элементов

Фокусируемые элементы — это базовый объект тестирования. ally.js позволяет программно определить, какие элементы доступны для фокуса с клавиатуры:

import * as ally from 'ally.js';

const focusableElements = ally.query.tabOrder();
console.log(focusableElements);

Метод query.tabOrder() возвращает массив объектов, содержащих элементы в том порядке, в котором их можно достигнуть с помощью клавиши Tab. Для E2E тестирования это позволяет:

  • Проверять соответствие реального порядка табуляции проектной спецификации.
  • Выявлять элементы, которые неожиданно пропущены или доступны вне контекста.

Управление фокусом

Для автоматизации взаимодействия с клавиатурой полезно управлять фокусом программно. ally.js предоставляет метод focus():

ally.focus({
  element: document.querySelector('#submit-button'),
  preventScroll: true
});

Параметр preventScroll предотвращает прокрутку страницы при установке фокуса, что особенно важно при тестировании сложных интерфейсов с фиксированными элементами или виртуальными списками.

Проверка обхода контента

Ключевой аспект E2E тестирования — проверка логического обхода страницы с помощью клавиатуры. ally.js позволяет выявить блокирующие или скрытые элементы:

const inaccessibleElements = ally.query.notTabbable({
  context: document.body
});
console.log(inaccessibleElements);

Метод query.notTabbable() возвращает элементы, которые визуально присутствуют, но не могут быть достигнуты с клавиатуры. Это важно для:

  • Проверки доступности модальных окон и диалогов.
  • Обнаружения элементов, скрытых стилями display: none или visibility: hidden.
  • Валидации корректной установки атрибутов tabindex.

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

Для E2E тестов на базе Cypress или Playwright ally.js можно использовать совместно с симуляцией клавиатуры. Пример интеграции с Cypress:

cy.document().then(doc => {
  const tabbable = ally.query.tabOrder({ context: doc.body });
  tabbable.forEach(el => {
    cy.wrap(el.node).focus().should('have.focus');
  });
});

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

Работа с динамическим контентом

В современных SPA элементы интерфейса часто создаются динамически. ally.js поддерживает проверку активного состояния и появления новых элементов:

const observer = ally.observer.focus({
  context: document.body,
  callback: (event) => {
    console.log('Фокус изменился на элемент:', event.target);
  }
});

Метод observer.focus() позволяет отслеживать все изменения фокуса в реальном времени. Это критично для тестирования:

  • Переходов между вкладками и модальными окнами.
  • Всплывающих подсказок и кастомных компонент.
  • Асинхронной загрузки контента с сохранением корректного порядка табуляции.

Проверка ролей и атрибутов доступности

E2E тесты должны учитывать не только порядок табуляции, но и семантику элементов. ally.js предоставляет API для проверки ARIA-атрибутов и ролей:

const buttons = ally.query.firstTabbable({
  filter: '[role="button"]'
});
console.log(buttons);

Такой подход обеспечивает:

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

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

  • Всегда проверять контекст: используйте опцию context для ограничения области поиска, особенно на страницах с множеством модальных окон или вкладок.
  • Комбинировать с событиями клавиатуры: ally.js работает с фокусом, но для полноценных E2E тестов нужно симулировать Tab, Shift+Tab, Enter и другие клавиши.
  • Сохранять порядок табуляции в спецификации: интеграция с ally.js позволяет автоматизировать проверку соответствия реального интерфейса проектной документации.
  • Отслеживать динамические элементы: observer-функции помогают выявить изменения фокуса в реальном времени, что критично для SPA и интерфейсов с асинхронной подгрузкой.

Итоговое применение

Использование ally.js в E2E тестировании позволяет строить полноценные сценарии проверки клавиатурной навигации:

  • Проверка доступности всех интерактивных элементов.
  • Валидация порядка табуляции и поведения модальных окон.
  • Отслеживание изменений фокуса при динамическом обновлении интерфейса.
  • Контроль семантики через роли и ARIA-атрибуты.

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

Оглавление