# Playwright AI浏览器控制台
## 基本信息
- Slug: `cloudflare-playwright-mcp`
- Source: modelscope
- Publisher: @cloudflare/playwright-mcp
- Categories: browser-automation / cloud-platforms
- Hosted: No
- License: Apache License 2.0
- Source URL: https://www.modelscope.cn/mcp/servers/@cloudflare/playwright-mcp
## 简介
一个利用 Playwright 进行自动化浏览器测试，并与 Cloudflare Workers 集成的服务器，使 AI 助手能够控制网页浏览器进行导航、交互和截图。
## 安装提示

```bash
npm ci
```

## MCP Server 详情

## Cloudflare Playwright MCP

### 概述

该项目利用 Playwright 进行自动化浏览器测试，并与 Cloudflare Workers、[Browser Rendering](https://developers.cloudflare.com/browser-rendering/) 和 [`@cloudflare/playwright`](https://github.com/cloudflare/playwright) 集成，以进行部署。

### 构建和部署

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

1. 安装依赖项：
```bash
npm ci
```


2. 部署到 Cloudflare Workers：

```bash
npx wrangler deploy
```


### 与 Cloudflare AI Playground 一起使用

![alt text](docs/imgs/playground-ai-screenshot.png)

[Cloudflare playground AI](https://playground.ai.cloudflare.com/) 是一个很好的方式，可以使用 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>![alt text](docs/imgs/todomvc-screenshot-1.png) 已截取当前页面的屏幕截图。截图格式为 PNG，大小为 56KB。 |
| **用户** | 现在点击鹦鹉待办事项条目的复选框 |
| **助手** | *运行 browser_clickt 工具*<br>已点击鹦鹉待办事项条目 "波利想要一块饼干" 的复选框。页面快照显示了更新后的页面内容，复选框已被选中。 |
| **用户** | 截图 |
| **助手** | *运行 browser_take_screenshot 工具*<br>![alt text](docs/imgs/todomvc-screenshot-2.png) 已截取当前页面的屏幕截图。截图格式为 PNG，大小为 58KB。 |
| **用户** | 移除已完成的待办事项 |
| **助手** | *运行 browser_clickt 工具*<br>已点击 "清除已完成" 按钮。页面快照显示了更新后的页面内容，已完成的待办事项条目 "波利想要一块饼干" 已被移除。 |
| **用户** | 最后再截一次图 |
| **助手** | *运行 browser_take_screenshot 工具*<br>![alt text](docs/imgs/todomvc-screenshot-3.png) 已截取当前页面的最终屏幕截图。截图格式为 PNG，大小为 50KB。 |

### 与 Claude Desktop 一起使用

目前，[Claude Desktop](https://claude.ai/download) 仅支持本地 MCP 服务器。为了使 `playground-mcp` 能够与 Claude Desktop 一起使用，我们利用 [mcp-remote](https://github.com/geelen/mcp-remote)，这是一个代理远程 MCP 服务器并将其暴露于本地的工具。请按照以下配置步骤操作：

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

```json
{
  "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 演示应用程序、添加“买柠檬”并进行截图的会话示例，利用了 playwright-mcp 工具和浏览器渲染：

![alt text](docs/imgs/claudemcp.gif)

### 在 VSCode 中配置

你可以使用 [VS Code CLI](https://code.visualstudio.com/docs/configure/command-line) 安装 Playwright MCP 服务器：

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


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


安装完成后，你可以在 VS Code 中通过 GitHub Copilot 代理使用 Playwright MCP 服务器。