Работа с ARIA атрибутами

ARIA (Accessible Rich Internet Applications) — набор атрибутов, позволяющих сделать веб-приложения доступными для пользователей с ограниченными возможностями. В контексте автоматизированного тестирования на Playwright, проверка ARIA-атрибутов становится важной частью тестов на доступность и корректность поведения интерфейсов.

Основные ARIA-атрибуты

Среди наиболее часто используемых атрибутов выделяются:

  • role — определяет тип элемента, например button, checkbox, dialog.
  • aria-label — текстовая метка для элемента, недоступного визуально.
  • aria-labelledby — связывает элемент с другим элементом, содержащим его описание.
  • aria-hidden — скрывает элемент от вспомогательных технологий, например скринридеров.
  • aria-checked — состояние чекбокса или переключателя (true, false, mixed).
  • aria-expanded — состояние раскрытия контента (true или false).

Проверка этих атрибутов позволяет убедиться, что интерактивные элементы корректно описаны и доступны.

Локаторы Playwright для ARIA

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

await page.getByRole('button', { name: 'Отправить' });

Метод getByRole позволяет:

  • Уточнять роль элемента с помощью role.
  • Фильтровать по видимому имени через name.
  • Учитывать состояние элемента с помощью опций, таких как checked или expanded.

Примеры:

// Получение чекбокса, который выбран
const checkbox = page.getByRole('checkbox', { checked: true });

// Получение раскрывающегося меню
const dropdown = page.getByRole('button', { name: 'Меню', expanded: false });

Использование getByRole делает тесты более надежными, так как они не зависят от классов и структуры DOM, а ориентируются на семантику интерфейса.

Проверка ARIA-атрибутов через Playwright

Для проверки атрибутов существует метод getAttribute. Пример проверки aria-checked:

const checkbox = page.getByRole('checkbox', { name: 'Согласие' });
const isChecked = await checkbox.getAttribute('aria-checked');
expect(isChecked).toBe('true');

Другой способ — использовать проверку через toHaveAttribute в сочетании с expect:

await expect(checkbox).toHaveAttribute('aria-checked', 'true');
await expect(dropdown).toHaveAttribute('aria-expanded', 'false');

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

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

Многие интерфейсы изменяют ARIA-атрибуты динамически при взаимодействии пользователя. Для их тестирования важно:

  1. Ждать изменения состояния через waitForFunction или locator.waitFor:
const button = page.getByRole('button', { name: 'Подробнее' });
await button.click();
await button.waitFor({ state: 'attached' });
await expect(button).toHaveAttribute('aria-expanded', 'true');
  1. Использовать фильтры по состоянию в getByRole:
const expandedSection = page.getByRole('region', { expanded: true });

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

Аутентификация и ARIA в сложных компонентах

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

  • aria-controls — связь управляющего элемента с управляемым.
  • aria-selected — состояние выбранной вкладки.
  • aria-modal — активность модальных окон.

Пример проверки модального окна:

const modal = page.getByRole('dialog');
await expect(modal).toHaveAttribute('aria-modal', 'true');
await expect(modal).toHaveAttribute('aria-hidden', 'false');

Такое тестирование гарантирует, что интерактивность элементов соответствует стандартам доступности.

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

  • Всегда использовать getByRole вместо классов или селекторов CSS, если доступна семантическая информация.
  • Проверять как статические, так и динамические атрибуты ARIA, особенно при кликах, раскрытиях и переключениях.
  • Для сложных интерфейсов использовать комбинацию getByRole, getByLabel и getAttribute, чтобы обеспечить полное покрытие состояния элементов.
  • Логировать состояния ARIA при отладке тестов, чтобы выявлять несоответствия стандартам доступности.

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

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

Оглавление