<中文翻译> playwright-mcp 由于"playwright"是一个知名的自动化测试框架名称，在此上下文中应被视为专有名词并予以保留。因此，最终翻译结果直接保留原名。

Name: playwright-mcp 由于"playwright"是一个知名的自动化测试框架名称，在此上下文中应被视为专有名词并予以保留。因此，最终翻译结果直接保留原名。
Author: cloudflare

作者：cloudflare199 星标更新：2025-11-16

安装使用来源：spider==github.com

项目介绍

Cloudflare Playwright MCP

概述

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

构建和部署

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

安装依赖项：

npm ci

构建：

cd cloudflare
npm run build

部署到 Cloudflare Workers：

cd cloudflare/example
npm ci
npx wrangler deploy

使用 Cloudflare AI Playground

alt text

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 工具<br> 页面已导航至 https://demo.playwright.dev/todomvc/。页面标题是 "React • TodoMVC"。页面快照显示了页面内容，包括一个标题、一个文本框和几个链接。
用户	创建一些待办事项条目
助手	运行 browser_type 工具<br> 新的待办事项条目 "购买杂货" 已创建。页面快照显示了页面的更新内容，包括新的待办事项条目。
用户	很好。现在用鹦鹉风格创建一个待办事项
助手	运行 browser_type 工具<br> 新的待办事项条目 "波莉想要一块饼干" 已用鹦鹉风格创建。页面快照显示了页面的更新内容，包括新的待办事项条目。
用户	再用尤达风格创建一个待办事项
助手	运行 browser_type 工具<br> 新的待办事项条目 "我必须去散步" 已用尤达风格创建。页面快照显示了页面的更新内容，包括新的待办事项条目。
用户	截屏
助手	运行 browser_take_screenshot 工具<br> 当前页面的截图已被拍摄。截图是PNG格式，大小为56KB。
用户	现在点击鹦鹉待办事项条目的复选框
助手	运行 browser_click 工具<br> 鹦鹉待办事项条目 "波莉想要一块饼干" 的复选框已被点击。页面快照显示了页面的更新内容，复选框现在被选中。
用户	截屏
助手	运行 browser_take_screenshot 工具<br> 当前页面的截图已被拍摄。截图是PNG格式，大小为58KB。
用户	删除已完成的待办事项条目
助手	运行 browser_click 工具<br> "清除已完成"按钮已被点击。页面快照显示了页面的更新内容，已完成的待办事项条目 "波莉想要一块饼干" 已被删除。
用户	最后一次截屏
助手	运行 browser_take_screenshot 工具<br> 当前页面的最后一次截图已被拍摄。截图是PNG格式，大小为50KB。

使用 Claude Desktop

目前，Claude Desktop 仅支持本地MCP服务器。要使用 playground-mcp 与Claude Desktop，我们使用 mcp-remote，这是一个代理远程MCP服务器并在本地暴露它们的工具。使用以下配置：

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

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

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

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

以下是打开TODO演示应用、添加“买柠檬”并截图的会话示例，利用playwright-mcp工具和Browser Rendering：

alt text

在VSCode中配置

你可以通过 VS Code CLI 安装Playwright MCP服务器：

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

# 对于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代理一起使用。

工具模式

工具有两种模式：

快照模式（默认）：使用可访问性快照以提高性能和可靠性
视觉模式：使用截图进行基于视觉的交互

视觉模式最适合能够使用提供的截图通过XY坐标空间与元素进行交互的计算机使用模型。

browser_snapshot
- 标题：页面快照
- 描述：捕获当前页面的可访问性快照，这比截图更好
- 参数：无
- 只读：true
browser_click
- 标题：点击
- 描述：执行网页上的点击操作
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - ref (字符串)：从页面快照中获取的确切目标元素引用
  - doubleClick (布尔值，可选)：是否执行双击而不是单击
- 只读：false
browser_drag
- 标题：拖动鼠标
- 描述：在两个元素之间执行拖放操作
- 参数：
  - startElement (字符串)：用于获取与元素交互权限的人类可读源元素描述
  - startRef (字符串)：从页面快照中获取的确切源元素引用
  - endElement (字符串)：用于获取与元素交互权限的人类可读目标元素描述
  - endRef (字符串)：从页面快照中获取的确切目标元素引用
- 只读：false
browser_hover
- 标题：悬停鼠标
- 描述：在页面上悬停元素
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - ref (字符串)：从页面快照中获取的确切目标元素引用
- 只读：true
browser_type
- 标题：输入文本
- 描述：向可编辑元素输入文本
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - ref (字符串)：从页面快照中获取的确切目标元素引用
  - text (字符串)：要输入到元素中的文本
  - submit (布尔值，可选)：是否提交输入的文本（之后按Enter键）
  - slowly (布尔值，可选)：是否逐字符输入。对于触发页面中的键处理程序很有用，默认情况下整个文本一次性填充。
- 只读：false
browser_select_option
- 标题：选择选项
- 描述：在下拉菜单中选择一个选项
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - ref (字符串)：从页面快照中获取的确切目标元素引用
  - values (数组)：要在下拉菜单中选择的值数组。这可以是一个值或多个值。
- 只读：false
browser_press_key
- 标题：按下按键
- 描述：按下键盘上的按键
- 参数：
  - key (字符串)：要按下的按键名称或要生成的字符，如 ArrowLeft 或 a
- 只读：false
browser_wait_for
- 标题：等待
- 描述：等待文本出现或消失或指定时间过去
- 参数：
  - time (数字，可选)：等待的时间（秒）
  - text (字符串，可选)：要等待的文本
  - textGone (字符串，可选)：要等待消失的文本
