Cloudflare Playwright MCP

Cloudflare Драматург MCP

Обзор

В этом проекте Playwright используется для автоматизированного тестирования браузера и интегрируется с Cloudflare Workers, Browser Rendering и @cloudflare/playwright для развертывания.

Построить и развернуть

Для настройки и развертывания проекта выполните следующие действия:

1. Установите зависимости:

2. Строить:

3. Развертывание в Cloudflare Workers:

Использование с Cloudflare AI Playground

Cloudflare Playground AI — отличный способ протестировать серверы MCP с использованием моделей LLM, доступных в Workers AI.

• Перейдите по адресу https://playground.ai.cloudflare.com/

• Убедитесь, что модель установлена на llama-3.3-70b-instruct-fp8-fast

• В разделе «Серверы MCP» установите URL -адрес https://[my-mcp-url].workers.dev/sse

• Нажмите «Подключиться».

• Статус должен обновиться до «Подключено» , и должно быть указано 14 доступных инструментов.

Теперь вы можете начать взаимодействовать с моделью, и она запустит необходимые инструменты для выполнения запрошенного.

[!СОВЕТ] Для достижения наилучших результатов давайте простые инструкции, состоящие из одного действия, например, «Создать новую запись в списке дел», «Перейти на сайт Cloudflare», «Сделать снимок экрана».

Пример разговора:

Использовать с Claude Desktop

На данный момент Claude Desktop поддерживает только локальные серверы MCP. Для использования playground-mcp с Claude Desktop мы используем mcp-remote — инструмент, который проксирует удаленные серверы MCP и предоставляет их локально. Используйте следующую конфигурацию:

1. Откройте файл конфигурации для Claude Desktop.

2. Добавьте следующий фрагмент JSON в раздел mcpServers :

3. Сохраните файл конфигурации и перезапустите Claude Desktop, чтобы изменения вступили в силу.

Такая настройка гарантирует, что Claude Desktop сможет взаимодействовать с сервером Cloudflare Playwright MCP.

Вот пример сеанса открытия демонстрационного приложения TODO, добавления «купить лимоны» и создания снимка экрана с использованием инструментов playwright-mcp и рендеринга в браузере:

Настроить в VSCode

Вы можете установить сервер Playwright MCP с помощью VS Code CLI :

После установки сервер Playwright MCP будет доступен для использования с вашим агентом GitHub Copilot в VS Code.

Режимы инструмента

Инструменты доступны в двух режимах:

1. Режим моментальных снимков (по умолчанию): использует моментальные снимки доступности для повышения производительности и надежности.

2. Режим Vision : использует снимки экрана для визуального взаимодействия.

Режим Vision лучше всего работает с компьютерными моделями, которые способны взаимодействовать с элементами, используя координатное пространство XY, судя по предоставленному снимку экрана.

Взаимодействия на основе моментальных снимков

• снимок_браузера

  • Описание: Сделать снимок доступности текущей страницы, это лучше, чем снимок экрана

  • Параметры: Нет

• браузер_щелчок

  • Описание: Выполнить щелчок на веб-странице.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • ref (string): Точная ссылка на целевой элемент из снимка страницы

• браузер_перетаскивание

  • Описание: Выполнение перетаскивания между двумя элементами.

  • Параметры:

    • startElement (строка): понятное человеку описание исходного элемента, используемое для получения разрешения на взаимодействие с элементом.

    • startRef (string): Точная ссылка на исходный элемент из снимка страницы

    • endElement (строка): понятное человеку описание целевого элемента, используемое для получения разрешения на взаимодействие с элементом.

    • endRef (строка): точная ссылка на целевой элемент из снимка страницы

• браузер_hover

  • Описание: Наведите курсор на элемент на странице.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • ref (string): Точная ссылка на целевой элемент из снимка страницы

• тип_браузера

  • Описание: Введите текст в редактируемый элемент.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • ref (string): Точная ссылка на целевой элемент из снимка страницы

    • text (строка): Текст для ввода в элемент.

    • submit (логическое значение, необязательно): следует ли отправить введенный текст (нажмите Enter после этого)

    • slowly (boolean, необязательно): Вводить ли по одному символу за раз. Полезно для запуска обработчиков клавиш на странице. По умолчанию весь текст заполняется сразу.

