在 VS Code 使用 Roo Code 實現 Playwright 測試自動化流程

Roo Code 多模式實作細節

功能概覽：Roo Code 是強大的 VS Code AI 代理，可「以自然語言溝通，直接讀寫專案檔案，執行終端指令，自動化瀏覽器操作，並整合任何 OpenAI 兼容或自定義的模型」 github.com 。這意味著它可以同時扮演系統分析師、程式設計師、測試工程師等角色，極其適合整合多階段任務。
並行檔案讀取：利用 Roo Code 的 Concurrent File Reads 功能，一次請求即可讀取多達 100 個檔案 docs.roocode.com 。相比逐個同意讀檔，這能大幅節省等待時間並讓 AI 一次性看到完整代碼結構。在本案例中，可讓 AI 同時讀取 product.md、所有相關元件 .vue、router/index.ts、以及現有測試檔，形成完整上下文後再執行後續分析。
自訂模式與代理串接：可為流程的每個階段設計專屬模式或提示：

如「規格解析(SpecReader)」負責解讀 product.md，將功能需求結構化；「元件分析(CodeAnalyzer)」負責萃取路由與 DOM 選擇器等；「測試生成(TestWriter)」則根據前兩者輸出 Playwright 測試代碼。這些自訂模式可透過 .roo/ 目錄下的模式設定和提示檔管理 github.com 。如果任務更複雜，可使用 Roo Code 的 Orchestrator/Boomegrang 代理模式，讓 AI 自動拆解任務並依序執行各模式，對使用者而言只要輸入一次整體指令即可由 AI 內部切換模式完成所有步驟。
中間結果儲存：每階段的結果（例如解析出的 JSON 需求、組件路由對應、DOM 元素列表等）都可寫入檔案，供後續步驟使用。Roo Code 的 write_file 可在模式中將資料存檔，之後用 read_file 重新讀取。

如需重啟流程，只要提供先前輸出的檔案，AI 就能繼續使用既有上下文。這樣不需每次都重複整個「階段拆解」流程，只要讀入新的 product.md 即可完成更新。

推薦 VS Code 擴充與工具

Roo Code (首選)：專為 VS Code 設計的 AI 代理擴充，提供多種模式和工具 github.com github.com 。安裝後可用本地或雲端模型（支持 GPT-3.5/4、Llama 等免費模型）來執行任務，內建多檔案讀取與終端整合，非常適合從需求到代碼的全流程自動化。Roo Code 的多模式設計和客製化提示允許精細控制每個步驟，並能自動在各個步驟間切換。

CodeGPT：VS Code 的 AI 助手擴充，強調用「知識圖譜」理解整個專案 marketplace.visualstudio.com 。它可以透過 @檔案名指定文件作為上下文，支持多種模型和聊天指令（如 /Unit Testing 自動生成單元測試 marketplace.visualstudio.com ）。CodeGPT 適合需要全倉庫理解和豐富 AI 指令集的情境，但其設計主要在於聊天和補全，與 Roo Code 的多模式代理略有不同，可視為輔助工具。

Continue (開源)：免費且開源的 AI 程式碼助手，允許用戶自定義整個工作流程 marketplace.visualstudio.com 。它提供聊天、程式補全和批量編輯等功能，並且有 Agent 模式可對程式庫進行大規模變更。由於需要自己撰寫或選用規則，它的學習門檻較高；如果有高度客製化需求或偏好開源方案，可考慮使用，但初期建議以 Roo Code 為主。

VS Code Copilot 聊天（Agent 模式）：如果已有 Copilot 訂閱，其 Agent 模式也能自動跨檔案完成任務。例如可下達「為 App 新增登入表單」的指令，Copilot 會在檢索相關檔案後自動生成程式碼。這也是一種選擇，但需要付費，且功能與 Roo Code 重疊；本方案以免費或內建工具為主，故重點仍建議使用 Roo Code。其他輔助：還有 Code Interpreter、ChatGPT 插件等，它們可以在 VS Code 中執行程式片段或呼叫 LLM。這些工具在功能上與 Roo Code 類似，但需要分別啟動、管理；若已有經驗也可用來補充。考慮到流程整合性，最佳做法是聚焦單一平台（如 Roo Code）以統一上下文管理。實現與自動化建議

