Агенты для программирования

Введение

Playwright поставляется с playwright-cli — интерфейсом командной строки для автоматизации браузера, разработанным для агентов программирования. Он обеспечивает экономичное по расходу токенов управление браузером с помощью кратких команд CLI и устанавливаемых навыков, что делает его идеальным решением для агентов, которым необходимо совмещать автоматизацию браузера с работой над большими кодовыми базами и рассуждениями в условиях ограниченного контекстного окна.

`playwright-cli` и Playwright MCP

playwright-cli лучше всего подходит для агентов программирования (Claude Code, GitHub Copilot и т. д.), которые предпочитают экономичные по расходу токенов рабочие процессы на основе навыков. Команды CLI позволяют не загружать в контекст модели большие схемы инструментов и подробные деревья доступности.
MCP лучше всего подходит для специализированных агентных циклов, которым полезны сохранение состояния и итеративные рассуждения о структуре страницы, например для исследовательской автоматизации или длительных автономных рабочих процессов. См. руководство по началу работы с MCP.

Предварительные требования

Прежде чем начать, убедитесь, что у вас установлены:

Node.js версии 20 или новее
Агент программирования: Claude Code, GitHub Copilot или аналогичный

Установка

Установите playwright-cli глобально:

npm install -g @playwright/cli@latest
playwright-cli --help

Также можно установить @playwright/cli как локальную зависимость и использовать npx:

npm install -D @playwright/cli@latest
npx playwright cli --help

Установка навыков

Агенты программирования, такие как Claude Code и GitHub Copilot, могут использовать локально установленные навыки для получения более подробного контекста о доступных командах:

playwright-cli install --skills

Чтобы использовать навыки во всех ваших проектах, добавьте флаг -g для их установки в домашний каталог (~/.claude/skills или, с параметром --skills=agents, ~/.agents/skills):

playwright-cli install --skills -g

Работа без навыков

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

Протестируй сценарий добавления задачи ("add todo") на https://demo.playwright.dev/todomvc с помощью playwright-cli.
Посмотри доступные команды в playwright-cli --help.

Первые шаги

Интерактивная демонстрация

Попробуйте попросить своего агента программирования:

Используй навыки playwright для тестирования https://demo.playwright.dev/todomvc/.
Сделай скриншоты для всех успешных и неуспешных сценариев.

Пошаговый пример ручного использования

Вы также можете запускать команды вручную, чтобы увидеть, как работает CLI:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli screenshot

После каждой команды CLI выводит снимок текущего состояния страницы:

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

Основные команды

Взаимодействие со страницами

playwright-cli open [url]               # открыть браузер, при необходимости перейти по URL
playwright-cli goto <url>               # перейти по указанному URL
playwright-cli click <ref> [button]     # нажать на элемент
playwright-cli type <text>              # ввести текст в редактируемый элемент
playwright-cli fill <ref> <text>        # заполнить редактируемый элемент текстом
playwright-cli select <ref> <value>     # выбрать вариант в раскрывающемся списке
playwright-cli check <ref>              # установить флажок или выбрать радиокнопку
playwright-cli uncheck <ref>            # снять флажок
playwright-cli hover <ref>              # навести указатель на элемент
playwright-cli drag <startRef> <endRef> # выполнить перетаскивание между элементами
playwright-cli upload <files...>        # загрузить один или несколько файлов
playwright-cli close                    # закрыть страницу

Выбор целевых элементов

Для указания целевых элементов используйте ссылки на элементы из снимков:

playwright-cli snapshot                 # получить снимок со ссылками на элементы
playwright-cli click e15                # нажать на элемент по ссылке

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

playwright-cli click "#main > button.submit"
playwright-cli click "role=button[name=Submit]"
playwright-cli click "#footer >> role=button[name=Submit]"

Скриншоты и снимки

playwright-cli snapshot                 # получить снимок страницы
playwright-cli snapshot --filename=f    # сохранить снимок в указанный файл
playwright-cli screenshot               # сделать скриншот текущей страницы
playwright-cli screenshot [ref]         # сделать скриншот определенного элемента
playwright-cli screenshot --filename=f  # сохранить с указанным именем файла
playwright-cli screenshot --hires       # сделать скриншот в пикселях устройства
playwright-cli pdf                      # сохранить страницу в формате PDF

