GitHub Copilot 如何用 Playwright MCP 测试网页

可以，前提是当前会话有获准的浏览器工具。VS Code 内置浏览器有自己的工具；也可以在工作区注册独立 Playwright MCP。GitHub.com 云端 Agent 在另一个环境运行，其默认 Playwright MCP 使用那里可达的 localhost。先指定客户端、URL 和成功条件，例如打开测试页，确认 OFF，点击 Enable demo，再读取 ON。 VS Code 浏览器工具 GitHub MCP 概览

Reddit 上有位开发者说，他想让 Copilot 打开浏览器做测试，但没成功。帖子没有说明使用的是哪个客户端，也没列出可用工具。排查就从这两项开始。你已经在 VS Code 调试应用时，可以先用内置浏览器。需要 Microsoft 的 Playwright 工具时，再配外接 MCP。 浏览器测试讨论

要点

• VS Code 的内置浏览器工具可以直接打开并操作网页。

• 在 VS Code 工作区接入 Microsoft Playwright MCP 时，把服务放在 .vscode/mcp.json 的 servers 中。

• 独立的 Copilot CLI 需要单独配置。交互命令是 /mcp add。

• GitHub 云端默认的 Playwright MCP 只能访问云端任务所在环境的 localhost。

• 点击后在页面上读到预期状态，才算完成这次测试。

先确定运行环境

GitHub.com 任务提示连接被拒绝时，先确认应用在云端任务内监听。VS Code Agents 窗口的部分远程会话可通过远程 VS Code 主机代理流量。改端口之前，先确认浏览器实际使用的主机。 云端工具参考 集成浏览器网络设置

另一款云端 Agent 的示例也说明了主机和本地回环的关系。 云端 Agent 如何访问 localhost

在 VS Code 先试内置浏览器

启动应用，在集成浏览器打开它的 URL。接着在 Chat 中启动本地 Agent 会话，打开工具选择器，确认浏览器工具已启用。看不到工具时，检查 workbench.browser.enableChatTools 和组织策略。让 Agent 打开同一个 URL，读出页面标题。你自己能打开页面后，还要确认 Agent 能调用工具。 VS Code 浏览器工具说明

Agent 能读页面后，再让它点击一个控件并核对结果。如果每次提 PR 都要检查这个流程，把操作和断言写成 Playwright 测试，放进仓库。

在 VS Code 工作区注册 Playwright MCP

使用 Node.js 18 或更新版本。示例固定包版本，方便团队复用。把条目合并到 .vscode/mcp.json，在命令面板运行 MCP: List Servers，打开 playwright 菜单并启动。工具未出现时查看输出。VS Code 会把符合条件的服务转发到 Copilot 会话。需要交互输入的条目不在转发范围内，按官方文档选择合适的配置。

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--isolated"]
    }
  }
}

看到服务条目后，确认当前 Agent 能选到导航和快照工具。工作区信任、组织策略或会话选择会影响发现和调用。独立资料适合测试；如果需要登录环境，另行确认接入权限、账号和可见的工作区名称。 VS Code 配置参考 Microsoft Playwright MCP 连接现有浏览器

已经在其他编程 Agent 里配置 Playwright MCP时，可以复用适合的命令和参数。服务条目仍按 VS Code 的格式填写。

分别配置终端和云端

在 Copilot CLI 交互会话中输入 /mcp add，选择本地 STDIO 服务，填写 VS Code 示例中的命令和参数。保存后可用 /mcp show playwright 检查服务。用户级 JSON 写入 ~/.copilot/mcp-config.json，顶层用 mcpServers。仓库也可以使用便携格式 .mcp.json。同名服务以项目配置优先。 GitHub Copilot CLI 配置

使用 GitHub.com 云端 Agent 时，在任务环境内启动 Web 应用，使用那里监听的端口。先让 Agent 确认进程在运行、页面标题符合预期，再点击。Reddit 上有用户遇到 Web Agent 报浏览器已在使用。碰到这一错误时，先保留完整错误和任务环境，再重试。 云端用户原帖

验证一个可见状态变化

用自己控制的测试页，增加可见标识和不会影响真实业务的操作。点击前读初始状态，点击后在同一页读回。截图可补充说明，主要证据仍是实际动作和状态。

可以把下面的 HTML 保存为 copilot-fixture.html，放在测试应用可访问的目录中。每轮从应用的 URL 打开并刷新。按钮和测试页标识不会因点击而消失。需要核对第二项结果时，可以按浏览器 Agent 提示词模板补充断言。

<!doctype html>
<meta charset="utf-8">
<title>Copilot test fixture</title>
<h1>COPILOT-DEMO</h1>
<p>Status: <output id="status">OFF</output></p>
<button type="button" id="enable">Enable demo</button>
<script>
  document.getElementById("enable").addEventListener("click", () => {
    document.getElementById("status").textContent = "ON";
  });
</script>

使用浏览器工具打开获准的 copilot-fixture.html 测试 URL。确认页面 ID 为 COPILOT-DEMO，状态为 OFF。点击 Enable demo 一次，重新读取 ID 和状态，核对 COPILOT-DEMO 和 ON。返回 URL、工具名、点击目标及读到的值。URL、ID 或初始状态不符时停止。

GitHub 官方教程在更完整的应用上复现缺陷、修复后再检查。第一次接入先做一个控件和一个断言。 GitHub 调试教程 首个浏览器 Agent 任务 Playwright 浏览器自动化

从第一处失败查起

服务启动后立即退出，先看日志里的命令、Node 版本和配置范围。服务在线却没有浏览器工具，回到同一个会话检查工具选择器、工作区信任和组织策略。可按连接正常却找不到 MCP 工具的排查清单逐项确认。

工具能调用但连接被拒绝，核对浏览器所在环境的 URL 和端口。能打开页面却点不动时，检查控件是否可见、已启用且能唯一定位。告诉 Agent 控件的无障碍名称及预期结果。浏览器 Agent 点击失败指南介绍了遮挡等常见原因。

本地调试从 VS Code 内置工具开始。团队需要共享 Microsoft 的工具配置时，把 Playwright MCP 写进工作区。终端和 GitHub.com 云端各自在当前会话检查执行主机和工具列表。先跑通一次可见状态断言，再增加操作。

Secholar.L

Tabbit 增长与内容

Secholar.L 专注 AI 浏览器与 Agent 工作流的实操写作,基于真实调研对比工具,引用可验证的一手来源。