一鍵化流程：在 .vscode/tasks.json 設定任務，串接所有步驟 code.visualstudio.com code.visualstudio.com 。如前述範例，使用 shell 任務執行生成腳本或 Roo Code Agent，將所有步驟（讀取檔案、呼叫 LLM、寫入測試檔）包裝在一個命令中。開發者執行這個任務後，就能自動完成 E2E 測試程式的產生與更新。腳本/API 整合：若需要更彈性控制，可撰寫 Node.js 或 Python 腳本調用 LLM API（例如 OpenAI 或本地免費模型），實作相同邏輯。腳本可讀取 product.md、Vue 檔案，將需求與代碼傳給模型，再將生成的 Playwright 測試輸出寫入專案。然後在 VS Code 任務或終端中執行此腳本。這種方式可以避開 VS Code 插件限制，以程式方式直接操作檔案與模型。智能差異管理：建議將測試腳本放在版本控制中。利用 AI 更新腳本時，盡量讓 AI 只輸出變更部分或以注釋方式標註新增內容，然後合併到舊檔。這樣可以在 Git diff 中清楚看到改動，並避免每次覆蓋整個檔案。Roo Code 的「Diff/Fast Edits」功能也能協助產生修改差異（可參考其功能設定）。自動批准設定：在 Roo Code 設定中開啟自動批准檔案讀取，以及設置並行檔案讀取數量 docs.roocode.com 。這樣當 Roo Code 執行任務時，就不用每次手動點選「同意讀取檔案」，系統會自動一次拉取多個檔案，加快工作流程。可根據專案大小調整並行上限（最高可達 100），以平衡速度與記憶體使用。總之，透過在 VS Code 中安裝 Roo Code，並搭配自訂模式和任務腳本，你可以實現以下自動化流程：第一次設置時，讓 Roo Code 讀入 product.md 和前端程式，生成全面的 Playwright 測試；之後每次需求更新，只需在本地修改 product.md，然後執行一次預設的生成任務，Roo Code 就會自動讀取更新內容並修補對應的測試程式。這樣開發者不需手動分多個階段執行，每次只要執行一次任務即可完成從規格變更到測試更新的全流程 docs.roocode.com code.visualstudio.com

BAK

目前架構與保留重點

Claude + browserMCP + GitHub Actions CI/CD 流程具體整合方式我不清楚。

流程由本地 VS Code 執行，即可省略或重構 CI/CD，將流程搬到開發者電腦上運行，並以 Roo Code 等工具在編輯器中觸發。

本地化 VS Code 自動化流程

本地觸發：整個自動化流程改由本地執行，由開發者在 VS Code 中手動觸發即可

code.visualstudio.com

。不再依賴 CI/CD 平台，能更快看到結果並調整流程。

VS Code 任務（Tasks）：可在 .vscode/tasks.json 中定義一個任務，例如「產生 Playwright 測試」，讓它執行自動化腳本。

任務的類型可設為shell 或 process，如執行 node generate_tests.js。

示例：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "產生 Playwright 測試",
      "type": "shell",
      "command": "node generate_tests.js",
      "presentation": { "reveal": "always" }
    }
  ]
}

這樣在 VS Code 執行「產生 Playwright 測試」任務時，就會啟動對應腳本或 LLM 流程，完整自動讀取 product.md 與程式碼、產生/更新測試

code.visualstudio.com code.visualstudio.com

Roo Code 任務串接：如果使用 Roo Code 擴充，也可直接在 Roo Code 介面或 Agent/Orchestrator 模式中設計整個流程，一次性完成需求解析與測試生成。Orchestrator（Boomerang）可自動串接子模式（如「解析規格」「分析元件」「生成測試」），讓 AI 內部自動切換，而開發者僅需觸發一次總流程即可。

Playwright 測試生成與更新策略

新腳本生成：對於第一次撰寫或重大變更，可讓 AI 讀取整份 product.md 和相關前端程式碼，根據需求規格自動生成對應的 Playwright E2E 測試腳本。輸出格式可以是一組 .spec.ts 檔案，每個檔涵蓋一個功能流程。
智慧更新 (Smart Diff Patch)：當 product.md 有修改時，不必從頭生成整個測試流程。可使用 Roo Code 讀取修改前後的產品規格以及現有的測試腳本，然後指示 AI 分析新需求與舊腳本之間的差異，自動更新測試內容。例如在對話中讓 AI 執行 read_file 讀入新版 product.md、舊版 product.md 及當前測試檔，然後讓 AI 輸出修改後的腳本。這樣 AI 只需「修補」需要改動的部分，避免重複生成不相關的程式碼。
多檔案聯合上下文：Roo Code 支援在單次請求中同時讀取多個檔案（如規格文件、Vue 元件、路由設定、既有測試等） docs.roocode.com 。也就是說，當需要同時了解多個檔案的時候，Roo Code 會自動識別並一次拉取所有檔案，上下文更加完整。這能讓 AI 建立出專案的完整視圖，更準確地理解變更需求並生成/更新測試腳本。