Playwright MCP: Browser Automation MCP Service от Microsoft

Общее введение

Драматург MCP это инструмент с открытым исходным кодом, разработанный компанией Microsoft и размещенный на GitHub. Он позволяет моделям искусственного интеллекта напрямую управлять браузерами, открывая веб-страницы, нажимая на элементы, вводя текст и т. д. через протокол Model Context Protocol (MCP). Инструмент основан на фреймворке Playwright и поддерживает такие браузеры, как Chromium, Firefox и WebKit. Его основные особенности заключаются в том, что он быстрый, легкий и генерирует структурированные данные, не полагаясь на скриншоты или визуальные модели. Playwright MCP особенно хорошо подходит для приложений ИИ, требующих взаимодействия с веб-страницами, таких как автоматизированное тестирование или извлечение данных. Официальная документация обновляется до марта 2025 года, а сам проект активен и популярен среди разработчиков.

Одноименный проект:MCP Playwright: служба MCP, обеспечивающая автоматизацию работы браузера

Список функций

• Поддержка управления браузером: возможность открывать веб-страницы, перемещаться по страницам, нажимать на элементы и т. д.
• Создание структурированных данных: вывод данных через снимки доступности, скриншоты не требуются.
• Предусмотрено два режима: стандартный режим моментального снимка и режим видения.
• Снимок экрана и сохранение: вы можете сделать снимок экрана страницы или сохранить ее в формате PDF.
• Ввод и управление: поддержка ввода текста, нажатия клавиш, перетаскивания и других функций.
• Совместимость с режимом headless: вы можете запускать браузер в фоновом режиме без отображения интерфейса.

Использование помощи

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

Процесс установки

1. Подготовка среды
   Сначала установите Node.js (рекомендуется последняя версия LTS, например, v22). Проверьте версию с помощью:

node -v

Если у вас его нет, посетите официальный сайт Node.js, чтобы загрузить и установить его.

2. Установка Playwright MCP
   Выполните следующую команду в терминале:

npm install -g @playwright/mcp

Или просто используйте последнюю версию:

npx @playwright/mcp@latest

3. Запустите сервер
   Введите команду для запуска:

npx @playwright/mcp@latest

По умолчанию используется режим с заголовками (отображение окна браузера). Если вы хотите использовать режим без заголовков, добавьте параметр:

npx @playwright/mcp@latest --headless

4. Настройка клиента AI
   Если ваш инструмент искусственного интеллекта поддерживает MCP (например, некоторые клиенты больших моделей), вам необходимо отредактировать файл конфигурации. Пример:

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

После сохранения ИИ сможет вызывать браузер через MCP.

5. Конфигурация для немониторных сред
   В среде Linux без монитора можно использовать режим клиент-сервер. Начните с запуска на машине с монитором:

npx playwright run-server

В результате будет получен адрес WebSocket, например ws://localhost:port/. а затем добавляется в конфигурацию MCP:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Как использовать основные функции

В Playwright MCP есть два режима: режим моментального снимка и визуальный режим. Ниже они описаны отдельно.

Режим моментального снимка (по умолчанию)

Этот режим работает с доступными моментальными снимками, которые являются быстрыми и стабильными. Ниже перечислены часто используемые инструменты:

1. Откройте страницу

• Инструкции:browser_navigate "https://example.com"
• Действие: Браузер открывает указанный URL-адрес.
• Выход: Возвращает статус загрузки страницы.

2. щелчок по элементу

• Инструкции:browser_click "登录按钮" "ref123"
• Действие: Щелкните снимок, отмеченный ref123 элемента (требуется описание элемента и цитирование).
• Примечание: ссылки даны на основе данных моментальных снимков.

3. вход

• Инструкции:browser_type "用户名输入框" "ref456" "myuser" true
• Операция: В ref456 в поле ввода, а затем нажмите Enter (true (указывает на представление).

4. Сохранить как PDF

• Инструкции:browser_save_as_pdf
• Действие: сохранение текущей страницы в виде PDF-файла.

5. время ожидания

• Инструкции:browser_wait 5
• Операция: Подождите 5 секунд (максимум 10 секунд).

визуальный образ

грунтовка с --vision Параметры:

npx @playwright/mcp@latest --vision

Эта модель работает со скриншотами и координатами и подходит для визуальных моделей. Часто используемые инструменты:

1. Страница перехвата
   • Инструкции:browser_screenshot
   • Действие: Создайте скриншот текущей страницы.
2. Нажмите на координаты
   • Инструкции:browser_click 100 200
   • Действие: Нажмите на координаты (100, 200).
3. операция перетаскивания
   • Инструкции:browser_drag 50 50 150 150
   • Действие: Перетащить из (50, 50) в (150, 150).
4. вход
   • Инструкции:browser_type "hello" true
   • Действие: введите "hello" и нажмите Enter.

Пример потока операций

Предположим, вы хотите войти на сайт:

1. Запустите сервер:

npx @playwright/mcp@latest --headless

2. Откройте страницу входа в систему:

• Инструкции:browser_navigate "https://example.com/login"

3. Введите имя пользователя и пароль (режим моментального снимка):

• Инструкции:browser_type "用户名" "ref1" "myuser" false
• Инструкции:browser_type "密码" "ref2" "mypassword" true

4. Нажмите Вход (визуальный режим):

• Переключение режимов: перезапуск сервера плюс --vision
• Инструкции:browser_click 300 400

5. Результаты проверки:

• Инструкции:browser_snapshot(режим моментального снимка) или browser_screenshot(визуальный режим).

предостережение

• Режим моментального снимка более надежен, чем визуальный режим, но требует ссылок на элементы.
• Визуальная модель подходит для моделей ИИ с координатами.
• Режим без заголовков подходит для пакетных задач, а режим с заголовками облегчает отладку.

сценарий применения

1. Веб-навигация и заполнение форм
   ИИ автоматически открывает веб-страницы, заполняет формы и отправляет их, что делает его подходящим для массовой регистрации или тестирования входа в систему.
2. извлечение данных
   Получайте структурированные данные с динамических веб-страниц, например, цены или отзывы.
3. автоматизированное тестирование
   Проверьте правильность функционирования страницы, например, нажатия кнопок или переходы по страницам.
4. Интеллектуальное взаимодействие агентов
   Позвольте искусственному интеллекту управлять браузером для выполнения сложных задач, таких как покупки в Интернете.

QA

1. В чем разница между режимом моментальных снимков и визуальным режимом?
   Режим Snapshot работает со структурированными данными и является быстрым и стабильным; визуальный режим использует скриншоты и координаты и подходит для визуального ИИ.
2. Какие браузеры поддерживаются?
   Поддерживаются Chromium, Firefox и WebKit.
3. Нужно написать код?
   Не нужно. Просто отправьте простую команду, и ИИ будет работать.