📌 本文重點
- 用
/init讓 Claude Code 讀懂你的 repo- 用
skill.md固化團隊測試與安全規則- 讓 Claude Code 生成並在 CI 中跑 Playwright 測試
- 維持「AI 生成 + 人類審核」的測試節奏
一句話說完：用一個指令 /init 加上一份 skill.md，讓 Claude Code 讀懂你的前端專案與測試習慣，然後自動幫你生成 Playwright 測試腳本，再用 GitHub Action 接到每一次 PR 上跑。
原文靈感來源： How to Use Claude Code for QA Automation (Skills, Playwright, and CI)
核心功能：三步就能把 QA 工作流交給 AI
這套組合主要有三個關鍵：專案上下文載入、skills 規則、和與 Playwright 的互動方式。
💡 關鍵： 把「專案上下文 + 團隊規則」一起交給 Claude Code，才能生成真正可用、符合你團隊風格的測試碼。
1. 用 /init 載入專案上下文
Claude Code 不只是在聊天視窗裡「猜」你的專案，而是直接讀你 repo。
可以馬上做的事：
- 在本機或雲端開好 Claude Code（例如透過 Claude.ai 的 Code 模式，或官方提供的 IDE Plugin / MCP 客戶端）。
- 在專案根目錄啟動 Claude Code、輸入：
bash
/init
- 等它掃完後，直接問：
請幫我針對 checkout flow 生成 Playwright 測試，大致流程是：登入 → 加入購物車 → 結帳
效果：Claude Code 會以「已讀專案」的視角來寫測試，會參考現有路由、元件命名、可能已有的測試風格，而不是空想一組流程。
2. 用 skill.md 固化團隊測試規則
skill.md 是給 Claude Code 的「團隊手冊」。裡面寫：你們怎麼命名測試、怎麼處理登入、怎麼避開敏感資訊、Playwright 檔案放哪裡。
範例 skill.md 內容：
# QA skills for this repo
## 檔案結構
- 所有 E2E 測試放在 `tests/e2e` 底下，使用 TypeScript。
- 每個 user flow 使用一個檔案，例如：`checkout.spec.ts`.
## Playwright 規則
- 優先使用 `data-testid` 作為 selector，不使用純 class 名稱。
- 測試帳號從環境變數讀取，例如 `process.env.TEST_USER_EMAIL`。
- 不在測試碼中出現明碼密碼。
## 測試風格
- 使用 `test.step` 標記關鍵步驟。
- 針對主要 user flow 須包含：登入成功、關鍵操作成功、畫面上關鍵文案存在。
放好 skill.md 後，在 Claude Code 裡輸入：
/load skills/skill.md
或依工具介面選擇「載入技能檔」，之後它寫的 Playwright 測試就會遵守這些規則。
3. 讓 Claude Code 寫 Playwright 測試並實際跑
Playwright 是這條鏈的「手腳」，負責開瀏覽器跑流程。Claude Code 則負責：依你描述的 user flow + 專案上下文 + skills 規則，寫出測試碼。
基本互動方式：
- 先在專案中安裝 Playwright：
bash
npm init playwright@latest
- 在 Claude Code 中告訴它：
請根據 `skill.md`，為 /checkout 頁面寫一個 smoke test，檔案放在 tests/e2e/checkout.spec.ts。
- 拿到程式碼後，貼回 repo，然後本機跑：
bash
npx playwright test tests/e2e/checkout.spec.ts
如果你有 Playwright MCP 或 CLI 工具接到 Claude Code，還可以讓它幫你直接觸發測試並閱讀報告，再根據錯誤修正測試碼。原文中稱這類工具為「browser tool」，核心概念是：Claude Code 不只寫檔案，還能操作 Playwright 執行測試，再回饋結果。
適合誰用：三個典型場景
1. 無 QA 團隊的小組，快速補上回歸測試
情境：3–5 人前端／全端小組，平常只有少量手動測試，每次改動都怕踩到舊功能。
可以這樣用：
- 先用
/init讓 Claude Code 讀 repo，再寫一份簡單skill.md定義「基本防線」：登入、主要頁面打開、關鍵按鈕能點。 - 每次新功能 PR 前，讓它根據描述生成一個 E2E smoke test 檔案，補在
tests/e2e。
好處：不用從零學完整 Playwright API，只要能說清楚「使用者會怎麼操作」，就能生成第一版測試，之後再手動微調。
💡 關鍵： 小團隊在沒有專職 QA 的情況下，可以用 Claude Code 快速建立最小可用的回歸測試網。
2. 重構時自動生成 smoke test
情境：你準備大幅重構某個頁面或路由結構，原本完全沒有 E2E 測試。
操作方式：
- 重構前，用 Claude Code：
請依目前程式碼與 skill.md，替 /profile /settings 產生 smoke test，確認能載入、主要按鈕可點擊、表單可送出。
- 跑過一次 Playwright 測試，確認初版綠燈。
- 進行重構，再跑同一套測試，看是否有關鍵 flow 失效。
這樣即使沒有完整回歸清單，也有一層「AI 生成 + 人類審核」的最小防護網。
3. SaaS 產品針對關鍵 user flow 建 AI 輔助防護網
情境：B2B SaaS，核心收入來自幾個關鍵流程：註冊、升級方案、付款、邀請成員。
建議 workflow：
- 列出 3–5 個最關鍵 user flow，寫入
skill.md（包含帳號類型、環境變數使用方式）。 - 用 Claude Code 生成相對應的 Playwright 測試檔，命名清楚如
upgrade-plan.spec.ts、invite-member.spec.ts。 - 接到 CI 上，對每一個 PR 都跑這幾個測試。任何破壞關鍵 flow 的改動，都會在合併前被攔下。
怎麼開始：從安裝到第一次 PR 自動測試
步驟 1：準備環境（Claude Code、Playwright、GitHub Action）
工具組合可以整理成這樣的比較表：
| 名稱 | 核心功能 | 免費方案 | 適合誰 |
|---|---|---|---|
| Claude Code | 讀 repo、生成測試碼、用 skills 套團隊規則 | 有（視方案而定） | 想讓 AI 寫測試的前端／全端工程師 |
| Playwright | 瀏覽器自動化、E2E/UI 測試 | 完全免費、開源 | 任何需要瀏覽器測試的團隊 |
| anthropics/claude-code-action | 在 CI 中呼叫 Claude Code | GitHub Action 免費層可用 | 想在 PR 自動跑 AI 輔助測試的團隊 |
💡 關鍵： 利用 GitHub Action 免費層，就能在每次 PR 上跑 AI 輔助的測試建議，而不需要額外建置複雜基礎設施。
安裝重點：
- Playwright：
bash
npm init playwright@latest
依指示選擇 TypeScript / E2E 等選項即可。
- Claude Code：視你使用的介面而定，可從 Anthropic 官方文件 找到 IDE 插件、MCP 客戶端或 API 方式。
- GitHub Action：在 repo 建立
.github/workflows/claude-code-qa.yml，稍後填入設定。
步驟 2：寫一份實用的 skill.md
建議從最少但有用的規則開始，放在 skills/skill.md：
# QA skills for web-app
## 測試檔命名
- 放在 `tests/e2e`，檔名以頁面或流程命名，例如 `login.spec.ts`.
## Selector 規則
- 優先使用 `data-testid`，若無，再考慮 `role` 或文字。
- 不使用易變動的 CSS class 作 selector。
## 帳號與敏感資訊
- 測試帳號使用環境變數：`TEST_USER_EMAIL`、`TEST_USER_PASSWORD`。
- 測試碼中不得出現明碼密碼或真實金流資訊。
然後在 Claude Code 介面內載入它，再要求：
依照 skill.md，替登入流程寫一個 Playwright 測試檔，檔名 login.spec.ts。
步驟 3：在 PR 上跑第一次自動測試
使用官方的 GitHub Action anthropics/claude-code-action（可在 GitHub Marketplace 搜尋）。下面是一個簡化版的 YAML 範例：
name: Claude Code QA
on:
pull_request:
types: [opened, synchronize]
jobs:
qa-tests:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: |
npm ci
- name: Run Playwright tests
run: |
npx playwright install --with-deps
npx playwright test
- name: Claude Code QA suggestions
uses: anthropics/claude-code-action@v1
env:
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
with:
command: |
/init
/load skills/skill.md
請根據此 PR 的變更，建議需要新增或更新的 Playwright 測試檔案，並在輸出中附上完整程式碼。
這個 workflow 做兩件事：
- 先跑你現有的 Playwright 測試。
- 再呼叫 Claude Code，根據 PR 內容、專案上下文與
skill.md，提出「要加哪些測試」的建議與程式碼（通常會顯示在 Action log 裡）。
你可以把這些建議複製回本地、經過審查後再送新的 commit。
實務注意事項：一定要有人審
AI 生成的測試碼不會自動保證品質，原文也特別提醒幾點：
- Selector 審查：確認沒有用到短命 class 名稱，也沒有過度依賴容易變動的文字文案。
- 敏感資訊：確保沒有把真實密碼、金流 token 或內部帳號寫死在測試碼裡，全部改用環境變數或假資料。
- 錯誤判斷：有些流程「成功」的定義很細（例如後端有隱藏錯誤），需要你在
skill.md內明確說明檢查方式，或手動補上斷言。
只要保持「AI 幫你寫第一版，人類負責審核與修正」的節奏，Claude Code + Playwright 就能在幾天內幫你補上一整層過去一直欠著的 QA 防護網。
🚀 你現在可以做的事
- 在現有前端專案中建立
skills/skill.md，寫下你們的基本測試與安全規則，並在 Claude Code 中執行/init與/load skills/skill.md- 安裝 Playwright，為一個目前沒有測試的關鍵流程（例如登入或結帳）請 Claude Code 生成第一個 E2E 測試檔並在本機跑一次
- 在 GitHub repo 中新增
.github/workflows/claude-code-qa.yml，接上anthropics/claude-code-action，讓每次 PR 自動跑現有測試與 AI 測試建議
發佈留言