ARIA-снимки (Aria Snapshots)

ARIA-снимки — это текстовое представление accessibility-дерева страницы. Они позволяют проверять семантическую структуру и доступность без визуального рендеринга.

Что такое ARIA-снимок?

Снимок строится на основе ARIA-ролей и доступных имён элементов. Формат напоминает YAML — иерархическое дерево узлов.

- text "Example Domain"
- link "More information"

Сравнение с помощью to_match_aria_snapshot

Матчер to_match_aria_snapshot сравнивает текущее accessibility-дерево с эталонным снимком.

from playwright.sync_api import expect

expect(page).to_match_aria_snapshot("""
- heading "Example Domain" [level=1]
- paragraph "This domain is for use..."
- link "More information"
""")

Сравнение элемента

Можно сравнить снимок только для конкретного локатора.

expect(
    page.locator("nav")
).to_match_aria_snapshot("""
- list
  - listitem
    - link "Home"
  - listitem
    - link "About"
""")

Формат снимка

Каждый узел имеет вид: роль "имя" [атрибуты].

Поддерживаемые роли: button, heading, link, textbox, list, listitem, img, paragraph, text, checkbox, radio, combobox, slider, progressbar, tab, tabpanel, dialog, alert, tooltip и другие стандартные ARIA-роли.

- button "Отправить"
- heading "Заголовок" [level=2]
- link "Читать далее"
- textbox "Имя" [disabled]
- img "Логотип"

Атрибуты узлов

АтрибутОписание
[checked]Флажок отмечен
[disabled]Элемент неактивен
[level=N]Уровень заголовка
[expanded]Раскрытый элемент
[pressed]Нажатая кнопка
Совет: Можно опускать атрибуты и дочерние узлы — снимок проверит только указанные. Это даёт частичное совпадение.

Частичное совпадение

Если в снимке указан только поднабор узлов, совпадение всё равно засчитывается:

# Фактическое дерево содержит ещё пункты,
# но проверка пройдёт — важен только Home
expect(page.locator("nav")).to_match_aria_snapshot("""
- list
  - listitem
    - link "Home"
""")

Строгое совпадение (children: equal)

Ключ children: equal требует точного соответствия дочерних узлов.

expect(page).to_match_aria_snapshot("""
- list [children: equal]
  - listitem
    - link "Home"
  - listitem
    - link "About"
""")

Глубокое равенство (deep-equal)

Ключ deep-equal рекурсивно сравнивает весь подграф узла.

expect(page).to_match_aria_snapshot("""
- list [deep-equal]
  - listitem
    - link "Home"
""")

Regex в имени

Имя узла может быть регулярным выражением (внутри /pattern/).

expect(page).to_match_aria_snapshot("""
- heading /Добро пожаловать|Welcome/
- link "/page/\\d+/"
""")
Примечание: Обратную косую черту в regex нужно экранировать внутри YAML-подобного формата.

Получение снимка (aria_snapshot)

Метод page.aria_snapshot() возвращает строку с текущим accessibility-деревом. Удобно для генерации эталонов.

snapshot_str = page.aria_snapshot()
print(snapshot_str)
# - button "Нажми меня"
# - heading "Главная" [level=1]

Снимок локатора

snapshot = page.locator("main").aria_snapshot()
print(snapshot)

Генерация снимков через Codegen

В Playwright Inspector (codegen) есть кнопка Assert snapshotAria snapshot. При нажатии генерируется код с to_match_aria_snapshot и текущим деревом.

Assertion vs Snapshot-тестирование

Матчер to_match_aria_snapshotSnapshot-файлы
Снимок встроен в кодСнимок в отдельном файле (_.snap_)
Подходит для небольших фрагментовУдобен для больших деревьев
Частичное совпадение включеноСтрогое совпадение по умолчанию
Обновляется вручнуюОбновляется флагом --update-snapshots
# Snapshot-файл: __snapshots__/menu.aria
# - list
#   - listitem
#     - link "Home"
Важно: ARIA-снимки зависят от реализации accessibility браузером. Разные браузеры могут возвращать разное дерево для одной и той же страницы.