前言

昨天說到脫穎而出的是 Claude，今天先講為什麼。

Claude Code 有一套叫 skill 的機制：你可以把一段工作方法寫成 Markdown 檔，放進固定位置，之後它遇到對應的情境就會自己讀進來照做。這件事聽起來平凡，但它把兩樣東西分開了 —— 怎麼做是能力，做什麼是產品知識。能力寫成 skill，可以帶著走；產品知識放在另一個資料夾，換一個受測產品就換一份。

這正好是我這 30 天想建立的東西：這是一位換了公司甚至模型也還能繼續工作的同事，而並不需要綁死在某個專案裡的提示詞，當然針對公司產品還是要調整一番，但隨著模型越來越厲害，我相信這件事情會越來越容易。

好，先回到今天要做的事，就是幫這位同事準備辦公環境：一台電腦、一雙能看見畫面的眼睛、一本記事本，還有報到手續。

Claude Code 的工作方式

Claude 是 Anthropic 開發的 AI 模型，能理解人類語言、分析內容、產生程式碼，並且透過外部工具完成目標。

要跟它一起工作，主要有兩個介面：Claude Desktop 和 Claude Code。這個系列主要用 Claude Code，因為它跑在終端機裡，讀得到你的專案檔案，也執行得了指令。

Claude Code 的運作可以拆成一個迴圈：

讀你的指令 → 決定要用什麼工具 → 執行 → 看結果 → 決定下一步 → …

它不是一次把答案生出來，是一步一步做，每一步看到結果之後再決定下一步。這個「看到結果再決定」正是我們要的能力 —— 也是它跟「幫我產生一段測試碼」最大的差別。

它手上有四種東西，剛好對得上一位新同事需要的配備：

今天處理眼睛和報到手續，員工手冊留到明天。

安裝與啟動

Claude Code 有兩種裝法。官方安裝腳本：

curl -fsSL https://claude.ai/install.sh | bash

或者用 npm：

npm install -g @anthropic-ai/claude-code

裝完確認一下：

claude --version

我寫這篇時的版本是 2.1.220。

啟動很簡單，切到專案資料夾直接輸入：

claude

第一次會要你登入。之後每次在專案裡輸入 claude，就等於這位同事來上班了。

Playwright：給它一雙眼睛

如果受測對象是網站或 API，我們得讓它真的操作瀏覽器。這件事交給 Playwright。

為什麼不是 Selenium？ 這個問題值得先回答，因為台灣用 Selenium 的比例很高。

理由跟功能無關，跟證據有關。Playwright 內建 trace、截圖、錄影、network 攔截、console 收集 —— 而那五樣東西正好就是這位同事要交的作業。Selenium 這些都做得到，但要自己接：另外裝套件、自己寫 hook、自己決定存哪。

差別在於「內建」跟「接得起來」對 agent 是兩件事。內建的東西它一行指令就拿得到；要自己接的東西，你得先幫它把管線鋪好，而那條管線之後每個專案都要重鋪一次。

如果你的既有測試是 Selenium，那些測試不用動。這個系列前四週先建立探索、判斷與留證的能力；這裡講的是探索留證要用什麼工具，跟你的回歸測試用什麼框架是兩件事。

Playwright Test 內建的能力剛好涵蓋一位測試人員需要的動作：

• 驗證登入、結帳、填表單等完整使用者流程
• 讀取頁面內容
• 模擬不同瀏覽器、裝置、語系、時區與地理位置
• 截圖、錄影、追蹤網路請求與瀏覽器 console
• 在 CI 中重複執行回歸測試

最後兩項特別重要。截圖、network、console、trace 就是它的證據，第二週整週都在講怎麼留證。一句「我測過了」不算數，要拿得出東西。

CLI 的基本指令：

npx playwright install
npx playwright test
npx playwright test --debug
npx playwright codegen https://example.com
npx playwright show-report
npx playwright show-trace trace.zip

兩種操作瀏覽器的方式，我選了後者

讓 Claude Code 操作瀏覽器有兩條路，這裡要下一個決定，因為後面 27 天都會用到。

第一條是 Playwright MCP。 MCP（Model Context Protocol）是讓 AI 客戶端連接外部工具的標準，Playwright MCP Server 把瀏覽器自動化能力提供給 Claude Code、Claude Desktop、VS Code、Cursor 這些 client。它靠結構化的 accessibility snapshot 理解頁面，而不是只看像素，所以能依照元素的 role、文字與 ref 去導覽、點擊、輸入、拖曳。

裝法：

claude mcp add playwright npx @playwright/mcp@latest

第二條是 playwright-cli。 這個版本的 CLI 是為 coding agent 設計的，用精簡指令加上可安裝的 skills 來操作瀏覽器。

npm install -g @playwright/cli@latest
playwright-cli install --skills

實際用起來像這樣：

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli snapshot
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot
playwright-cli close

它能存瀏覽器 session，也支援 snapshot、點擊、輸入、截圖、PDF、分頁、cookies、storage、network、console、trace、錄影，以及直接執行 Playwright 程式碼。

