Playwright agent Demo

第 13 頁：架構解析說明（對準你的圖檔）

（轉場引導）

「前面分享了講者的理論，接下來我想分享我在專案中的實務應用。

過去我們在寫 Playwright Test 時，最痛苦的就是 UI 頻繁改版

導致的**『測試維護債』**。只要前端改個欄位、換個 ID，我們就得手動救腳本。

為了徹底解決這個問題，我導入了這套 Playwright Agent 架構。

首先我使用最左側: opencode, 搭配mcp,去執行最右邊playwright agent (這頁PPT)

====

接著我會展示相關2 頁 Demo 在(xx系統)專案上:

第一頁Demo PPT 是Playwright planner & generator,

首先我們輸入指令:npx playwright init-agents --loop=opencode

這指令代表 OpenCode與執行端 Playwright 正式串接起來。

啟動了專屬於測試的 MCP Server,建立了一個自動化循環，

並載入了 Planner、Generator 與 Healer 這三個核心 Skill 模組

(讓 AI 能自主規劃、執行並回傳結果.)

接著輸入opencode後會出現 opencode 畫面.可輸入指令

Planner:

接著我們輸入Planner需求並存成 panner_0906.md: 一開始引用剛才產出的 planner markdown, 並告訴AI as playwright agent planner,

然後輸入專案需求, 並請AI 產出測試計畫,

接著在opencode 內切換為plan mode, 執行 panner_0906.md,

AI 會自動探索網頁路徑，產出一份結構化的測試計畫。這幫我們解決了『複雜需求如何拆解成測試點』的難題。

PS:

追求「確定性」與「穩定性」(Deterministic vs. Stochastic)

「經理，這是我在 PoC 階段刻意的選擇。AI 雖然具備探索意圖的能力，但它具有隨機性。在企業級的測試中，我們追求的是『確定性』。當功能需求已經非常明確時，直接給予精確步驟能將腳本生成的成功率提升到接近 100%，避免 AI 產生誤判或幻覺（Hallucination）。

======

Generator

接著根據 Planner 產生的測試計畫, 接著執行Generator

在generator_0906.md 內:

一開始引用剛才產出的 generator markdown, 並告訴AI as playwright agent generator,

然後請AI根據剛才測試計畫, 並產出Playwright 測試,並存在Axx.js 內

最後會跑出測試成功畫面

========

第2頁Demo PPT

Healer:

當UI 改變時,測試會失敗,因此, 我們產生healer markdown:healer_0906.md,

並告訴AI as playwright agent healer, 請AI 修復,修復成功後告訴我修復那些, 並存在Axx_revise.js

以上就是Planner, generator, healer Demo

Kite Fly