- 只读：true
browser_file_upload
- 标题：上传文件
- 描述：上传一个或多个文件
- 参数：
  - paths (数组)：要上传文件的绝对路径。可以是一个文件或多个文件。
- 只读：false
browser_handle_dialog
- 标题：处理对话框
- 描述：处理对话框
- 参数：
  - accept (布尔值)：是否接受对话框。
  - promptText (字符串，可选)：提示对话框时的提示文本。
- 只读：false

</details> <details> <summary>导航</summary>

browser_navigate
- 标题：导航到URL
- 描述：导航到URL
- 参数：
  - url (字符串)：要导航到的URL
- 只读：false
browser_navigate_back
- 标题：返回
- 描述：返回到上一页
- 参数：无
- 只读：true
browser_navigate_forward
- 标题：前进
- 描述：前进到下一页
- 参数：无
- 只读：true

</details> <details> <summary>资源</summary>

browser_take_screenshot
- 标题：截屏
- 描述：截取当前页面的屏幕截图。你不能根据屏幕截图执行操作，使用 browser_snapshot 进行操作。
- 参数：
  - raw (布尔值，可选)：是否不压缩返回（PNG格式）。默认为false，返回JPEG图像。
  - filename (字符串，可选)：保存屏幕截图的文件名。如果未指定，默认为 page-{timestamp}.{png|jpeg}。
  - element (字符串，可选)：用于获取截图元素权限的人类可读元素描述。如果没有提供，截图将针对视口。如果提供了元素，则必须提供引用。
  - ref (字符串，可选)：从页面快照中获取的确切目标元素引用。如果没有提供，截图将针对视口。如果提供了引用，则必须提供元素。
- 只读：true
browser_pdf_save
- 标题：保存为PDF
- 描述：将页面保存为PDF
- 参数：
  - filename (字符串，可选)：保存PDF的文件名。如果未指定，默认为 page-{timestamp}.pdf。
- 只读：true
browser_network_requests
- 标题：列出网络请求
- 描述：返回自加载页面以来的所有网络请求
- 参数：无
- 只读：true
browser_console_messages
- 标题：获取控制台消息
- 描述：返回所有控制台消息
- 参数：无
- 只读：true

</details> <details> <summary>实用工具</summary>

browser_install
- 标题：安装配置中指定的浏览器
- 描述：安装配置中指定的浏览器。如果你遇到关于浏览器未安装的错误，请调用此工具。
- 参数：无
- 只读：false
browser_close
- 标题：关闭浏览器
- 描述：关闭页面
- 参数：无
- 只读：true
browser_resize
- 标题：调整浏览器窗口大小
- 描述：调整浏览器窗口大小
- 参数：
  - width (数字)：浏览器窗口宽度
  - height (数字)：浏览器窗口高度
- 只读：true

</details> <details> <summary>标签页</summary>

browser_tab_list
- 标题：列出标签页
- 描述：列出浏览器标签页
- 参数：无
- 只读：true
browser_tab_new
- 标题：打开新标签页
- 描述：打开新标签页
- 参数：
  - url (字符串，可选)：新标签页中要导航到的URL。如果没有提供，新标签页将是空白的。
- 只读：true
browser_tab_select
- 标题：选择标签页
- 描述：通过索引选择标签页
- 参数：
  - index (数字)：要选择的标签页索引
- 只读：true
browser_tab_close
- 标题：关闭标签页
- 描述：关闭标签页
- 参数：
  - index (数字，可选)：要关闭的标签页索引。如果不提供，将关闭当前标签页。
- 只读：false

</details> <details> <summary>测试</summary>

browser_generate_playwright_test
- 标题：生成Playwright测试
- 描述：为给定场景生成Playwright测试
- 参数：
  - name (字符串)：测试的名称
  - description (字符串)：测试的描述
  - steps (数组)：测试的步骤
- 只读：true

</details> <details> <summary>视觉模式</summary>

browser_screen_capture
- 标题：截屏
- 描述：截取当前页面的屏幕截图
- 参数：无
- 只读：true
browser_screen_move_mouse
- 标题：移动鼠标
- 描述：将鼠标移动到给定位置
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - x (数字)：X坐标
  - y (数字)：Y坐标
- 只读：true
browser_screen_click
- 标题：点击
- 描述：点击左键
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - x (数字)：X坐标
  - y (数字)：Y坐标
- 只读：false
browser_screen_drag
- 标题：拖动鼠标
- 描述：拖动左键
- 参数：
  - element (字符串)：用于获取与元素交互权限的人类可读元素描述
  - startX (数字)：起始X坐标
  - startY (数字)：起始Y坐标
  - endX (数字)：结束X坐标
  - endY (数字)：结束Y坐标
- 只读：false
browser_screen_type
- 标题：输入文本
- 描述：输入文本
- 参数：
  - text (字符串)：要输入到元素中的文本
  - submit (布尔值，可选)：是否提交输入的文本（之后按Enter键）
- 只读：false
browser_press_key
- 标题：按下按键
- 描述：按下键盘上的按键
- 参数：
  - key (字符串)：要按下的按键名称或要生成的字符，如 ArrowLeft 或 a
- 只读：false
browser_wait_for
- 标题：等待
- 描述：等待文本出现或消失或指定时间过去
- 参数：
  - time (数字，可选)：等待的时间（秒）
  - text (字符串，可选)：要等待的文本
  - textGone (字符串，可选)：要