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

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

MCP-Playwright - это инструмент с открытым исходным кодом, разработанный компанией ExecuteAutomation и размещенный на GitHub. Он основан на Playwright и Модель Контекстный протокол (MCP) протокол, позволяющий пользователям реализовать автоматизацию браузера и тестирование API с помощью команд на естественном языке. Этот инструмент подходит как для разработчиков, так и для тестировщиков и позволяет подключать Клод и другие большие языковые модели (БЯМ) для управления действиями браузера, такими как открытие веб-страницы, нажатие кнопки, заполнение формы, создание скриншота или отправка запроса API с помощью простого текста. Это не требует от пользователей написания сложного кода, что снижает порог использования. В настоящее время проект находится на стадии разработки, функции постепенно улучшаются, приглашаем сообщество внести свой вклад в код.

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

• Автоматизация браузера: Поддержка перехода на определенную веб-страницу, нажатие на элемент, заполнение поля ввода, выбор выпадающего параметра и т.д.
• Тестирование API: Может отправлять запросы GET, POST, PUT, PATCH, DELETE и проверять ответ.
• функция скриншота: Вся веб-страница или определенная область может быть перехвачена и сохранена в виде изображения.
• Выполнить JavaScript: Возможность запускать пользовательский код JavaScript в браузере.
• Получение журнала консоли: Извлекает из браузера информацию об ошибках, предупреждениях или отладке.
• управление на естественном языке: Подключается к таким моделям, как Claude, по протоколу MCP и работает с текстовыми командами.

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

Для работы MCP-Playwright требуется простая установка и настройка. Ниже приведены подробные шаги, которые помогут вам быстро приступить к работе.

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

Чтобы запустить этот инструмент, необходимо подготовить среду и установить соответствующие компоненты. Ниже подробно описано, как это сделать:

1. Проверка окружения
   • Убедитесь, что на вашем компьютере установлен Node.js (рекомендуется последняя стабильная версия).
   • Необходим клиент с поддержкой MCP, например Claude Desktop Client.
   • Установите Git для загрузки кода (необязательно).
2. Загрузите проект (опциональная ручная установка)
   • Откройте терминал и запустите его:

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • Перейдите в каталог проектов:

     cd mcp-playwright
     

3. Установка зависимостей
   • Запустите в каталоге проекта:

     npm install
     

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

     npm install -g @executeautomation/playwright-mcp-server
     

   • Это приведет к глобальной установке сервера.
5. Установка через Smithery (для Claude Desktop)
   • Выполните следующую команду, чтобы автоматически установить и настроить его:

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Настройка рабочего стола Claude
   • Найдите файл конфигурации для Claude Desktop (обычно он находится в папке Claude в каталоге пользователя под именем claude-desktop-config.json).
   • Добавьте следующее:

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • После сохранения и перезапуска Claude Desktop на интерфейсе появится кнопка "Attach from MCP", свидетельствующая об успешной настройке.

Как использовать

После установки вы можете использовать команды на естественном языке для управления браузером или тестирования API.

Автоматизация браузера

• Откройте страницу
  Введите на рабочем столе Клода:

打开网页 https://example.com

Инструмент запускает браузер и загружает страницу.

• щелчок по элементу
  Вход:

点击页面上的登录按钮，使用选择器 #loginBtn

Он найдет идентификатор loginBtn нажмите на кнопку и щелкните по ней.

• Заполните форму
  Вход:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

Инструмент автоматически заполняет содержимое.

• скриншот (вычислительная техника)
  Вход:

截取整个网页，保存为 "page.png"

Снимок экрана сохраняется в текущем каталоге.

• Выполнение JavaScript
  Вход:

在浏览器中执行 JavaScript 代码 "document.title"

Возвращает заголовок страницы.

• Получение журналов
  Вход:

获取浏览器控制台日志，只显示错误信息

Инструмент возвращает журнал ошибок.

Тестирование API

• Отправить GET-запрос
  Вход:

对 https://api.example.com/data 发送 GET 请求

Возвращает код состояния и данные.

• Отправить POST-запрос
  Вход:

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

Инструмент подтвердит результаты.

• Обновленные данные
  Вход:

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

Данные будут обновлены.

пример работы

Предположим, вы хотите протестировать процесс входа в систему:

1. Вход:

打开网页 http://eaapp.somee.com

2. Вход:

点击页面上的登录链接，使用选择器 #loginLink

3. Вход:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. Вход:

截取整个网页，保存为 "login_result.png"

5. Вход:

关闭浏览器

Весь процесс осуществляется с помощью естественного языка и является простым и интуитивно понятным.

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

В проекте используется Jest для тестирования. Если вы хотите проверить функциональность, вы можете запустить тесты:

• Введите его в терминал:

npm test

• Отчет о покрытии диапазона:

  npm run test:coverage
  

Отчет о тестировании создается в coverage Каталог.

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

• Сложные запросы аутентификации (например, OAuth) в настоящее время не поддерживаются инструментом.
• Если у вас возникнут проблемы, обратитесь к официальной документации по адресу https://executeautomation.github.io/mcp-playwright/.
• Проект имеет открытый исходный код, вы можете создавать форки и вносить предложения по улучшению.