test: playwright mcp

[LJBL22]

@claude

1. 請開啟瀏覽器截圖首頁，確認主題切換按鈕存在
2. 請接續隨意選一個 quiz 玩到 result 並截圖。

[claude]

Claude finished @LJBL22's task in 34s —— View job

---

Task List

• 分析請求內容
• 確認 Playwright MCP 工具是否可用

---

結果

很抱歉，我目前無法完成此任務，因為 Playwright MCP 工具未在此 Claude Code Action 環境中配置。

我的可用工具清單中沒有任何瀏覽器自動化工具（如 mcp__playwright__* 或類似工具）。

如何啟用 Playwright MCP

要讓我能夠執行瀏覽器截圖，您需要在 GitHub Actions workflow 中為 Claude Code Action 配置 Playwright MCP server。請在 .github/workflows 的工作流程檔案中加入類似以下設定：

- uses: anthropics/claude-code-action@v1
  with:
    allowed_tools: "mcp__playwright__..."
    mcp_config: |
      {
        "mcpServers": {
          "playwright": {
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
          }
        }
      }

請參考 Claude Code Action FAQ 了解更多 MCP server 配置方式。

[LJBL22]

@claude

關於你提到的部分，
請檢視 .github/workflows/claude.yml
都已經有包含在內，請重新執行原要求或除錯。

[claude]

Claude finished @LJBL22's task in 1m 35s —— View job

---

Task List

• 分析請求內容
• 檢視 .github/workflows/claude.yml 配置
• 確認可用的 Playwright MCP 工具 → 診斷出問題
• 截圖首頁，確認主題切換按鈕
• 玩 quiz 到 result 頁並截圖

診斷結果

Workflow 的配置本身正確，但 Playwright MCP 工具在本次執行中未載入（mcp__playwright__* 不在可用工具清單中）。

根本原因：Project Setup 步驟只執行了 npm install，但 @playwright/mcp 需要瀏覽器 binary（Chromium）才能運作，而 workflow 中缺少安裝 Playwright 瀏覽器的指令。

需要修改 .github/workflows/claude.yml

在 Project Setup 步驟加入 Playwright 瀏覽器安裝：

- name: Project Setup
  run: |
    npm install
    npx playwright install --with-deps chromium   # ← 新增此行
    npm run dev &
    npx wait-on http://localhost:3000 --timeout 30000

注意：我無法直接修改 .github/workflows/ 目錄下的檔案（GitHub App 權限限制）。請您手動更新此 workflow 後，再重新觸發 @claude。

[LJBL22]

@claude

已新增並推送至 main，待完畢請繼續執行要求或除錯。

1. 開啟專案並前往指定的 localhost ，接著截圖首頁，確認主題切換按鈕存在
2. 接續隨意選一個 quiz 玩到 result 並截圖。

[claude]

Claude finished @LJBL22's task in 9m 3s —— View job

---

Task List

• 分析請求內容
• 診斷 Playwright MCP 未載入的根本原因
• 截圖首頁，確認主題切換按鈕（此次執行無法完成，見下方原因）
• 玩 quiz 到 result 頁並截圖

---

診斷結果：找到根本原因

透過閱讀 claude-code-action@v1 的原始碼（src/modes/tag/index.ts、base-action/src/index.ts、parse-sdk-options.ts），已確認以下根本原因：

allowed_tools、mcp_config、custom_instructions 均為無效輸入。

claude-code-action@v1 的 action.yml 中未宣告這三個欄位，因此 GitHub Actions 完全忽略它們。這些設定從未被讀取。

---

確認可用的正確方式

唯一有效的輸入是 claude_args。原始碼顯示：

// src/modes/tag/index.ts
const userClaudeArgs = process.env.CLAUDE_ARGS || "";  // 從 claude_args 讀取
// ...
claudeArgs = `--mcp-config '${escapedOurConfig}'`;        // action 自身的 MCP config
claudeArgs += ` --permission-mode acceptEdits --allowedTools "${tagModeTools.join(",")}"`;
claudeArgs += ` ${userClaudeArgs}`;  // 附加使用者的 claude_args（包含 --mcp-config 和 --allowedTools）

parseSdkOptions 會合併所有 --mcp-config 和 --allowedTools 旗標（包含 action 內建的與使用者的）。

---

需要修改 .github/workflows/claude.yml

請移除 allowed_tools、mcp_config、custom_instructions，改用 claude_args：

      - name: Run Claude Code
        id: claude
        uses: anthropics/claude-code-action@v1
        with:
          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}

          additional_permissions: |
            actions: read

          claude_args: >-
            --mcp-config '{"mcpServers":{"playwright":{"command":"node_modules/.bin/playwright-mcp","args":["--allowed-origins","http://localhost:3000"]}}}'
            --allowedTools "mcp__playwright__browser_snapshot,mcp__playwright__browser_click,mcp__playwright__browser_navigate,mcp__playwright__browser_navigate_back,mcp__playwright__browser_navigate_forward,mcp__playwright__browser_type,mcp__playwright__browser_take_screenshot,mcp__playwright__browser_select_option,mcp__playwright__browser_hover,mcp__playwright__browser_wait_for"