這個系列用 playwright-cli。

理由是成本。MCP 會把一大包工具 schema 塞進模型的 context，每一次對話都要付這筆錢；CLI 是你要用才打一行指令，用完就結束。探索一輪動輒幾十個步驟，這筆差距累積起來很可觀。

我這個 repo 原本是走 MCP 的，後來整個改掉了。MCP 沒有不好，跨 client 通用是它的優勢，但這個系列的同事只需要一雙夠省的眼睛。

報到手續：用 setup-sdet 完成初始設定

環境有了，接下來是報到手續 —— 告訴它「你要測的是哪個產品」。

這件事我做成一支叫 setup-sdet 的 skill。它不是一個安裝指令，是一場訪談：一次問一個主題，把答案寫進 config/。

/setup-sdet

它會問這些：

1. 受測產品各環境的 base URL
2. 怎麼登入，帳密從哪個環境變數來
3. CI 是哪個 workflow，哪一個產出 Playwright 的 artifact
4. Issue 開在哪裡，還沒有 repo 就先開在本機檔案
5. Playwright 的設定檔與測試目錄在哪，trace 有沒有開
6. 有沒有可測的 API，契約在哪裡
7. 信心門檻多少才准開單，預算上限是多少

有三條規則寫死在裡面，我覺得值得單獨拿出來講：

• 祕密不落地。 帳密和 token 只記變數名（env:VAR），不記值，也不在對話裡跟你要。
• 寫檔前先列給你確認。 不先斬後奏。
• 一次問一個主題。 不一口氣丟七個問題給你。

跑完之後 config/ 底下會多出幾個檔案，往後每一支 skill 都讀它們。這就是我在 Day 1 說的「產品知識是輸入，不是內建」。

為什麼是 skill，不是一支 script

repo 裡其實有一支 shell script，叫 scripts/link-skills.sh。它做的事很單純：把每一支 skill symlink 進 ~/.claude/skills。

bash scripts/link-skills.sh

那為什麼設定產品資訊要做成 skill，掛載 skill 卻是 script？

因為兩件事的性質不同。掛載是機械動作 —— 輸入固定、輸出固定、沒有判斷餘地、而且要能在 CI 裡無人值守地跑。這種事交給 script，快、便宜、可預期，找 AI 做只是浪費錢。

訪談是需要判斷的動作 —— 你回答「我還沒有 GitHub repo」，它得決定改走本機檔案那條路；你說「這個環境不能碰」，它得記進禁止清單。輸入是自然語言，路徑會分叉，這種事 script 寫不了，寫得出來也難維護。

判斷什麼交給程式、什麼交給 agent，這個問題會在接下來 27 天反覆出現。我的原則就這一條：確定性的事情不要問 AI。

小結

這位同事要上工需要四樣配備：一雙手（Claude Code 的讀檔、寫檔、執行指令）、一雙眼睛（playwright-cli 操作瀏覽器）、一本員工手冊（CLAUDE.md，明天發）、一套工作方法（skill）。眼睛選 CLI 不選 MCP 是為了省 context，報到手續交給 setup-sdet 這支 skill 而不是 script，是因為訪談會分叉、需要判斷。整套的核心是那條分界：能力寫成 skill 帶著走，產品知識放進 config/，換一個產品就換一份。

                      Claude Code
                          │
        ┌─────────┬───────┴───────┬─────────┐
        ▼         ▼               ▼         ▼
       工具   playwright-cli   CLAUDE.md   skill
       手       眼睛           員工手冊    工作方法
                 │                           │
      為什麼不是 MCP：                能力，可帶著走
      工具 schema 每輪                       │
      都進 context                           ▼
                                    /setup-sdet 訪談
                                          （會分叉，
                                       所以不是 script）
                                            │
                                            ▼
                                        config/
                                    產品知識，換產品就換
                                            │
        scripts/link-skills.sh ─────────────┘
        機械動作，交給 script

能力跟產品知識要分開放：前者寫成 skill，換公司也帶得走；後者放 config/，換產品就換一份。眼睛選 playwright-cli 是為了省 context，MCP 把工具 schema 塞進每一輪對話，探索一輪幾十步，這筆差距會累積。而確定性的事情不要問 AI，掛載 skill 是機械動作交給 script，訪談會分叉才交給 skill。

下一步

明天要發員工手冊：用 CLAUDE.md 定義這位同事的工作規則 —— 什麼一定要做、什麼絕對不能做，還有做錯了怎麼辦。

參考資料

1. Claude Code Docs — Quickstart - 安裝與第一次啟動
2. Claude Code Docs — Connect Claude Code to tools via MCP - claude mcp add、scope 與認證方式
3. microsoft/playwright-mcp - accessibility tree 式的瀏覽器操作，官方說明它設計給探索式自動化
4. Playwright — Test Agents（Planner／Generator／Healer） - 官方的 Planner／Generator／Healer 三支 agent，跟本系列的角色分工可以對照著看
5. Microsoft for Developers — The Complete Playwright End-to-End Story - Playwright 與 AI agent 組合的官方藍圖