想讓 AI 幫忙點網頁前，先不要從付款頁、正式後台或含個資帳號開始。比較安全的第一個任務，是讓 agent 打開本機預覽站，填一筆假資料，讀表單錯誤、console 訊息和畫面狀態，最後把「它做了什麼、看到什麼、哪一步需要人確認」回報給你。
Playwright MCP 的價值就在這裡：它把 Playwright 的瀏覽器操作能力包成 MCP server，讓 Claude Code、Cursor、Windsurf、VS Code 等支援 MCP 的工具可以操作真實網頁。2026 年 7 月 1 日，GitHub 也宣布 VS Code 裡的 Copilot browser tools 正式可用，讓 Copilot agent 能開頁、點擊、輸入、讀頁面、抓 console error 和截圖。開發者和團隊要先劃三條界線：哪些任務可以交給 browser agent、哪些資料不能給、哪一步一定要人看最後結果。
先分清楚：你要的是快速檢查，還是可重複的瀏覽器能力？
如果平常就在 VS Code 裡用 GitHub Copilot，想快速檢查一個分支預覽頁、重現 UI bug、看 console error 或讓 agent 走一段表單流程，可以先試 Copilot browser tools。GitHub changelog 說，browser tools 在 GA 後預設開啟，agent 可以操作真實瀏覽器，也可以把看到的結果帶回 chat。這條路的好處是離編輯器最近，適合一次性排查。
如果團隊想把瀏覽器操作接到不同 AI coding assistant，或需要讓 agent 在一段任務裡持續保留瀏覽器狀態，Playwright MCP 比較像共用工具層。Microsoft 的 Playwright MCP README 說，它透過 structured accessibility snapshots 讓 LLM 理解頁面，不一定需要截圖或視覺模型；它也能讓模型用比較結構化的方式找到按鈕、連結、輸入框和文字。
如果目標是大量雲端瀏覽器、代理、長時間 session、下載檔案、監控或併發，Playwright MCP 不該被硬推成生產平台。那類任務更接近 Browserbase、Stagehand 或自建瀏覽器基礎設施；站內的 AI 瀏覽器自動化工具比較可以接著看。
Playwright MCP 最適合三種低風險任務
第一種是本機或測試環境的頁面驗證。例如你剛改完註冊表單，可以讓 agent 開 localhost 或 preview URL，填入假 email，檢查必填欄位、錯誤訊息、送出後狀態和 console error。這比請 agent 只看程式碼更接近真實使用者路徑，也比直接丟正式帳號安全。
第二種是回報可重現步驟。當 QA 說「按了沒有反應」，agent 可以照著步驟點擊、輸入、截圖，並把它看到的 DOM 狀態或錯誤訊息寫回來。人仍要判斷修法，但 agent 可以省下反覆開頁、試資料、抄 console 的時間。
第三種是教 AI coding assistant 不要只猜。很多前端 bug 不是讀檔案就能看出來，像 hydration mismatch、layout overflow、登入後 redirect、network 失敗或權限狀態錯誤，都需要瀏覽器現場資料。Playwright MCP 能補上「真的打開頁面看過」這一段，但它不是安全審查，也不是讓 agent 自動改完就上線的理由。
Copilot browser tools GA 後，VS Code 團隊要多看權限
GitHub 這次 GA 的重點，是 browser tools 不再只是 preview。官方說 agent 可以開頁、瀏覽 live web app、點擊、輸入、hover、拖曳、處理 dialog、讀頁面內容、抓 console error、截圖，必要時也能跑 scripted flows。這些能力很適合前端排查，但也代表 agent 可能碰到登入狀態、內部頁面和敏感操作。
GitHub 同時列出幾個控制點。使用者自己開的 tab 預設是 private；agent 不能讀或操作，除非使用者選擇 Share with Agent，而且可以撤回。agent 自己開的 tab 會用 fresh session，不會拿到日常瀏覽器的 cookies 或 storage。相機、麥克風和地理位置預設被擋。企業管理員也可以用 workbench.browser.enableChatTools 開關集中管理，並用 allow / deny list 限定 agent 可去的網站。
這些保護不是「可以放心給它任何帳號」的保證。比較穩的做法，是把 Copilot browser tools 當成低風險檢查員：讓它看測試站、重現 bug、讀 console、整理錯誤；遇到付款、寄信、刪資料、改權限、操作客戶資料或正式後台，一律停在人手確認。
開始前先寫三條界線
一、限定環境。
先從本機預覽、staging、測試帳號或可回復資料開始。不要把 production admin、金流、客服系統、CRM 或學生／病患／客戶資料當第一個測試場。
二、限定任務。
把任務寫成「打開這個 URL → 填這些假資料 → 回報 console 與畫面狀態 → 等我確認」，不要寫成「幫我修好整個網站」。browser agent 越自由，越容易做出你沒有預期的操作。
三、限定最後一步。
讓 agent 回報它看見的錯誤、截圖、網路失敗、表單狀態或可疑路徑，但真正送出、刪除、付款、改設定、寄信或合併程式碼前，都要有人看最後輸出。
這三條界線也能拿來和資安或主管溝通：AI 可以操作瀏覽器，但要待在可回復、可觀察、可停止的地方。
動手做：用 VS Code 接上本機練習表單
這個例子只做一件事：讓 Playwright MCP 開啟本機頁面，填寫假資料，再讀出成功或錯誤訊息。先準備 Node.js、npm、Google Chrome，以及已能使用代理模式的 VS Code／GitHub Copilot。本例使用 Node.js 22 驗證；其他版本請先核對官方安裝前置條件。VS Code 與瀏覽器都在同一台電腦執行，先不要混用 SSH、WSL 或開發容器。
1. 準備可重置的練習頁
建立新的空白資料夾，把表單檔案 index.html與本機伺服器 server.mjs另存到同一層。瀏覽器若直接開啟內容，可在連結上按右鍵另存；確認檔名沒有多出 .txt。用 VS Code 開啟這個資料夾，在終端機執行：
node --version
npm --version
node server.mjs前兩行應顯示版本號；第三行應顯示 Open http://127.0.0.1:4179/，終端機保持開啟。用自己的瀏覽器打開這個網址，應看到「Playwright MCP 本機表單練習」、姓名、電子郵件和「送出練習」按鈕。找不到頁面時先修正檔案位置或伺服器啟動問題，不要急著查 AI。
這個伺服器只綁定 127.0.0.1、只提供練習頁，不接受表單寫入。表單用前端程式更新文字，不寄信、不保存資料；重新整理就回到「尚未送出」。因此可以在明確授權下測試送出按鈕，和操作正式後台是不同情境。
2. 設定 MCP，先確認工具有連上
在練習資料夾新增 .vscode/mcp.json，貼入下列內容，或下載本例設定檔放到該路徑。這是 VS Code 的 servers 格式；不要直接把其他客戶端的 mcpServers 設定貼過來。若已有設定，合併這一筆伺服器即可，不要覆蓋原檔。
{
"servers": {
"playwright-practice": {
"type": "stdio",
"command": "npx",
"args": [
"-y", "@playwright/[email protected]",
"--browser", "chrome",
"--headless",
"--isolated"
]
}
}
}本例固定使用 0.0.82，方便重現，並不表示之後不必更新。第一次啟動時 npx 需要連網取得套件。--headless 表示不另開可見視窗；--isolated 使用隔離的瀏覽器工作階段，不沿用你平常 Chrome 的登入狀態。它不是作業系統沙箱，也不會自動限制只能存取本機網址。
依 VS Code 官方管理方式，從命令選擇區執行 MCP: List Servers，選 playwright-practice 並啟動；遇到信任提示先核對設定。回到代理聊天，確認這個伺服器的瀏覽器工具可用，再要求它只開啟 http://127.0.0.1:4179/ 並讀取欄位。能讀出姓名、電子郵件與送出按鈕，才算完成第一次連線；模型口頭回答「已安裝」不算。
3. 交給代理的完整測試任務
請只用 playwright-practice 的瀏覽器工具，測試 http://127.0.0.1:4179/。
本頁是本機假資料練習，授權點擊「送出練習」；不要開其他網站、改檔或安裝其他套件。
先讀取頁面快照；若工具回傳快照檔案，讀取該檔再辨識欄位，不要猜元素位置。
1. 不填資料直接送出，記下畫面實際錯誤訊息。
2. 姓名填「測試小明」、電子郵件填「not-an-email」，再送出並記下訊息。
3. 把電子郵件改為「[email protected]」，再送出並讀出結果。
4. 檢查瀏覽器主控台錯誤與網路請求，確認沒有送出表單 POST 請求。
5. 重新整理，確認欄位清空且狀態回到「尚未送出」。
最後列出每一步的實際結果與是否符合預期；工具失敗就回報失敗，不要用推測補完。預期結果如下。這些條件是練習頁的設計，不是對所有網站的通用判準。
| 操作 | 頁面應顯示什麼 |
|---|---|
| 空白送出 | 請填寫姓名與電子郵件。 |
| 輸入錯誤信箱 | 電子郵件格式不正確。 |
| 輸入正確假資料 | 練習成功：測試小明，資料只顯示在本頁。 |
| 重新整理 | 欄位清空，狀態回到尚未送出 |
2026 年 9 月 20 日，我們以 Windows、Node.js 22.17.0、Playwright MCP 0.0.82 與 Chrome，透過獨立 MCP 測試客戶端依序呼叫開頁、填表、點擊、快照、主控台與網路工具。上述四種結果均符合預期，主控台沒有錯誤，也沒有表單 POST 請求。這次驗證的是 MCP 工具與練習頁流程，沒有實測 VS Code 登入、信任對話框或 Copilot 模型是否會自行正確完成全部步驟。設定介面步驟依官方文件整理，實際結果仍要看你的工具紀錄。
4. 卡住時從哪裡查？
- 找不到
node或npx：先讓前面的版本指令可執行，安裝完成後重開 VS Code；MCP 尚未啟動時，改提示詞沒有幫助。 - 提示找不到 Chrome：本設定指定 Google Chrome；先確認它已安裝。不要把其他瀏覽器的路徑或私人使用者資料夾直接套進來。
ERR_CONNECTION_REFUSED：確認node server.mjs還在執行，網址與連接埠一致。遠端 VS Code 的127.0.0.1指向遠端主機，不能當成本機電腦。- 連接埠被占用：伺服器會顯示
Port 4179 is in use。先在自己先前的練習終端機按Ctrl+C；不要任意結束不認識的程式。 - 頁面變了，元素找不到：重新取得快照，用新快照中的欄位或按鈕識別操作。不要一直沿用上一頁的識別碼。
完成後在 MCP: List Servers 停止 playwright-practice，並在本機伺服器終端機按 Ctrl+C。下次可以從空白表單重跑；若要換成自己的表單，先寫出它的成功與失敗條件，再決定哪些動作允許代理執行。
7 天小試跑：用一個表單就夠
第一天先選一個低風險流程，例如聯絡表單、內部設定頁的 demo 版、公開搜尋頁或文件站。把可用帳號、可用資料、禁止操作和成功條件寫在任務說明裡。
第二到三天，讓 agent 只做觀察型任務：開頁、讀欄位、填假資料、回報 console error、列出它無法判斷的地方。這時不要讓它自動提交正式資料，也不要讓它改 production 設定。
第四到五天，再讓 agent 和 coding assistant 接起來。可以請它根據瀏覽器看到的錯誤提出修改方向，改完後再回到同一條瀏覽器路徑驗證。這一步最能看出工具價值：agent 是否真的少走冤枉路，還是只把錯誤描述得更長。
第六到七天，整理三件事：哪些頁面適合交給 agent 看、哪些動作一定要人按、哪些錯誤訊息或截圖最能幫工程師修 bug。如果這三件事說不清楚，先調任務，不急著把 browser agent 接到更多帳號。
什麼時候不用 Playwright MCP？
只有一次手動檢查時，不一定要裝 MCP。直接用 Copilot browser tools、瀏覽器 DevTools 或人手測一次，可能更快。
任務是大量抓公開資料時，也不該把瀏覽器 agent 當萬用爬蟲。先看對方 API、robots 政策、授權條款和速率限制；真的需要瀏覽器，再決定是 Playwright MCP、Playwright CLI、雲端瀏覽器平台，還是乾脆不要自動化。
需要 agent 修前端 bug 時，可以把 Playwright MCP 和 Chrome DevTools for agents分工看：前者偏向操作頁面、走流程、讀結構化頁面狀態；後者偏向 console、network、performance 與 runtime 除錯線索。兩者都不能取代人對產品結果和風險的判斷。
接下來怎麼選
個人開發者可以先從最小路線開始：如果 VS Code Copilot 已經開啟 browser tools，就用一個測試頁練習「觀察、回報、等待確認」。若常在 Claude Code、Cursor、Windsurf 或其他 MCP client 之間切換，再把 Playwright MCP 裝成共用工具。
小團隊可以先寫一份 browser agent 使用清單：哪些網域允許、哪些帳號可用、哪些動作需要人按、哪些錯誤要留下截圖或 console。這份清單比一開始追求全自動更有用，因為它會直接減少誤點、誤刪、誤送出和資料外流風險。
等到測試流程穩定後，再看要不要把它升級成正式瀏覽器自動化。Playwright MCP 適合讓 AI 在開發現場看見網頁；範圍劃清楚後，它才能把重複檢查和錯誤回報做得更快。範圍沒劃好，agent 到處點只會放大風險。
參考來源
- Microsoft VS Code：Add and manage MCP servers in VS Code（2026-09-20 查閱）
- GitHub Changelog：Browser tools for GitHub Copilot in VS Code are generally available
- Microsoft GitHub：playwright-mcp README
- npm：@playwright/mcp
- Playwright：Playwright MCP
- Mason AI Lab：AI 瀏覽器自動化工具比較
- Mason AI Lab：Chrome DevTools for agents 指南