標籤: SaaS QA 工作流

📌 本文重點

• 用 /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 測試。

操作方式：

1. 重構前，用 Claude Code：

請依目前程式碼與 skill.md，替 /profile /settings 產生 smoke test，確認能載入、主要按鈕可點擊、表單可送出。

1. 跑過一次 Playwright 測試，確認初版綠燈。
2. 進行重構，再跑同一套測試，看是否有關鍵 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 測試建議