📌 本文重點
- 用
/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 測試建議










