Перейти к основному содержимому

Инструменты отладки

Подсветка, запись действий, пользовательские аннотации и управление отладчиком. Для всех этих функций требуется возможность devtools.

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

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

Подсветка элементов​

browser_highlight​

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

ПараметрТипОбязательныйОписание
targetstringдаИдентификатор элемента (ref) или селектор
stylestringнетДополнительные встроенные CSS-стили, применяемые к наложению, например outline: 2px dashed red
→ browser_highlight { target: "e12", style: "outline: 2px dashed red" }

browser_hide_highlight​

Удалить наложение подсветки. Передайте тот же target, который использовался для его добавления, или не указывайте target, чтобы убрать подсветку со страницы.

ПараметрТипОбязательныйОписание
targetstringнетИдентификатор элемента (ref) или селектор. Не указывайте, чтобы убрать всю подсветку на странице
→ browser_hide_highlight { target: "e12" }
→ browser_hide_highlight     // убрать всю подсветку

Запись действий пользователя​

Попросите пользователя продемонстрировать сценарий в браузере, а затем преобразуйте выполненные им действия в код Playwright.

browser_start_recording​

Начать запись действий, которые пользователь выполняет в браузере. Не принимает параметров. Страница выводится на передний план, чтобы пользователь мог с ней взаимодействовать.

browser_stop_recording​

Остановить запись и вернуть записанные действия в виде кода Playwright на языке, заданном параметром --codegen. Не принимает параметров.

Вы: Сейчас покажу, как применяется промокод.

→ browser_start_recording
  Запись началась. Вызовите browser_stop_recording, чтобы получить записанные действия.

  // ... пользователь выполняет действия сценария в браузере ...

Вы: Готово.

→ browser_stop_recording

  Запись остановлена. Записанные действия:

  await page.getByRole('textbox', { name: 'Discount code' }).fill('SAVE20');
  await page.getByRole('button', { name: 'Apply' }).click();

Сбор пользовательских аннотаций​

browser_annotate​

Открыть панель Playwright Dashboard в режиме аннотирования текущей страницы и дождаться, пока пользователь нарисует на ней аннотации. Возвращает снимок экрана с аннотациями, снимок ARIA и список прямоугольных областей аннотаций с их текстом. Не принимает параметров.

Вы: Обведите части этой страницы, которые выглядят неправильно.

→ browser_annotate

  На узких экранах шапка перекрывает навигацию.
  session / Dashboard @ https://app.example.com (1280x720)
    { x: 24, y: 12, width: 320, height: 48 }: здесь не должно быть перекрытия
  - [Изображение с аннотациями](annotations-2026-09-04T10-15-00-000Z.png)
  - [Снимок аннотаций](annotations-2026-09-04T10-15-00-000Z.yaml)

Если пользователь закроет панель, не отправив аннотации, инструмент вернёт No annotations were submitted. («Аннотации не отправлены»).

Управление отладчиком​

browser_resume​

Возобновить выполнение скрипта после приостановки — например, вызовом page.pause() в тесте, который выполняется в режиме отладки.

ПараметрТипОбязательныйОписание
stepbooleanнетПри значении true выполнение снова приостанавливается перед следующим действием, что позволяет выполнять пошаговую отладку
locationstringнетВыполнять до указанной позиции <file>:<line>, например example.spec.ts:42
→ browser_resume                                     // выполнить до завершения
→ browser_resume { step: true }                      // выполнить одно действие
→ browser_resume { location: "checkout.spec.ts:42" } // выполнить до указанной строки