Playwright MCP 入门实战：自动化测试与 Copilot 集成指南

什么是 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 会自动识别搜索框和按钮，并完成搜索动作，页面更新为搜索结果。