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

安装

1. 安装Playwright MCP

   npm install -g @playwright/mcp

2. 验证安装成功

   npx @playwright/mcp --version

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