• выбор_опции_браузера

  • Описание: Выберите вариант в раскрывающемся списке.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • ref (string): Точная ссылка на целевой элемент из снимка страницы

    • values (массив): Массив значений для выбора в раскрывающемся списке. Это может быть одно значение или несколько значений.

• браузер_сделать_скриншот

  • Описание: Сделать снимок экрана текущей страницы. Вы не можете выполнять действия на основе снимка экрана, используйте для действий browser_snapshot.

  • Параметры:

    • raw (boolean, необязательно): Возвращать ли без сжатия (в формате PNG). Значение по умолчанию — false, что возвращает изображение JPEG.

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

    • ref (строка, необязательно): Точная ссылка на целевой элемент из снимка страницы. Если не указано, снимок экрана будет сделан из области просмотра. Если указано ref, элемент также должен быть указан.

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

• захват_экрана_браузера

  • Описание: Сделать снимок экрана текущей страницы.

  • Параметры: Нет

• экран_браузера_перемещение_мыши

  • Описание: Переместить мышь в указанную позицию.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • x (число): координата X

    • y (число): координата Y

• щелчок_по_экрану_браузера

  • Описание: Щелкните левой кнопкой мыши.

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • x (число): координата X

    • y (число): координата Y

• перетаскивание_экрана_браузера

  • Описание: Перетащите левой кнопкой мыши

  • Параметры:

    • element (строка): понятное человеку описание элемента, используемое для получения разрешения на взаимодействие с элементом

    • startX (число): Начальная координата X

    • startY (число): начальная координата Y

    • endX (число): Конечная координата X

    • endY (число): Конечная координата Y

• тип_экрана_браузера

  • Описание: Введите текст

  • Параметры:

    • text (строка): Текст для ввода в элемент.

    • submit (логическое значение, необязательно): следует ли отправить введенный текст (нажмите Enter после этого)

Управление вкладками

• список_вкладок_браузера

  • Описание: Список вкладок браузера

  • Параметры: Нет

• браузер_вкладка_новая

  • Описание: Открыть новую вкладку

  • Параметры:

    • url (строка, необязательно): URL для перехода на новую вкладку. Если не указано, новая вкладка будет пустой.

• выбор_вкладки_браузера

  • Описание: Выберите вкладку по индексу

  • Параметры:

    • index (номер): индекс вкладки для выбора.

• закрыть_вкладку_браузера

  • Описание: Закрыть вкладку

  • Параметры:

    • index (число, необязательно): индекс вкладки для закрытия. Закрывает текущую вкладку, если не указано.

Навигация

• браузер_навигация

  • Описание: Перейдите по URL-адресу

  • Параметры:

    • url (строка): URL-адрес для перехода

• браузер_навигация_назад

  • Описание: Вернуться на предыдущую страницу

  • Параметры: Нет

• браузер_навигация_вперед

  • Описание: Перейти на следующую страницу

  • Параметры: Нет

Клавиатура

• браузер_нажмите_клавишу

  • Описание: Нажмите клавишу на клавиатуре.

  • Параметры:

    • key (строка): название клавиши, которую нужно нажать, или символ, который нужно сгенерировать, например, ArrowLeft``a

Консоль

• сообщения_консоли_браузера

  • Описание: Возвращает все сообщения консоли.

  • Параметры: Нет

Файлы и медиа

• загрузка_файла_браузера

  • Описание: Загрузите один или несколько файлов.

  • Параметры:

    • paths (массив): Абсолютные пути к файлам для загрузки. Может быть одним файлом или несколькими файлами.

• браузер_pdf_сохранить

  • Описание: Сохранить страницу как PDF

  • Параметры: Нет

Коммунальные услуги

• браузер_закрыть

  • Описание: Закрыть страницу

  • Параметры: Нет

• браузер_ожидание

  • Описание: Ожидание в течение указанного времени в секундах.

  • Параметры:

    • time (число): время ожидания в секундах

• изменение_размера_браузера

  • Описание: Изменение размера окна браузера.

  • Параметры:

    • width (число): Ширина окна браузера.

    • height (число): Высота окна браузера.

• диалог_обработки_браузера

  • Описание: Обработка диалога.

  • Параметры:

    • accept (логическое значение): принимать ли диалог.

    • promptText (строка, необязательно): Текст подсказки в случае диалогового окна подсказки.