線上直播 / Playwright 實作

UI 自動化測試 – 使用 Playwright x AI Agent

以 Playwright 建立可驗證的 Web UI 測試與 Agent 協作流程

使用 Playwright 建立可驗證的 Web UI 自動化測試流程，並結合 AI Agent 進行測試腳本生成、修正與審查。課程聚焦 UI Smoke Test、Debugging Evidence 與標準化協作流程。

課程介紹

隨著 Codex、Copilot、Claude Code 等 AI 協同開發工具逐漸進入實際開發流程，開發者面對的問題已不只是「如何讓 AI 產生程式碼」，而是「如何確認 AI 修改後的系統仍然符合原本的使用者操作流程」。尤其在 Web 系統中，登入、查詢、表單填寫、資料新增與修改、流程送出、狀態更新與錯誤訊息顯示，往往都是最容易受到功能變更或 UI 調整影響的區域。

傳統人工測試通常仰賴開發者或 QA 反覆操作畫面確認結果，但這種方式不容易重複執行，也不容易作為 AI Agent 任務完成後的驗收依據。當系統開始頻繁透過 AI Agent 修改功能、調整畫面或重構流程時，就需要一套可以被重複執行、可以留下測試證據，並能回饋給 Agent 進行修正的 UI 驗證機制。

本課程以 Playwright 作為 Web UI 自動化驗證工具，示範如何將常見使用者操作流程轉換為 UI Smoke Test，並應用於 Codex、Copilot、Claude Code 或其他 AI 協同開發工具的工作情境中。課程重點不是同時整合所有 AI 工具，也不是完整講授 Playwright API，而是建立一套可執行、可觀察、可審查、可回饋修正的 UI 測試流程，讓測試腳本成為 AI Agent 開發任務中的可執行驗收規格。

課程將以「Pet Shop 寵物購物平台」作為示範情境，透過登入、商品瀏覽、搜尋、加入購物車、修改數量與結帳等流程，示範如何將一段完整的 Web UI 操作轉換為可重複執行的 UI Smoke Test。這些流程也代表常見 Web 系統中的登入驗證、資料查詢、表單操作、狀態變更、流程送出與結果確認等測試設計方式。

當測試失敗時，課程也會示範如何透過 Screenshot、Trace、Video 與 HTML Report 判斷問題來源，並將測試證據整理成 AI Agent 可理解的修正回饋，形成「修改 → 驗證 → 診斷 → 修正 → 再驗證」的開發閉環。

課程要點

課程目標

完成本課程後，學員將能夠：

理解 UI 自動化測試、E2E Testing 與 Smoke Test 在 Web 開發流程與 AI Agent 協作中的定位
掌握 Playwright 測試腳本的基本結構、操作流程、Locator 與 Assertion 設計方式
能夠將常見 Web UI 操作流程轉換為可重複執行的 UI Smoke Test
能夠使用 Playwright HTML Report、Screenshot、Trace 與 Video 進行測試失敗診斷
能夠讓 AI Agent 協助產生、修正與審查 Playwright 測試腳本，並判斷其測試意圖是否合理
能夠將 Playwright 測試納入 AGENTS.md / Skill 規範、Done Definition 與團隊開發流程

課程特色

以 Playwright 作為 UI 驗證層，建立可重複執行的 Web UI 自動化測試流程
以 AI Agent 協作開發為情境，示範如何產生、修正與審查 Playwright 測試腳本
以「Pet Shop 寵物購物平台」作為示範案例，演練登入、查詢、表單操作、流程送出與結果驗證等常見 UI 測試設計
強調測試意圖、Locator 穩定性與 Assertion 品質，而非只追求測試表面通過
使用 Screenshot、Trace、Video 與 HTML Report 作為測試證據、Debugging 依據與 Agent 修正回饋
將 UI 測試流程納入 AGENTS.md / Skill 規範，建立可套用於專案或團隊的標準化導入方式

課程大綱