Клавиатура и мышь

playwright-cli press <key>              # нажать клавишу (например, Enter, ArrowLeft)
playwright-cli keydown <key>            # зажать клавишу
playwright-cli keyup <key>              # отпустить клавишу
playwright-cli mousemove <x> <y>        # переместить указатель мыши
playwright-cli mousedown [button]       # зажать кнопку мыши
playwright-cli mouseup [button]         # отпустить кнопку мыши
playwright-cli mousewheel <dx> <dy>     # выполнить прокрутку

Вкладки

playwright-cli tab-list                 # вывести список всех вкладок
playwright-cli tab-new [url]            # создать новую вкладку
playwright-cli tab-select <index>       # выбрать вкладку
playwright-cli tab-close [index]        # закрыть вкладку

Сеть

playwright-cli requests                 # вывести список сетевых запросов с момента загрузки страницы
playwright-cli request <num>            # показать полные сведения об одном запросе
playwright-cli route <pattern> [opts]   # имитировать сетевые запросы
playwright-cli route-list               # вывести список активных маршрутов
playwright-cli unroute [pattern]        # удалить маршруты

Хранилище

playwright-cli state-save [filename]    # сохранить состояние хранилища (cookies, localStorage)
playwright-cli state-load <filename>    # загрузить состояние хранилища

# Файлы cookie
playwright-cli cookie-list [--domain]   # вывести список файлов cookie
playwright-cli cookie-get <name>        # получить файл cookie
playwright-cli cookie-set <name> <val>  # установить файл cookie
playwright-cli cookie-delete <name>     # удалить файл cookie
playwright-cli cookie-clear             # удалить все файлы cookie

# localStorage
playwright-cli localstorage-list        # вывести список записей
playwright-cli localstorage-get <key>   # получить значение
playwright-cli localstorage-set <k> <v> # установить значение
playwright-cli localstorage-delete <k>  # удалить запись
playwright-cli localstorage-clear       # удалить все записи

Инструменты разработчика

playwright-cli console [min-level]      # вывести список сообщений консоли
playwright-cli eval <func> [ref]        # выполнить JavaScript на странице
playwright-cli run-code <code>          # выполнить фрагмент кода Playwright
playwright-cli tracing-start            # начать запись трассировки
playwright-cli tracing-stop             # остановить запись трассировки
playwright-cli video-start              # начать запись видео
playwright-cli video-chapter <title>    # добавить маркер главы в видео
playwright-cli video-stop --filename=f  # остановить запись видео

WebMCP

Страницы могут регистрировать собственные инструменты для агентов через экспериментальный API WebMCP. Инструменты, зарегистрированные страницей, перечисляются в начале снимка страницы, и их можно вызывать напрямую:

playwright-cli webmcp-list                       # вывести список инструментов, зарегистрированных страницей
playwright-cli webmcp-call <name> [--params]     # вызвать инструмент, передав JSON-объект

Названия, описания, схемы и результаты инструментов предоставляются страницей, поэтому считайте их недоверенными входными данными.

Сеансы

По умолчанию CLI хранит профиль браузера в памяти — файлы cookie и состояние хранилища сохраняются между вызовами в рамках сеанса, но теряются при закрытии браузера. Используйте --persistent, чтобы сохранять профиль на диск.

Именованные сеансы

Запускайте несколько экземпляров браузера для разных проектов:

playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list                     # вывести список всех сеансов

Вы можете настроить агент программирования на использование определенного сеанса:

PLAYWRIGHT_CLI_SESSION=todo-app claude .

Управление сеансами

playwright-cli list                     # вывести список всех сеансов
playwright-cli close-all                # закрыть все браузеры
playwright-cli kill-all                 # принудительно завершить все процессы браузеров
playwright-cli -s=name delete-data      # удалить пользовательские данные именованного сеанса

Сеанс без графического интерфейса автоматически завершается после часа без команд, поэтому сеанс, который агент забыл закрыть, не оставляет браузер работающим. Браузеры с графическим интерфейсом и подключенные браузеры никогда не закрываются автоматически. Измените время ожидания с помощью open --idle-timeout=<ms> или timeouts.idle в файле конфигурации; передайте 0, чтобы отключить автоматическое завершение.

Мониторинг

Используйте playwright-cli show, чтобы открыть визуальную панель для наблюдения за всеми запущенными сеансами браузера и управления ими:

playwright-cli show

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

Сетка сеансов — все активные сеансы, сгруппированные по рабочим областям; для каждого отображаются трансляция экрана в реальном времени, имя сеанса, текущий URL и заголовок страницы. Нажмите на любой сеанс, чтобы открыть его в увеличенном виде.
Подробный просмотр сеанса — отображение выбранного сеанса в реальном времени с панелью вкладок, элементами навигации и полным дистанционным управлением. Нажмите в области просмотра, чтобы взять управление мышью и клавиатурой на себя; нажмите Escape, чтобы освободить управление.

Конфигурация

Режим с графическим интерфейсом

По умолчанию CLI запускается без графического интерфейса. Чтобы увидеть браузер:

playwright-cli open https://playwright.dev --headed

Выбор браузера

playwright-cli open --browser=chrome    # использовать определенный браузер
playwright-cli open --browser=firefox
playwright-cli open --browser=webkit
playwright-cli open --browser=msedge

Файл конфигурации

Для расширенных настроек используйте файл конфигурации в формате JSON:

playwright-cli --config path/to/config.json open example.com

CLI также автоматически загружает .playwright/cli.config.json, если этот файл существует. Файл конфигурации поддерживает параметры браузера, параметры контекста, сетевые правила, тайм-ауты и многое другое. Выполните playwright-cli --help, чтобы получить полный список параметров.

Расширение браузера

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

playwright-cli attach --extension

Для этого необходимо установить расширение Playwright.

Краткий справочник

Действие	Команда
Установить CLI	`npm install -g @playwright/cli@latest`
Установить навыки	`playwright-cli install --skills`
Открыть страницу	`playwright-cli open https://example.com`
Нажать на элемент	`playwright-cli click e15`
Ввести текст	`playwright-cli type "hello world"`
Сделать скриншот	`playwright-cli screenshot`
Получить снимок страницы	`playwright-cli snapshot`
Запустить с графическим интерфейсом	`playwright-cli open https://example.com --headed`
Использовать Firefox	`playwright-cli open --browser=firefox`
Наблюдать за сеансами	`playwright-cli show`
Вывести список инструментов WebMCP страницы	`playwright-cli webmcp-list`

Агенты для программирования

Введение

`playwright-cli` и Playwright MCP

Предварительные требования

Установка

Установка навыков

Работа без навыков

Первые шаги

Интерактивная демонстрация

Пошаговый пример ручного использования

Основные команды

Взаимодействие со страницами

Выбор целевых элементов

Скриншоты и снимки

Навигация

Клавиатура и мышь

Вкладки

Сеть

Хранилище

Инструменты разработчика

WebMCP

Сеансы

Именованные сеансы

Управление сеансами

Мониторинг

Конфигурация

Режим с графическим интерфейсом

Выбор браузера

Файл конфигурации

Расширение браузера

Краткий справочник

Что дальше

Введение​

playwright-cli и Playwright MCP​

Предварительные требования​

Установка​

Установка навыков​

Работа без навыков​

Первые шаги​

Интерактивная демонстрация​

Пошаговый пример ручного использования​

Основные команды​

Взаимодействие со страницами​

Выбор целевых элементов​

Скриншоты и снимки​

Навигация​

Клавиатура и мышь​

Вкладки​

Сеть​

Хранилище​

Инструменты разработчика​

WebMCP​

Сеансы​

Именованные сеансы​

Управление сеансами​

Мониторинг​

Конфигурация​

Режим с графическим интерфейсом​

Выбор браузера​

Файл конфигурации​

Расширение браузера​

Краткий справочник​

Что дальше​

Введение

`playwright-cli` и Playwright MCP

Предварительные требования

Установка

Установка навыков

Работа без навыков

Первые шаги

Интерактивная демонстрация

Пошаговый пример ручного использования

Основные команды

Взаимодействие со страницами

Выбор целевых элементов

Скриншоты и снимки

Навигация

Клавиатура и мышь

Вкладки

Сеть

Хранилище

Инструменты разработчика

WebMCP

Сеансы

Именованные сеансы

Управление сеансами

Мониторинг

Конфигурация

Режим с графическим интерфейсом

Выбор браузера

Файл конфигурации

Расширение браузера

Краткий справочник

Что дальше