Coding agents

Введение

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 и позволить ему самостоятельно изучить доступные команды:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

Первые шаги

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

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

Use playwright skills to test https://demo.playwright.dev/todomvc/.
Take screenshots for all successful and failing scenarios.

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

Вы также можете запускать команды вручную, чтобы увидеть, как работает 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]               # open browser, optionally navigate to url
playwright-cli goto <url>               # navigate to a url
playwright-cli click <ref> [button]     # click an element
playwright-cli type <text>              # type text into editable element
playwright-cli fill <ref> <text>        # fill text into editable element
playwright-cli select <ref> <value>     # select an option in a dropdown
playwright-cli check <ref>              # check a checkbox or radio button
playwright-cli uncheck <ref>            # uncheck a checkbox
playwright-cli hover <ref>              # hover over element
playwright-cli drag <startRef> <endRef> # drag and drop between elements
playwright-cli upload <files...>        # upload one or multiple files
playwright-cli close                    # close the page

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

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

playwright-cli snapshot                 # get snapshot with element refs
playwright-cli click e15                # click using a ref

Вы также можете использовать 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                 # capture page snapshot
playwright-cli snapshot --filename=f    # save snapshot to specific file
playwright-cli screenshot               # screenshot of the current page
playwright-cli screenshot [ref]         # screenshot of a specific element
playwright-cli screenshot --filename=f  # save with specific filename
playwright-cli screenshot --hires       # capture using device pixels
playwright-cli pdf                      # save page as PDF

playwright-cli go-back                  # go back
playwright-cli go-forward               # go forward
playwright-cli reload                   # reload the page

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

playwright-cli press <key>              # press a key (e.g. Enter, ArrowLeft)
playwright-cli keydown <key>            # key down
playwright-cli keyup <key>              # key up
playwright-cli mousemove <x> <y>        # move mouse
playwright-cli mousedown [button]       # mouse button down
playwright-cli mouseup [button]         # mouse button up
playwright-cli mousewheel <dx> <dy>     # scroll

Вкладки

playwright-cli tab-list                 # list all tabs
playwright-cli tab-new [url]            # create a new tab
playwright-cli tab-select <index>       # select a tab
playwright-cli tab-close [index]        # close a tab

Сеть

playwright-cli requests                 # list network requests since page load
playwright-cli request <num>            # show full details of a single request
playwright-cli route <pattern> [opts]   # mock network requests
playwright-cli route-list               # list active routes
playwright-cli unroute [pattern]        # remove routes

Хранилище

playwright-cli state-save [filename]    # save storage state (cookies, localStorage)
playwright-cli state-load <filename>    # load storage state

# Cookies
playwright-cli cookie-list [--domain]   # list cookies
playwright-cli cookie-get <name>        # get a cookie
playwright-cli cookie-set <name> <val>  # set a cookie
playwright-cli cookie-delete <name>     # delete a cookie
playwright-cli cookie-clear             # clear all cookies

# localStorage
playwright-cli localstorage-list        # list entries
playwright-cli localstorage-get <key>   # get value
playwright-cli localstorage-set <k> <v> # set value
playwright-cli localstorage-delete <k>  # delete entry
playwright-cli localstorage-clear       # clear all

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

playwright-cli console [min-level]      # list console messages
playwright-cli eval <func> [ref]        # evaluate JavaScript on page
playwright-cli run-code <code>          # run Playwright code snippet
playwright-cli tracing-start            # start trace recording
playwright-cli tracing-stop             # stop trace recording
playwright-cli video-start              # start video recording
playwright-cli video-chapter <title>    # add chapter marker to video
playwright-cli video-stop --filename=f  # stop video recording

WebMCP

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

playwright-cli webmcp-list                       # list tools registered by the page
playwright-cli webmcp-call <name> [--params]     # call one, passing a JSON object

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

Сеансы

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

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

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

playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list                     # list all sessions

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

PLAYWRIGHT_CLI_SESSION=todo-app claude .

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

playwright-cli list                     # list all sessions
playwright-cli close-all                # close all browsers
playwright-cli kill-all                 # forcefully kill all browser processes
playwright-cli -s=name delete-data      # delete user data for a named session

Сеанс без графического интерфейса автоматически завершается после часа без команд, поэтому сеанс, который агент забыл закрыть, не оставляет браузер работающим. Браузеры с графическим интерфейсом и подключенные браузеры никогда не закрываются автоматически. Измените время ожидания с помощью 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    # use specific browser
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`

Coding agents

Введение

`playwright-cli` и Playwright MCP

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

Установка

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

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

Первые шаги

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

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

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

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

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

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

Навигация

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

Вкладки

Сеть

Хранилище

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

WebMCP

Сеансы

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

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

Мониторинг

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

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

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

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

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

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

Что дальше

Введение​

playwright-cli и Playwright MCP​

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

Установка​

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

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

Первые шаги​

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

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

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

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

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

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

Навигация​

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

Вкладки​

Сеть​

Хранилище​

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

WebMCP​

Сеансы​

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

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

Мониторинг​

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

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

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

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

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

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

Что дальше​

Введение

`playwright-cli` и Playwright MCP

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

Установка

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

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

Первые шаги

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

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

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

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

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

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

Навигация

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

Вкладки

Сеть

Хранилище

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

WebMCP

Сеансы

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

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

Мониторинг

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

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

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

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

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

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

Что дальше