Playwright Cloudflare Workers AI自动化服务器

Cloudflare Playwright MCP

概述

该项目利用 Playwright 进行自动化浏览器测试，并与 Cloudflare Workers、Browser Rendering 和 @cloudflare/playwright 集成，以便进行部署。

构建和部署

按照以下步骤设置并部署项目：

1. 安装依赖项：

npm ci

1. 部署到 Cloudflare Workers：

npx wrangler deploy

与 Cloudflare AI Playground 一起使用

Cloudflare playground AI 是一个很好的方式，可以使用 Workers AI 中可用的 LLM 模型来测试 MCP 服务器。

• 导航到 https://playground.ai.cloudflare.com/
• 确保模型设置为 llama-3.3-70b-instruct-fp8-fast
• 在 MCP Servers 中，将 URL 设置为 https://[my-mcp-url].workers.dev/sse
• 点击 Connect
• 状态应更新为 Connected 并且应该列出 14 个可用工具

现在您可以开始与模型交互，它会运行必要的工具来完成所请求的任务。

[!TIP]
为了获得最佳效果，请提供由单一动作组成的简单指令，例如，“创建一个新的待办事项条目”，“访问 cloudflare 网站”，“截取屏幕截图”

对话示例：

角色	消息
用户	转到 demo.playwright.dev/todomvc
助手	运行 browser_navigate 工具页面已导航至 https://demo.playwright.dev/todomvc/。页面标题为 "React • TodoMVC"。页面快照显示了页面内容，包括一个标题、一个文本框和几个链接。
用户	创建一些待办事项条目
助手	运行 browser_type 工具已创建一个新的待办事项条目 "Buy groceries"（购买杂货）。页面快照显示了更新后的页面内容，包括新的待办事项条目。
用户	很好。现在以鹦鹉风格创建一个待办事项
助手	运行 browser_type 工具已以鹦鹉风格创建了一个新的待办事项条目 "Polly wants a cracker"（波利想要一块饼干）。页面快照显示了更新后的页面内容，包括新的待办事项条目。
用户	再以尤达风格创建一个待办事项
助手	运行 browser_type 工具已以尤达风格创建了一个新的待办事项条目 "A walk, I must take"（我必须散步）。页面快照显示了更新后的页面内容，包括新的待办事项条目。
用户	截个图
助手	运行 browser_take_screenshot 工具 已截取当前页面的屏幕截图。截图格式为 PNG，大小为 56KB。
用户	现在点击鹦鹉待办事项条目的复选框
助手	运行 browser_clickt 工具已点击鹦鹉待办事项条目 "Polly wants a cracker" 的复选框。页面快照显示了更新后的页面内容，复选框现在已被选中。
用户	截个图
助手	运行 browser_take_screenshot 工具 已截取当前页面的屏幕截图。截图格式为 PNG，大小为 58KB。
用户	移除已完成的待办事项
助手	运行 browser_clickt 工具已点击“清除已完成”按钮。页面快照显示了更新后的页面内容，已完成的待办事项条目 "Polly wants a cracker" 已被移除。
用户	最后再截一次图
助手	运行 browser_take_screenshot 工具 已截取当前页面的最终屏幕截图。截图格式为 PNG，大小为 50KB。

使用 Claude Desktop

截至目前，Claude Desktop 仅支持本地 MCP 服务器。要通过 Claude Desktop 使用 playground-mcp，我们利用 mcp-remote，这是一个代理远程 MCP 服务器并将其暴露给本地的工具。请使用以下配置：

1. 打开 Claude Desktop 的配置文件。
2. 在 mcpServers 部分下添加以下 JSON 代码片段：

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

1. 保存配置文件并重启 Claude Desktop 以应用更改。

此设置确保 Claude Desktop 可以与 Cloudflare Playwright MCP 服务器通信。

以下是一个会话示例，它打开了 TODO 演示应用程序，添加了“buy lemons”，并进行了截图，利用了 playwright-mcp 工具和浏览器渲染：

在 VSCode 中配置

你可以使用 VS Code CLI 安装 Playwright MCP 服务器：

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

安装完成后，Playwright MCP 服务器将可以在 VS Code 中与你的 GitHub Copilot 代理一起使用。