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 先試內建瀏覽器

啟動應用程式，在整合式瀏覽器開啟它的網址。在 Chat 啟動本機 Agent 工作階段，開啟工具選擇器，確認瀏覽器工具已啟用。找不到時，檢查 workbench.browser.enableChatTools 和組織原則。請 Agent 開啟同一網址並讀取畫面標題。確認自己能開啟頁面後，也要確認 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 建立雲端工作時，請在該工作環境啟動網頁應用程式，使用該環境監聽的連線埠。先確認程序與頁面標題，再開始點擊。Reddit 有位使用者遇到網頁版 Agent 回報瀏覽器已在使用。發生類似問題時，先保存完整錯誤與工作環境，再重試。 雲端使用者原文

驗證一個可見狀態變化

用自己控制的測試頁，增加可見標識和不會影響真實業務的操作。點擊前讀初始狀態，點擊後在同一頁讀回。截圖可補充說明，主要證據仍是實際動作和狀態。

可以把以下 HTML 存成 copilot-fixture.html，放在測試應用程式能提供的目錄中。每次開啟網址後重新整理。按鈕與測試頁標識會留在畫面上，方便點擊前後核對。若要檢查第二個結果，可參考瀏覽器 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 測試網址。確認頁面 ID 為 COPILOT-DEMO，狀態為 OFF。點擊 Enable demo 一次，重新讀取 ID 與狀態，核對 COPILOT-DEMO 與 ON。回報網址、工具名稱、點擊目標與觀察值。網址、ID 或初始狀態有出入時停止。

GitHub 官方教程在更完整的應用上復現缺陷、修復後再檢查。第一次接入先做一個控件和一個斷言。 GitHub 調試教程 首個瀏覽器 Agent 任務 Playwright 瀏覽器自動化

從第一個失敗步驟排查

伺服器啟動後立即結束，先看紀錄中的指令、Node 版本和設定範圍。伺服器啟動卻沒有工具時，在同一工作階段檢查工具選擇器、工作區信任與組織原則。可用這份MCP 已連線但沒有工具的排查清單逐項確認。

能呼叫工具卻連線遭拒時，核對瀏覽器所在環境的網址與連線埠。頁面能開啟但點擊卡住時，查看控制項是否可見、已啟用且可唯一辨識。提供無障礙名稱及預期結果。瀏覽器 Agent 無法點擊指南說明了遮擋等常見情況。

本機偵錯先用 VS Code 內建工具。團隊需要共用 Microsoft 的工具設定時，再將 Playwright MCP 加入工作區。使用終端機或 GitHub.com 時，分別在當前工作階段核對主機與工具。先驗證一次畫面上的狀態變化，再擴大測試。

Secholar.L

Tabbit 成長與內容

Secholar.L 專注 AI 瀏覽器與 Agent 工作流的實測寫作,基於真實調研比較工具,引用可查證的一手來源。