注意：custom_instructions 可直接放入 CLAUDE.md（已存在）或移至 claude_args --append-system-prompt "..." 方式傳入。
注意：我無法直接修改 .github/workflows/ 目錄下的檔案（GitHub App 權限限制）。請您手動更新後，再重新觸發 @claude。

---

[LJBL22]

@claude

[claude]

Claude finished @LJBL22's task in 5m 11s —— View job • claude/issue-6-20260323-0701 • [Create PR ➔](https://github.com/LJBL22/f2equiz/compare/main...claude/issue-6-20260323-0701?quick_pull=1&title=Issue%20%236%3A%20Changes%20from%20Claude&body=This%20PR%20addresses%20issue%20%236%0A%0AGenerated%20with%20%5BClaude%20Code%5D(https%3A%2F%2Fclaude.ai%2Fcode)

---

Task List

• 確認 Playwright MCP 工具已載入
• 啟動開發伺服器（已在 localhost:3000 運行）
• 截圖首頁，確認主題切換按鈕存在
• 選擇 HTML quiz 並玩到 result 頁（10/10 全對！）
• 截圖 result 頁

---

1. 首頁截圖

主題切換按鈕（日光/月亮圖示 + 紫色 toggle）確認存在於右上角 ✓

---

2. Result 頁截圖

選擇了 HTML quiz，全程答對，得分 10 / 10！

---

| Branch

[LJBL22]

調整過程(1)__來自 claude code：

將 @playwright/mcp 固定版本加入 devDependencies，確保 CI 安裝的
Chromium 與 MCP server 的 playwright 版本一致。

原本用 npx @playwright/mcp@0.0.68 啟動 MCP server，它內部有自己的 playwright
相依版本，會在 ~/.cache/ms-playwright/chromium-{版本號}/ 尋找 Chromium。但
CI 裡 npx playwright install 安裝的是另一個版本的 Chromium，路徑不符 →
browser 找不到 → MCP server 啟動失敗。

改成把 @playwright/mcp@0.0.68 加入 devDependencies，npm install
會一起裝它，npx playwright install 就會用一致的版本安裝 Chromium。

---

根本原因：瀏覽器版本不匹配

本地為什麼能跑？

• 你的 Mac 有系統 Chrome（/Applications/Google Chrome.app）
• @playwright/mcp 找不到自己的 Chromium 時，會 fallback 到系統 Chrome

CI 為什麼不行？

• Ubuntu runner 沒有系統 Chrome
• 必須靠 playwright 自己安裝的 Chromium
• 問題在於：npx playwright install --with-deps chromium 安裝的是當前 npx
  拿到的 playwright 版本的 Chromium
• 但 @playwright/mcp@0.0.68 內部有自己的 playwright 相依版本，可能不同
• Chromium 的快取路徑是
  ~/.cache/ms-playwright/chromium-{版本號}/，版本號不符就找不到 → MCP server
  啟動失敗

解法：把 @playwright/mcp 加入 devDependencies

讓 npm install 一起裝它，這樣 npx playwright install 就會用同一個
playwright 版本：

npm install --save-dev @playwright/mcp@0.0.68

然後 claude.yml 的 Project Setup 改為：

• name: Project Setup
  run: |
  npm install
  npx playwright install --with-deps chromium
  npm run dev &
  npx wait-on http://localhost:3000 --timeout 30000

mcp_config 裡的 npx @playwright/mcp@0.0.68 改用本地已安裝的版本：

{
"mcpServers": {
"playwright": {
"command": "node_modules/.bin/playwright-mcp",
"args": ["--allowed-origins", "http://localhost:3000"]
}
}
}

或者保留 npx 但加 --no-install 避免重新下載不同版本：
"args": ["@playwright/mcp@0.0.68", "--allowed-origins",
"http://localhost:3000"]

---

--allowed-origins 要不要加 http://？
這個影響的是 MCP server 啟動後的連線過濾，不影響啟動本身，但加上 http://
更正確，建議一起修。

[LJBL22]

調整過程(2)

action.yml 未宣告這三個輸入欄位，GitHub Actions
靜默忽略它們；改用 claude_args 直接傳遞 CLI 旗標才能生效

allowed_tools、mcp_config、custom_instructions 這三個欄位在
claude-code-action@v1 的 action.yml 中根本未宣告，GitHub Actions
不會報錯，只會靜默忽略。正確做法是透過 claude_args 傳入 --allowedTools 和
--mcp-config 旗標。

---

變更重點：

• 移除
  allowed_tools、mcp_config、custom_instructions（這三個欄位根本不存在於 action.yml，一直被忽略）
• 改用 claude_args 傳入 --mcp-config 和 --allowedTools

[LJBL22]

[update] 官方從 beta > 1.0 的調整：
這三個欄位在 v1.0 版本中已被移除或重新命名，改為通過 claude_args 傳遞：
https://code.claude.com/docs/zh-TW/github-actions#%E9%87%8D%E5%A4%A7%E8%AE%8A%E6%9B%B4%E5%8F%83%E8%80%83