想讓 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 可以操作瀏覽器,但要待在可回復、可觀察、可停止的地方。
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 到處點只會放大風險。