Снимки

После каждой команды playwright-cli выводит снимок текущего состояния браузера — дерево доступности с идентификаторами элементов (ref) для взаимодействия с ними.

Автоматические снимки

Каждая команда возвращает информацию о странице и ссылку на файл снимка:

### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React - TodoMVC
### Snapshot
- [Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)

Файл снимка содержит дерево доступности:

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"
- listitem:
  - checkbox "Toggle Todo" [ref=e14]
  - text: "Water flowers"
- contentinfo:
  - text: "2 items left"
  - link "All" [ref=e20]
  - link "Active" [ref=e21]
  - link "Completed" [ref=e22]

Идентификаторы элементов

Каждый интерактивный элемент получает уникальный идентификатор (например, e5, e10). Эти идентификаторы стабильны в пределах одного снимка, но становятся недействительными при изменении страницы — всегда создавайте новый снимок после навигации.

Свойство	Описание
Формат	e, за которой следует число (например, e1, e15, e203)
Область действия	Уникальны в пределах одного снимка
Срок действия	Действительны до следующего изменения страницы
Назначение	Только интерактивные элементы получают идентификаторы элементов (кнопки, ссылки, поля ввода и т. д.)

Снимки по запросу

Все эти параметры можно комбинировать.

playwright-cli snapshot                        # вся страница, имя файла с отметкой времени
playwright-cli snapshot --filename=after.yaml  # заданное имя файла
playwright-cli snapshot "#main"                # ограничение области CSS-селектором
playwright-cli snapshot e34                    # ограничить область элементом с этим идентификатором
playwright-cli snapshot --depth=4              # ограничение глубины дерева
playwright-cli snapshot --boxes                # включение ограничивающих прямоугольников

--boxes добавляет [box=x,y,width,height] к каждому элементу. Координаты задаются в CSS-пикселях относительно области просмотра, как в результате вызова Element.getBoundingClientRect(), — их удобно использовать для взаимодействия по координатам.

При работе со страницей с глубоко вложенной структурой обычно сначала создают снимок с небольшой глубиной, а затем частичный снимок интересующего поддерева:

playwright-cli snapshot --depth=4
playwright-cli snapshot e34

Поиск по снимку

На большой странице find требует гораздо меньше ресурсов, чем создание снимка всего дерева. Команда возвращает соответствующие узлы с тремя строками контекста вокруг каждого совпадения — как grep -C — с указанием пути к ним от корня дерева.

# поиск подстроки без учёта регистра
playwright-cli find "Add to cart"

# регулярное выражение, по умолчанию с учётом регистра
playwright-cli find --regex "\\$[0-9]+\\.[0-9]{2}"

# заключите шаблон в косые черты, чтобы добавить флаги
playwright-cli find --regex "/sign (in|up)/i"

Передавайте либо текстовый аргумент, либо --regex, но не оба одновременно.

Использование идентификаторов элементов

playwright-cli click e10                   # установить флажок
playwright-cli fill e5 "Walk the dog"      # ввести текст в текстовое поле
playwright-cli hover e20                   # навести указатель на ссылку "All"

Использование селекторов

Вместо идентификаторов элементов можно использовать CSS-селекторы и локаторы Playwright:

# CSS-селекторы
playwright-cli click "#main > button.submit"
playwright-cli click "[data-testid='submit']"

# Локаторы Playwright
playwright-cli click "getByRole('button', { name: 'Submit' })"
playwright-cli click "getByTestId('submit-button')"
playwright-cli click "getByText('Login')"

Необработанный вывод

--raw — глобальный параметр, который удаляет из вывода сведения о состоянии страницы, сгенерированный код и разделы снимков, оставляя только значение результата. Благодаря этому вывод можно передавать по конвейеру:

playwright-cli --raw snapshot > before.yml
playwright-cli click e5
playwright-cli --raw snapshot > after.yml
diff before.yml after.yml

Рекомендации

1. Используйте идентификаторы из снимка — идентификаторы элементов из снимков надёжнее CSS-селекторов, поскольку указывают именно на тот элемент, который агент только что увидел
2. Создавайте новый снимок после навигации — идентификаторы элементов становятся недействительными при изменении страницы
3. Используйте поиск вместо создания снимка — применяйте find, если нужно найти только один элемент
4. Ограничивайте глубину — используйте --depth на сложных страницах, чтобы уменьшить объём вывода
5. Ограничивайте область отдельными элементами — создавайте снимок конкретного раздела, а не всей страницы
6. Задавайте имена файлов снимков — используйте --filename, если снимок является частью результата рабочего процесса
7. Проверяйте наличие диалоговых окон — если команда сообщает об открытом диалоговом окне, обработайте его, прежде чем переходить к другим действиям