Playwright MCP的应用场景

自动化测试：编写测试脚本，覆盖功能测试、回归测试，集成到持续集成（CI）流程中，提高软件质量和开发效率。

网页自动化操作：自动抓取网页数据、填写表单、执行重复性任务，如定时更新网页内容，减少人工操作。

与大语言模型集成：结合大语言模型（如 GPT、Claude），基于结构化数据实现智能交互，辅助开发、智能客服等。

浏览器功能扩展：开发自定义浏览器工具，支持多种浏览器（Chrome、Firefox、WebKit），确保跨浏览器兼容性。
项目地址：https://github.com/microsoft/playwright-mcp
代码结构：

playwright-mcp/
├── src/                  # 源代码目录
│   ├── index.ts          # 核心 API 导出
│   ├── program.ts        # 命令行程序入口
│   ├── config.ts         # 配置处理
│   ├── browserServerBackend.ts  # 浏览器服务后端
│   ├── browserContextFactory.ts # 浏览器上下文工厂
│   ├── mcp/              # MCP 相关实现
│   │   ├── server.ts     # MCP 服务器实现
│   │   └── transport.ts  # 传输层实现
│   ├── loop/             # 循环工具相关
│   │   └── main.ts       # 循环工具入口
│   ├── loopTools/        # 循环工具实现
│   │   └── main.ts       # 循环工具主逻辑
│   ├── extension/        # 浏览器扩展相关
│   │   └── main.ts       # 扩展主逻辑
│   ├── tools/            # 各种工具实现
│   └── context.ts        # 上下文管理
├── tests/                # 测试目录
│   ├── fixtures.ts       # 测试夹具
│   └── testserver/       # 测试服务器
├── index.js              # 入口文件
├── index.d.ts            # 类型定义
├── package.json          # 项目元数据
└── README.md             # 项目文档
安装：
**1. 环境准备**

# 全局安装Playwright MCP 
npm install -g @playwright/mcp@latest 
# 或者作为项目依赖安装 
npm install --save-dev @playwright/mcp@latest 
# 验证安装 
npx playwright-mcp --version

2.客户端配置

{ "mcpServers": 
  { "playwright": 
    { "command": "npx", 
      "args": ["@playwright/mcp@latest"], 
      "env": { "PLAYWRIGHT_BROWSERS_PATH": "/Users/username/pw-browsers" }       } 
   } 
}

3.启动本地服务（有两种启动模式 1：快照模式，2：视觉模式）
   一 快照模式：        

npx @playwright/mcp@latest --port 8931

或 视觉模式

 npx @playwright/mcp@latest --port 8931 --vision

客户端配置：

{"mcpServers": {
     "playwright": {
        "command": "npx",
          "args": [
               "@playwright/mcp@latest",
               "--vision"
        ]
     }
   }
}

代码入口分析：

**命令行入口**：src/program.ts
    
    - 使用 `commander` 库处理命令行参数
    - 根据参数配置启动不同的服务模式（扩展模式、循环工具模式等）
    - 设置退出监听和资源清理
2. **API 入口**：src/index.ts
    
    - 导出 `createConnection` 函数，作为创建 MCP 连接的主要 API
    - 实现 `SimpleBrowserContextFactory` 用于自定义浏览器上下文获取
3. **MCP 服务器入口**：`src/mcp/server.ts`
    
    - 实现 MCP 服务器核心逻辑
    - 处理工具注册、调用和心跳检测
4. **主程序入口**：index.js
    
    - 导出 `createConnection` 函数，作为对外暴露的接口

核心时序图

2. 完整交互流程
3. 1.
   用户发起请求 ：用户向MCP客户端发送操作请求
4. 2.
   请求转发 ：MCP客户端将请求转发给MCP服务器
5. 3.
   指令处理 ：MCP服务器将请求发送给大模型进行解析
6. 4.
   生成操作 ：大模型分析请求并返回具体的操作指令
7. 5.
   操作转换 ：MCP服务器处理指令，将其转换为浏览器可执行的操作
8. 6.
   操作转发 ：通过Playwright将浏览器控制指令转发给浏览器
9. 7.
   执行操作 ：浏览器执行实际的交互操作
