讓 AI 自動測試網站、抓資料、操作社群？Claude Code + Playwright 實戰三招
Nathan Harrison 讓 Claude Code 打開真正的瀏覽器，自動測試、自動修 bug、自動抓資料。這不是未來，是現在就能用的工作流。
背景：為什麼聊這個
最近在研究 AI 瀏覽器自動化的各種方案，偶然看到 Nathan Harrison 的一支影片，他做了一件讓我眼睛一亮的事：讓 Claude Code 打開一個真正的瀏覽器，自己填表單、自己找 bug、自己修程式碼，然後再自己重新測試一遍。
不是截圖辨識，不是模擬操作，是真的打開 Chromium 瀏覽器、點擊按鈕、輸入文字。
而且這還只是第一個案例。他接著讓它去 Google 搜牙醫、抓電話號碼，最後甚至讓它登入社群平台自動按讚。整支影片看完，我覺得這是目前把 Claude Code 瀏覽器自動化講得最清楚的教學之一。
核心內容
為什麼選 Playwright CLI 而不是 MCP？
很多人（包括我）一開始會想用 Chrome DevTools MCP 來做瀏覽器自動化。但 Nathan 發現了一個關鍵問題：MCP 工具太多，每個工具都有長長的描述，會吃掉大量的 context window。
Playwright CLI 的做法不同——它不是 MCP 工具，而是一個獨立的命令列工具。Claude Code 透過撰寫並執行 JavaScript 腳本來操控瀏覽器，不需要每次操作都呼叫一個 API。
簡單說：
MCP 模式 = 每次操作一個 API call，token 消耗大
CLI 模式 = 寫一次腳本跑整個流程，token 效率高
對於需要大量瀏覽器操作的任務，CLI 模式遠勝 MCP。
實戰一：全自動 QA 測試（最驚豔）
Nathan 先讓 Claude Code 建了一個 12 頁的多步驟表單網站，然後告訴它：「用瀏覽器去測試這個表單，如果有 bug 就記下來然後修復。」
接下來發生的事：
Claude Code 寫了一個 QA 測試腳本
瀏覽器自動彈出，AI 開始填入假資料、選下拉選單、點按鈕
在最後幾頁遇到了 glitch
AI 自動回報了兩個 bug（Enter 鍵不跳頁、Review 頁面沒載入）
自動修復 bug，然後自動重新測試 — Nathan 根本沒要求它這樣做
第二次測試完全通過。
這揭示了一個超強的工作模式：測試 → 發現 bug → 修復 → 重新測試 的全自動迴圈。你甚至可以同時啟動多個瀏覽器實例，每個測試不同面向。
實戰二：自動搜尋並收集資料
第二個案例是讓 AI 去 Google 搜加州的牙醫診所電話。Google 偵測到自動化行為並封鎖了請求，但有趣的是——腳本自動切換到 DuckDuckGo 繼續搜尋。
Nathan 離開去倒水，回來發現瀏覽器已經開著，上面顯示了好幾間牙醫的資訊。AI 甚至在已經看到電話號碼的情況下，還是會點進 Contact 頁面交叉確認。
這種「被擋了就自動換條路」的自適應能力，才是 AI 自動化真正有價值的地方。
實戰三：登入社群平台自動互動
最後一個案例最大膽：登入 Skool 社群，自動幫每篇貼文按讚。Nathan 先用 Playwright 登入取得 cookies，存成檔案，之後每次自動載入就不用重新登入。
AI 寫的腳本會遍歷社群所有貼文，逐一找到讚的按鈕並點擊。雖然過程中需要幾次迭代修正（比如 selector 選不到元素），但最終成功在完全自動化的情況下完成社群互動。
我的觀點：腳本 + Skill = 真正的自動化
Nathan 在影片裡點出一個我很認同的架構觀念：Playwright 產出的是腳本，而腳本搭配 Claude Code 的 Skill 系統，就能變成「一句話觸發」的可重複流程。
想想這些場景：
每天自動測試你的 side project
從沒有 API 的網站批量抓取資料
自動在多個社群平台發文互動
這些過去要寫爬蟲、要維護 Selenium 腳本的事，現在用自然語言描述需求，AI 就能幫你寫好、跑好、甚至壞了自己修。
我自己目前也在用類似的架構做網站 QA 測試和資料爬蟲。如果你也在用 Claude Code，強烈建議試試 Playwright CLI 這條路。
一句話總結
AI 拿到瀏覽器的方向盤，不只是能開車，還能自己找路、自己繞障礙、自己修車。
🎬 影片來源：Nathan Harrison — Claude Code + Playwright CLI Browser Automation