@bearbuild/playwright-mcp

Cloudflare 剧作家 MCP

概览

该项目利用Playwright进行自动浏览器测试,并与Cloudflare Workers整合, 浏览器渲染 财务报告和审定财务报表 @cloudflare/playwright 用于部署.

建设和部署

按照这些步骤设立和部署该项目:

1. 安装依赖性 :

npm ci

2. 构建 :

cd cloudflare
npm run build

3. 部署到云浮工人:

cd cloudflare/example
npm ci
npx wrangler deploy

用 Cloudflare AI 游戏场

Cloudflare操场 AI 是使用工人AI中可用的LLM模型测试MCP服务器的好方法.

• 导航到 https://playground.ai.cloudflare.com/ 页面存档备份,存于互联网档案馆
• 确保模式设定为 llama-3.3-70b-instruct-fp8-fast
• 单位 MCP 服务器设置 網址 改为 https://[my-mcp-url].workers.dev/sse
• 点击 连接
• 状况应更新至 已连接 它应列出14个可用的工具

你现在可以开始与模型互动,它将运行必要的工具来完成所要求的任务.

[TIP] 对于最佳结果,给出由单个动作组成的简单指令,如"创建新的待办事宜条目","去云浮站","取一截图"等

对话的例子:

作用	消息
用户	去演示. playwright.dev/todomvc
助理	运行浏览器 navigate 工具 页面已被导航到 https://demo.playwright.dev/todomvc/ (中文(简体) ),页面标题为"React ^ TodoMVC". 页面快照显示页面内容,包括标题,文本框,以及多个链接.
用户	创建一些待办事宜条目
助理	运行浏览器 类型工具 新建了"买杂货"的待办事宜条目. 页面快照显示页面更新内容,包括新待办事宜条目.
用户	不错 现在用鹦鹉风格创建待办事宜
助理	运行浏览器 类型工具 以鹦鹉风格创建了"Polly想吃快克"的新多克条目. 页面快照显示页面更新内容,包括新待办事宜条目.
用户	用 Yoda 风格创建另一个待办事宜
助理	运行浏览器 类型工具 一个新的"行走,我必须走"的待办事宜条目是以尤达风格创建的. 页面快照显示页面更新内容,包括新待办事宜条目.
用户	拍个截图
助理	运行浏览器 take 截图工具 已拍摄当前页面的截图 。 截图采用PNG格式,大小为56KB.
用户	现在单击鹦鹉待办事宜条目的复选框
助理	运行浏览器 单击工具 鹦鹉待办事宜条目"Polly想要个快克"的复选框已点击. 页面快照显示页面的更新内容, 现在选中复选框 .
用户	拍个截图
助理	运行浏览器 take 截图工具 已拍摄当前页面的截图 。 截图采用PNG格式,尺寸为58KB.
用户	删除已完成的待办事宜条目
助理	运行浏览器 单击工具 "Clear finished"按钮已点击. 页面快照显示页面的更新内容,所完成的待办事宜条目"Polly想要个快克"被移除.
用户	最后一张截图
助理	运行浏览器 take 截图工具 已拍摄当前页面的最后截图 。 截图采用PNG格式并大小为50KB.

与 Claude 桌面使用

现在, 克劳德桌面 只支持本地的MCP服务器. 用于 playground-mcp 我们用克洛德桌面 mcp 远程,这个工具可以代理远程MCP服务器并在本地曝光. 使用以下配置 :

1. 打开克劳德桌面的配置文件 .
2. 在下方添加以下 JSON 片断 mcpServers 节:

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

3. 保存配置文件并 重新启动 克劳德桌面应用更改.

这个设置确保了克洛德桌面可以与Cloudflare Playwright MCP服务器进行通信.

以下是一个会话打开TODO演示应用,加入"购买柠檬"并进行截图,利用剧作家-mcp工具和浏览器Rendering:

在 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 服务器将可用您的 GitHub 副驾驶代理在 VS 代码中使用 .

用光标

默认时间 imageResponses 设置为 "auto",服务器将禁用 Cursor 客户端的内置图像响应。 要启用 Cursor 中的内置截图, 您需要覆盖此行为 :

如果你经营自己的云旗工人,请通过 imageResponses: "allow" 创建 MCP 代理时 :

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

工具模式

这些工具有两种模式:

1. 抓图模式 (默认):利用无障碍快照提高性能和可靠性
2. 愿景模式: 使用截图进行视觉交互

愿景 模式与能够与使用元素交互的计算机使用模式最有效 X Y 坐标空间,基于所提供的截图.