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

По умолчанию Playwright MCP использует снимки дерева доступности для всех взаимодействий. Визуальный режим добавляет инструменты для работы по координатам на основе скриншотов, позволяя взаимодействовать с элементами, которые не представлены в дереве доступности.

Включение визуального режима

Добавьте возможность vision:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

Дополнительные инструменты

В визуальном режиме становятся доступны следующие инструменты для работы по координатам:

Инструмент	Описание
browser_mouse_move_xy	Переместить указатель мыши в координаты x,y
browser_mouse_click_xy	Нажать в точке x,y (поддерживает button, clickCount, delay)
browser_mouse_drag_xy	Выполнить перетаскивание от начальных координат к конечным
browser_mouse_down	Нажать кнопку мыши
browser_mouse_up	Отпустить кнопку мыши
browser_mouse_wheel	Выполнить прокрутку колесом мыши

Полный справочник параметров см. в разделе Клавиатура и мышь.

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

Вы: Нарисуй прямоугольник на холсте.

→ browser_take_screenshot
  // LLM видит холст и определяет координаты

→ browser_mouse_click_xy { x: 100, y: 150 }
→ browser_mouse_drag_xy { startX: 100, startY: 150, endX: 300, endY: 250 }
→ browser_take_screenshot
  // LLM проверяет, что прямоугольник нарисован

Пример рабочего процесса: нажатие на значок без доступного имени

→ browser_snapshot
  // У значка шестерёнки нет доступного имени в снимке

→ browser_take_screenshot
  // LLM видит значок шестерёнки примерно в точке (850, 45)

→ browser_mouse_click_xy { x: 850, y: 45 }

  // Панель настроек теперь открыта и корректно представлена в дереве доступности
  - heading "Settings" [level=2] [ref=e10]
  - textbox "Display name" [ref=e12]

подсказка

Вместо определения координат по скриншоту запросите их напрямую: browser_snapshot { boxes: true } добавляет [box=x,y,width,height] к каждому узлу, указывая координаты и размеры в CSS-пикселях относительно области просмотра. --snapshot-boxes включает эту возможность для каждого снимка.

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

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

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

Комбинирование возможностей

Включите несколько возможностей:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=vision,pdf,devtools"]
    }
  }
}

Или укажите их в файле конфигурации:

{
  "capabilities": ["vision", "pdf", "devtools"]
}