使用说明

项目简介

Cloudflare Playwright MCP 是一个基于 Model Context Protocol (MCP) 的服务器实现，它利用 Playwright 强大的浏览器自动化能力，并部署在 Cloudflare Workers 平台之上。该项目旨在为大型语言模型（LLM）客户端提供一套完善的浏览器操作工具，使得 LLM 能够通过调用这些工具与网页进行交互，获取网页信息或执行网页上的操作。

主要功能点

网页浏览: 提供工具让 LLM 客户端可以导航到指定 URL，并获取网页标题和快照。
元素交互: 支持模拟用户在网页上的点击、悬停、输入文本、选择选项、按键等操作。
信息获取: 允许 LLM 客户端获取网页的当前状态快照（包括文本内容和元素结构），以及页面的控制台日志。
截图: 可以为 LLM 客户端提供网页的屏幕截图。
文件上传: 支持模拟文件选择和上传操作。

安装步骤

安装依赖: 确保已安装 Node.js 和 npm，然后克隆仓库到本地，在项目根目录下运行命令安装项目依赖：
```
npm ci
```
部署到 Cloudflare Workers: 您需要安装 Cloudflare Wrangler CLI 并配置 Cloudflare 账号。部署命令如下：
```
npx wrangler deploy
```
部署成功后，Wrangler CLI 会输出您的 MCP 服务器 URL，请记录此 URL。

服务器配置

MCP 服务器主要通过 URL 进行配置，以便 MCP 客户端连接。以下是几种常见 MCP 客户端的配置方法：

1. Cloudflare AI Playground 配置：

打开 Cloudflare AI Playground。
确保模型设置为 'llama-3.3-70b-instruct-fp8-fast' 或其他兼容模型。
在 MCP Servers 设置中，将 URL 字段设置为您部署后获取的 Workers URL，并附加 '/sse' 路径，例如： 'https://[my-mcp-url].workers.dev/sse'。
点击 Connect 按钮，状态应更新为 Connected，并显示可用的工具列表。

2. Claude Desktop 配置（通过 mcp-remote 本地代理）：

Claude Desktop 目前仅支持本地 MCP 服务器。您需要使用 'mcp-remote' 工具将远程 Cloudflare Playwright MCP 服务器代理到本地。
首先，确保已安装 'mcp-remote': 'npm install -g mcp-remote'
打开 Claude Desktop 的配置文件。

在 'mcpServers' 部分添加以下 JSON 配置：

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"  // 替换为您的 Workers URL
      ]
    }
  }
}

保存配置文件并重启 Claude Desktop。

3. VS Code 配置：

在 VS Code 中，使用以下命令添加 MCP 服务器配置：

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

将 'https://[my-mcp-url].workers.dev/sse' 替换为您的 Workers URL。

基本使用方法

配置完成后，您可以在支持 MCP 协议的 LLM 客户端中，通过自然语言指令指示模型调用浏览器工具与网页互动。例如：

"打开 demo.playwright.dev/todomvc 网站"
"在输入框中输入 'Buy groceries'"
"点击 'Add' 按钮"
"截取当前页面的屏幕截图"

LLM 客户端会根据指令自动调用相应的浏览器工具，并返回操作结果或网页信息。

关键词