“Microsoft официально выпустила Playwright Model Context Protocol (MCP, протокол контекста модели) — революционный инструмент, позволяющий большим языковым моделям (LLM) работать с веб-страницами, используя структурированные снимки доступности (structured accessibility snapshots).
Это изобретение устраняет необходимость в пиксельных входных данных или визуальных моделях, делая автоматизацию браузера быстрой, детерминированной и удобной для LLM.
Для интересующихся — матчасть на Хабре
Далее подробно рассмотрим, как настроить и использовать сервер Playwright MCP, а также приведем практические примеры с промптами.
Что это
Playwright MCP — это сервер, предоставляющий возможности автоматизации браузера с помощью дерева доступности Playwright. MCP позволяет LLM взаимодействовать с веб-страницами через структурированные данные, минуя необходимость в скриншотах или визуально настраиваемых моделях. Такой подход является быстрым, простым и детерминированным, что делает его идеальным для таких задач, как веб-навигация, заполнение форм, извлечение данных и автоматизированное тестирование.
Настройка
Понадобится:
- Node.js (v16 или более поздняя версия)
- Playwright (командой
npm install playwright)
Установка
1. Установите пакет Playwright MCP глобально:
npm install -g @playwright/mcp
2. Проверьте установку:
npx @playwright/mcp --version
Базовая конфигурация
Чтобы запустить MCP Server, создайте конфигурационный файл (`mcp.config.json`) и вставьте туда:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Запустите сервер:
npx @playwright/mcp
Запуск в безголовом режиме
Для выполнения фоновых или пакетных операций можно запустить браузер в безголовом режиме, добавив параметр --headless:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--headless"
]
}
}
}
Запуск в визуальном режиме
Если вам необходимо визуальное взаимодействие (например нажатие в точке с определенными координатами), включите режим Vision Mode, добавив флаг --vision:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--vision"
]
}
}
}
Примеры промптов
Переход по URL
Промпт: «Перейди на сайт https://example.com«.
Запрос:
{
"tool": "browser_navigate",
"parameters": {
"url": "https://example.com"
}
}
Ответ:
{
"status": "success",
"message": "Navigated to https://example.com"
}
Клик по элементу
Промпт: «Нажми кнопку «Отправить» на странице«.
Запрос:
{
"tool": "browser_click",
"parameters": {
"element": "Submit button",
"ref": "button#submit"
}
}
Ответ:
{
"status": "success",
"message": "Clicked element button#submit"
}
Заполнение формы
Промпт: «Введи в поле поиска «Playwright MCP» и отправь форму«.
Запрос:
{
"tool": "browser_type",
"parameters": {
"element": "Search input",
"ref": "input#search",
"text": "Playwright MCP",
"submit": true
}
}
Ответ:
{
"status": "success",
"message": "Typed 'Playwright MCP' into input#search and submitted"
}
Захват снимка доступности
Промпт: «Записать снепшот доступности текущей страницы«.
Запрос:
{
"tool": "browser_snapshot"
}
Ответ:
{
"status": "success",
"snapshot": {
"title": "Example Domain",
"url": "https://example.com",
"elements": [
{
"role": "heading",
"name": "Example Domain",
"ref": "h1"
},
{
"role": "link",
"name": "More information...",
"ref": "a"
}
]
}
}
Сохранение страницы в формате PDF
Промпт: «Сохранить текущую страницу в формате PDF«.
Запрос:
{
"tool": "browser_save_as_pdf"
}
Ответ:
{
"status": "success",
"message": "Page saved as PDF",
"filePath": "/path/to/output.pdf"
}
Визуальный режим — клик по координатам
Промпт: «Нажми на координаты (100, 200) на странице«.
Запрос:
{
"tool": "browser_click",
"parameters": {
"x": 100,
"y": 200
}
}
Ответ:
{
"status": "success",
"message": "Clicked at coordinates (100, 200)"
}
Расширенные сценарии использования
Автоматизация
Промпт: «Напиши тестовый сценарий входа на сайт: перейти на страницу входа, ввести имя пользователя и пароль и нажать кнопку входа«.
Сгенерированные шаги:
1. Перейти на страницу входа в систему.
2. Ввести имя пользователя.
3. Ввести пароль.
4. Нажать кнопку входа в систему.
Последовательность запросов:
[
{
"tool": "browser_navigate",
"parameters": {
"url": "https://example.com/login"
}
},
{
"tool": "browser_type",
"parameters": {
"element": "Username input",
"ref": "input#username",
"text": "testuser"
}
},
{
"tool": "browser_type",
"parameters": {
"element": "Password input",
"ref": "input#password",
"text": "password123"
}
},
{
"tool": "browser_click",
"parameters": {
"element": "Login button",
"ref": "button#login"
}
}
]
Извлечение данных
Промпт: «Извлечь название и цену товара со страницы товара«.
Запрос:
{
"tool": "browser_snapshot"
}
Ответ:
{
"status": "success",
"snapshot": {
"title": "Product Page",
"url": "https://example.com/product",
"elements": [
{
"role": "heading",
"name": "Awesome Product",
"ref": "h1"
},
{
"role": "text",
"name": "$99.99",
"ref": "span.price"
}
]
}
}
Многоэтапные процессы
Промпт: «Перейти на дашборд, нажать ссылку «Настройки» и изменить тему на темную”.
Сгенерированные шаги:
1. Перейти на дашборд.
2. Нажать ссылку «Настройки».
3. Выбрать темную тему.
Последовательность запросов:
[
{
"tool": "browser_navigate",
"parameters": {
"url": "https://example.com/dashboard"
}
},
{
"tool": "browser_click",
"parameters": {
"element": "Settings link",
"ref": "a#settings"
}
},
{
"tool": "browser_click",
"parameters": {
"element": "Dark Mode option",
"ref": "input#dark-mode"
}
}
]
Краткая презентация на оф.канале Playwright
