Визуальный режим

По умолчанию вы взаимодействуете с элементами страницы, используя идентификаторы элементов (ref) из снимков дерева доступности. Для элементов, не представленных в дереве доступности, — приложений на основе canvas, карт, пользовательских виджетов — используйте команды мыши на основе координат, ориентируясь на скриншоты.

Команды

Команда	Описание
mousemove <x> <y>	Переместить мышь в указанные координаты в пикселях
mousedown [button]	Нажать кнопку мыши (left — левую, right — правую, middle — среднюю)
mouseup [button]	Отпустить кнопку мыши
mousewheel <dx> <dy>	Выполнить прокрутку (dx — по горизонтали, dy — по вертикали)
screenshot	Сделать скриншот области просмотра для определения координат
snapshot --boxes	Создать снимок с ограничивающей рамкой каждого элемента

Координаты задаются в CSS-пикселях относительно области просмотра. Команда screenshot --hires вместо этого делает скриншот в физических пикселях устройства, учитывая коэффициент плотности пикселей устройства — помните, что координаты пикселей такого скриншота не совпадают с координатами, которые ожидают команды мыши.

Получение координат без догадок

Если элемент представлен в дереве доступности, но вам нужно узнать его положение — чтобы перетащить его или нарисовать выноску поверх него, — команда snapshot --boxes надёжнее, чем определение координат по скриншоту:

$ playwright-cli snapshot --boxes
# - button "Zoom in" [ref=e12] [box=1180,64,32,32]

$ playwright-cli mousemove 1196 80

Рабочий процесс: взаимодействие с приложением на основе canvas

# Сделать скриншот, чтобы увидеть содержимое canvas
playwright-cli screenshot --filename=canvas.png

# Агент определяет координаты по скриншоту
# Щёлкнуть в точке (150, 300)
playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mouseup

# Перетащить из точки (100, 200) в точку (400, 200)
playwright-cli mousemove 100 200
playwright-cli mousedown
playwright-cli mousemove 400 200
playwright-cli mouseup

# Проверить результат
playwright-cli screenshot --filename=after-drag.png

Рабочий процесс: щелчок по значку без доступного имени

# В снимке нет значка шестерёнки
playwright-cli snapshot
# (в выводе нет значка шестерёнки)

# Сделать скриншот — агент видит значок шестерёнки примерно в точке (850, 45)
playwright-cli screenshot

# Щёлкнуть по нему
playwright-cli mousemove 850 45
playwright-cli mousedown
playwright-cli mouseup

# Открывается панель настроек с корректной поддержкой доступности
playwright-cli snapshot
# - heading "Settings" [level=2]
# - textbox "Display name" [ref=e12]

# Для остальных действий теперь использовать идентификаторы элементов (`ref`)
playwright-cli fill e12 "New Name"

Когда использовать визуальный режим

Сценарий	Подход
Стандартные веб-страницы	Использовать идентификаторы элементов (ref) из снимков (по умолчанию)
Приложения на основе Canvas / WebGL	Визуальный режим со скриншотами
Взаимодействие с картами	Визуальный режим для перемещения и масштабирования
Редакторы изображений	Визуальный режим для рисования
Диаграммы / графики	Визуальный режим для щелчков по точкам данных
Пользовательские виджеты без ARIA	Визуальный режим как запасной вариант

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