浏览器自动化测试工具

Cloudflare剧作家MCP

概述

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

构建和部署

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

1. 安装依赖项：

npm ci

2. 构建：

cd cloudflare
npm run build

3. 部署到Cloudflare Workers：

cd cloudflare/example
npm ci
npx wrangler deploy

与Cloudflare AI游乐场一起使用

Cloudflare游乐场AI 是使用Workers AI中可用的LLM模型测试MCP服务器的好方法。

• 导航到https://playground.ai.cloudflare.com/
• 确保模型设置为 llama-3.3-70b-instruct-fp8-fast
• 在 MCP服务器，set 统一资源定位符 到 https://[my-mcp-url].workers.dev/sse
• 点击 连接
• 状态应更新为 连接 它应该列出14个可用的工具

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

[！提示] 为了获得最佳效果，给出由一个动作组成的简单说明，例如“创建新的待办事项条目”、“转到cloudflare网站”、“截图”

对话示例：

与Claude Desktop一起使用

截至目前， 克劳德桌面版 仅支持本地MCP服务器。使用 playground-mcp 使用Claude Desktop，我们可以 mcp遥控器，一种代理远程MCP服务器并在本地公开它们的工具。使用以下配置：

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

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

3. 保存配置文件并 重新启动 Claude Desktop应用更改。

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

以下是一个打开TODO演示应用程序的会话示例，添加“购买柠檬”并进行截图，利用剧作家mcp工具和浏览器渲染：

在VSCode中配置

您可以使用安装Playwright MCP服务器 VS代码CLI:

# 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代理。

与光标一起使用

默认情况下，当 imageResponses 设置为 "auto"，服务器将禁用Cursor客户端的内联图像响应。要在Cursor中启用内联屏幕截图，您需要覆盖此行为：

如果您正在运行自己的Cloudflare Worker，请通过 imageResponses: "allow" 创建MCP代理时：

export const PlaywrightMCP = createMcpAgent(env.BROWSER, {
  imageResponses: 'allow',
} as any);

工具模式

这些工具有两种模式：

1. 快照模式 （默认）：使用可访问性快照以获得更好的性能和可靠性
2. 视觉模式：使用屏幕截图进行基于视觉的交互

视觉模式与能够使用以下方式与元素交互的计算机使用模型配合使用效果最佳 X Y坐标空间，基于提供的屏幕截图。