Playwright MCP（Model Context Protocol）是微软在 Playwright 浏览器自动化框架之上实现的 模型上下文协议服务器。它把 大语言模型（LLM） 与 浏览器自动化能力 通过标准化的 MCP 接口连接起来，使 AI 能够以结构化、可访问性的方式直接操作网页，而不必依赖截图或视觉模型。
关键特性
| 特性 | 说明 |
|---|---|
| MCP 协议 | 采用 Anthropic 开源的 Model Context Protocol，提供统一、可控的工具调用方式，类似 AI 的“USB 接口”。 |
| 结构化快照 | 通过页面的 可访问性树（Accessibility Tree） 生成结构化快照，AI 可以直接读取 DOM 结构、属性等信息，定位元素更精准、对 UI 变化更鲁棒。 |
| 双模式支持 | - Snapshot 模式：基于结构化快照，轻量高效。 - Vision 模式：基于截图，兼容需要视觉信息的场景。 |
| 跨浏览器 | 支持 Chromium、Firefox、WebKit 等主流浏览器，兼容无头（headless）和有头（headed）两种运行方式。 |
| 丰富的交互工具 | 导航、点击、输入、拖拽、文件上传、PDF 生成、截图、网络请求拦截等。 |
| LLM‑友好 | 交互数据为 JSON/结构化格式，省去视觉模型的高算力消耗，适配各种 LLM（Claude、ChatGPT、Gemini 等）。 |
| 可扩展性 | 通过 JSON 配置文件自定义服务器行为，支持并发、SSE 流式返回、Docker 部署等。 |
| 开源与生态 | 项目托管在 GitHub，npm 包 @playwright/mcp 提供 Node.js 接口，官方文档、示例代码齐全。 |
典型应用场景
- AI 助手网页操作：让聊天机器人直接打开网页、填写表单、点击按钮，实现“动口就能完成任务”。
- 自动化测试：基于 LLM 自动生成、维护测试用例，利用结构化快照提升定位稳定性。
- 数据抓取与信息抽取：通过快照快速获取页面结构化数据，适用于电商、金融等信息采集。
- AI‑驱动的网页交互：在 AI 编程助手（如 VS Code Copilot、Cursor）中嵌入浏览器能力，实现“一键运行”代码并实时查看结果。
- 教育与培训：演示网页交互原理，帮助学生理解前端与自动化的结合。
快速入门（简要步骤）
- 安装：
npm i @playwright/mcp（或通过 VS Code 插件直接安装）。 - 启动服务器：
playwright-mcp serve --port 8000，可指定浏览器、模式等参数。 - 在 LLM 客户端配置：将服务器地址（如
http://localhost:8000）写入客户端的 MCP 配置文件。 - 调用示例（JSON）
{ "tool": "playwright.navigate", "arguments": { "url": "https://example.com" } }LLM 发送上述请求后，服务器会打开页面并返回快照或操作结果。
参考链接
总结：Playwright MCP 将 Playwright 的强大浏览器自动化能力与模型上下文协议（MCP）结合，为大语言模型提供了 轻量、结构化、跨浏览器 的网页交互接口，已在 AI 助手、自动化测试、数据抓取等多个场景得到落地。通过上述链接即可获取完整的安装、配置与示例代码。
声明：文章均为AI生成，请谨慎辨别信息的真伪和可靠性！