用 Claude Code + Playwright CLI 讓 AI 直接操控瀏覽器（Nathan Harrison 影片深度筆記）

Nathan Harrison 最近出了一支關於 Claude Code + Playwright CLI 的影片，我看完後做了一件事：啟動 9 步驟知識降解流程，花半天產出 6000+ 字筆記。

這是我判斷「一支影片值不值得深挖」的最高規格——能讓我這樣做的影片，今年屈指可數。

Claude Code + Playwright 到底能做什麼？

一句話：讓 Claude 用眼睛看網頁、用手操作瀏覽器。

傳統 Claude 只能「讀文字 → 回文字」。但搭配 Playwright MCP server 之後，Claude Code 能：

•

打開任何 URL 並截圖「看清楚」畫面

•

點擊按鈕、填寫表單、滾動頁面

•

自主執行 end-to-end 測試，失敗時自己除錯

•

爬取需要登入的動態網站

•

組合多個步驟成完整的瀏覽器自動化 workflow

關鍵差異是：不需要你事先寫好 script。你只要用自然語言描述「我想測試登入流程」，Claude 會自己決定點哪裡、輸入什麼、怎麼驗證。

bash
npm init playwright@latest
npx playwright install

在專案的 .claude/settings.json 加入：

json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

javascript
幫我測試 https://example.com 的登入流程：
1. 打開頁面截圖
2. 輸入測試帳號密碼
3. 確認是否成功進入 dashboard
4. 如果失敗，告訴我哪個步驟出問題

Claude 會一步步執行、截圖回報，遇到問題會嘗試修復。

你不需要懂自動化測試，不需要寫 Selenium。你只需要描述「我想確認 XXX 是否正常運作」，Claude 就能代你完成。

我最直接的應用場景：讓 Claude 每天早上自動巡視我的網站，截圖回報有無排版跑掉、按鈕失效、頁面錯誤，完全省去人工 QA 時間。

影片長、資訊密度高？用這個流程：

第一遍快速通看：只記下「讓我想停下來的時間點」

帶問題重看：每個 demo 段落，先暫停問自己「這個我能馬上複製嗎？」

動手複製 demo：不複製的知識不是你的知識

用自己的話寫摘要：寫不出來代表還沒真正理解

提取 actionable 清單：只留「7 天內我會用到的」

這五步花了我約半天，但收穫遠超一週的碎片學習。

Actionable Takeaway：今天就試試在你的 Claude Code 專案裡加入 Playwright MCP server，讓 Claude 幫你截圖並描述一個你常用的網頁——光這個動作，你就會開始看到更多自動化的可能性。