單元	內容重點
一、UI 自動化測試與 AI Agent 驗證流程定位	UI Automation、E2E Testing 與 Smoke Test 的基本定位 Playwright 與 Selenium 的差異與適用情境為什麼現代 Web 開發與 AI Agent 協作需要可重複執行的 UI 驗證 Playwright 如何作為驗證層、測試證據來源與 Done Definition 測試腳本如何成為可執行的驗收規格
二、開發環境安裝與建置	課程示範使用的工具與環境概覽 Codex／Copilot／Claude Code 與 Playwright 測試環境的搭配方式檢視 Playwright CLI、Skill 與測試輔助機制使用 Smoke Test 驗證 Playwright 與 AI Agent 協作創建範例專案目錄與規範檔（AGENTS.md / CLAUDE.md）設置
三、Playwright 核心腳本能力	測試腳本的操作流程圖與基本結構 Navigation：頁面瀏覽、URL 驗證、載入判斷與跳轉檢查 Locator：元素定位、selector 穩定性與 brittle selector 避免原則 User Actions：click、fill、selectOption、check、keyboard / mouse 操作 Assertions：可見性、文字、URL、表單值與錯誤訊息驗證 Waiting / Auto-waiting 與 timeout 使用原則 Test Structure：test、beforeEach、測試命名、測試資料與 helper function
四、購物平台案例：UI Smoke Test 與測試案例設計	以「Pet Shop 寵物購物平台」作為示範情境從完整購物流程拆解並建立測試案例驗證登入、商品瀏覽、搜尋、商品內容檢視與購物車操作支援加入購物車、修改數量、移除項目與結帳流程產出 Playwright HTML Report 作為驗證結果紀錄
五、使用 AI Agent 生成、修正與審查 Playwright 測試	說明 AI Agent 在 Playwright 測試流程中的角色與使用邊界將使用者操作流程整理為 Agent 可執行的測試需求透過 Agent 產生 Playwright 測試腳本並檢查測試意圖要求 Agent 使用穩定 Locator 與具體 Assertion 依據測試失敗訊息、Screenshot、Trace 或 Report 回饋 Agent 修正避免 Agent 為了通過測試而降低驗證品質
六、Debugging：測試失敗診斷與驗證證據	Playwright 測試失敗時的基本診斷流程透過錯誤訊息、Screenshot、Video recording 與 Trace Viewer 判斷失敗原因使用 HTML Report 檢視測試執行結果與失敗細節區分問題來源是產品功能、測試腳本、測試資料或環境設定整理測試失敗摘要，記錄失敗案例、錯誤原因與重現方式將 Evidence 提供給 AI Agent，並引導修正產品功能或測試腳本
七、進階測試架構導覽：Unit Test、POM 與 BDD	Unit Test、Integration Test、UI / E2E Test 的測試分層定位 Playwright Test 與其他測試框架的關係 Helper Function 與 Page Object Model（POM）的用途與適用時機 BDD 驗收情境描述與 Given / When / Then 概念 Playwright 測試在 CI/CD 流程中的執行概念測試腳本累積後的共用流程整理與結構重構
八、團隊流程與標準化導入	UI 修改後的測試執行時機與 Done Definition Playwright 測試納入 AI Agent 工作流程的操作規範 AGENTS.md / Skill 中的 UI 驗證規則與執行要求測試摘要、驗證結果與 Evidence 報告格式小型團隊的最低可行導入流程企業 QA 團隊的測試分工與流程擴展方向

適合對象

本課程適合下列背景之學員參加：

已具備基礎 Web 開發經驗，並希望導入 UI 自動化測試、Smoke Test 或回歸測試流程的開發者
能閱讀基本 JavaScript / TypeScript 測試腳本，並希望能檢視、調整與審查 Playwright 測試腳本的工程師
不限前端、後端或全端背景，想將 Web UI 操作流程轉換為可重複執行驗證腳本的開發者
已使用或準備使用 Codex、Copilot、Claude Code 等 AI 協同開發工具，並希望讓 AI 修改結果具備可驗證流程的工程師
需規劃 AI Agent 開發規範、UI 測試流程、驗收條件與 Done Definition 的技術主管或團隊負責人

講師簡介

Kenming Wang

資深軟體講師、軟體架構師、系統架構與開發顧問、設計模式專書作者。

專精於軟體架構（Soft Architecture）、軟體設計思維（Soft Design Thinking）、企業級系統開發、UML 建模與 AI 輔助開發流程。

了解更多講師背景與經歷

常見問題與備註

課程形式與授課方式

課程時數：6 小時（單日）
授課方式：線上即時講授（使用 Microsoft Teams，課前提供上課連結）
教學方式：以觀念說明、操作示範、案例演練與測試證據診斷為主
課程提供完整錄影檔，學員可於課中跟隨實作，亦可於課後觀看操作示範並重複練習

教材、課程產出與備註

課前提供開發工具與測試環境建置文件，包含 VS Code、Codex／Copilot／Claude Code 等 AI 協同開發工具、Playwright CLI 與 Playwright Skill 的安裝與設定說明
提供課程講義、範例專案、Playwright 測試腳本與測試報告範例
提供 AGENTS.md / CLAUDE.md、Skill 設定與 UI 驗證規範範本
提供 AI Agent 測試需求描述、測試修正與 Debugging 回饋的提示詞範本
實作演練需事先完成課前環境建置，課堂中不逐步處理所有工具安裝問題
本課程以工作室型態開課，目前無法開立統一發票；如需報帳，可提供相關付款憑證

企業內訓說明

歡迎洽談企業內訓包班課程，課程案例、測試流程與導入規範可依專案需求進行調整。