10. 8.
   结果返回 ：浏览器将执行结果返回给Playwright
11. 9.
   结果处理 ：Playwright将结构化结果传递给MCP服务器，MCP服务器进行处理
12. 10.
    结果反馈 ：MCP服务器将处理后的结果返回给MCP客户端
13. 11.
    展示结果 ：MCP客户端向用户展示最终的操作结果

1. 服务启动时序

用户 -> index.js: 调用 createConnection()
index.js -> src/index.ts: 转发调用
src/index.ts -> src/config.ts: resolveConfig()
src/index.ts -> src/browserContextFactory.ts: 创建上下文工厂
src/index.ts -> src/mcp/server.ts: createServer()
src/mcp/server.ts -> ServerBackend: 初始化后端
src/mcp/server.ts -> Transport: 建立连接
Transport -> 客户端: 服务就绪

2. 工具调用时序

客户端 -> src/mcp/server.ts: 发送工具调用请求
src/mcp/server.ts -> ServerBackend: 调用 callTool()
ServerBackend -> 具体工具实现: 执行工具逻辑
具体工具实现 -> 浏览器上下文: 执行操作(如导航、点击等)
浏览器上下文 -> 具体工具实现: 返回结果
具体工具实现 -> ServerBackend: 返回处理结果
ServerBackend -> src/mcp/server.ts: 返回响应
src/mcp/server.ts -> 客户端: 返回工具调用结果

3. 命令行启动时序

用户 -> 命令行: 执行 mcp-server-playwright
命令行 -> src/program.ts: 解析参数
src/program.ts -> src/config.ts: 解析配置
src/program.ts -> src/mcp/transport.ts: 启动传输层
src/mcp/transport.ts -> src/mcp/server.ts: 创建服务器
src/mcp/server.ts -> BrowserServerBackend: 初始化浏览器后端
BrowserServerBackend -> 浏览器: 启动/连接浏览器
浏览器 -> BrowserServerBackend: 就绪状态
src/mcp/transport.ts -> 用户: 输出服务启动信息
 

核心模块关系：

 `BrowserServerBackend` 是核心后端，管理浏览器上下文和工具
- `mcp/server.ts` 实现 MCP 协议的服务器端逻辑
- program.ts 处理命令行参数并决定启动模式
- 工具系统通过 src/tools.ts 集中管理所有可用工具
- 配置系统贯穿整个应用，控制各种行为和能力

### 应用于 Playwright MCP

Playwright MCP 项目实际上是一个基于 MCP 的服务端实现，它将 Playwright 管理浏览器的功能通过 MCP 接口暴露给客户端（通常是 LLM 或智能体）。

- 客户端（LLM、AI agent 或其他工具）通过 JSON-RPC 消息与 Playwright MCP 服务通信，从而调用各类工具操作（例如：导航、点击、截图、获取可访问性快照等）。[GitHub](https://github.com/microsoft/playwright-mcp?utm_source=chatgpt.com)[LobeHub](https://lobehub.com/mcp/hyhfish-playwright-mcp?utm_source=chatgpt.com)[QA Touch](https://www.qatouch.com/blog/playwright-mcp-server/?utm_source=chatgpt.com)[executeautomation.github.io](https://executeautomation.github.io/mcp-playwright/docs/intro?utm_source=chatgpt.com)
    
- Playwright MCP Server 支持：
    
    - **STDIO 模式**：在本地通过标准输入输出流与客户端（通常是 IDE 插件或命令行工具）对接，适合本地测试或集成开发环境使用。[维基百科](https://de.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com)[GitHub](https://github.com/microsoft/playwright-mcp?utm_source=chatgpt.com)
        
    - **SSE 模式（Server-Sent Events）**：通过 HTTP 的 SSE 流方式，服务端可以不断向客户端推送响应，而客户端也可以发送 JSON-RPC 请求，这种方案适合远程服务或浏览器不可见场景。[维基百科](https://de.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com)[Reddit](https://www.reddit.com/r/mcp/comments/1l9q2w6/get_a_reachablefromanywhere_playwright_mcp_server/?utm_source=chatgpt.com)