什么是 MCP？
MCP（Model Context Protocol） 是一种为大语言模型（LLM）设计的协议，MCP充当 LLM 与实际应用之间的桥梁或“翻译器”，将自然语言转化为结构化指令，使得模型可以更精确、高效地控制外部行为。
通过 MCP，大语言模型可以像调用 API 一样发出导航、点击、输入等指令，并接收结构化反馈，极大增强了模型的上下文理解与操作能力。
什么是Playwright MCP
Playwright mcp是一个主要依赖于浏览器的可访问树的web自动化测试能力的MCP Server，它允许使用LLM大模型使用结构化命令控制网页浏览器，从而可以快速且更准确的操作浏览器，非常适合网页导航、表单填写、数据提取和自动化测试等任务。
Playwright MCP 的主要优势：
- ✅ 快速响应：基于结构化命令，交互更轻量
- ✅ 高确定性：避免自然语言歧义，执行结果更可靠
- ✅ 易于集成：适用于 Copilot、Cursor 等 AI 编程工具
- ✅ 便于调试：多客户端可共享一个浏览器上下文
设置Playwright MCP Server
Prerequisites
- Node.js installed (v16 or later)
- Playwright installed
安装
-
安装Playwright MCP
npm install -g @playwright/mcp -
验证安装成功
npx @playwright/mcp --version -
启动mcp server
npx @playwright/mcp@latest --port 8931服务启动后可以看到以下输出
在VS Code中通过Github Copilot集成
第一步：添加 MCP 服务
-
按下
Ctrl + Shift + P（macOS 为Cmd + Shift + P）打开命令面板。 -
搜索并选择：“MCP: Add MCP Server”。
-
选择服务类型为 HTTP Server。
-
在 URL 输入框中填写 MCP Server 地址（默认 SSE 模式）：
<http://localhost:8931/sse> -
回车确认，配置文件保存位置选择用户区或工作区均可。
-
操作完成后，你会在
settings.json或.vscode/mcp.json中看到如下内容：// Example .vscode/mcp.json {"servers": {"my-remote-server": {"type": "sse","url": "<http://localhost:8931/sse>",}} } -
点击启动后，VS Code 会自动识别 到可用的MCP 服务
第二步 使用 GitHub Copilot + Playwright MCP 实现 AI 控制浏览器
打开 GitHub Copilot Chat 窗口，切换为“代理模式”，点击 MCP 工具图标可以看到Playwright MCP提供了如下浏览器操作的工具
示例：通过 LLM Prompt 控制浏览器
Step 1：导航到百度
Prompt:
"Navigate to 百度一下，你就知道."
效果如下，MCP 成功控制浏览器跳转至百度并读取页面标题：
Step 2：执行搜索操作
Prompt:
"Search playwright in 百度一下，你就知道."
AI 会自动识别搜索框和按钮，并完成搜索动作，页面更新为搜索结果。
)
