線上直播 / Playwright 實作

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

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

使用 Playwright 建立可驗證的 Web UI 自動化測試流程，並結合 AI Agent 進行測試腳本生成、修正與審查。
本次 8/1 版本進一步補強 Playwright Test 與 E2E 測試案例腳本撰寫，從一次性 UI Smoke Test 延伸到可重複執行、可作為驗收規格的測試流程。

課程介紹

隨著 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 與 HTML Report 判斷問題來源，並將測試證據整理成 AI Agent 可理解的修正回饋，形成「修改 → 驗證 → 診斷 → 修正 → 再驗證」的開發閉環。

本次課程延期至 8/1，主要是為了進一步深化教材結構與實作內容。除原有 Playwright CLI、Playwright Skill 與 AI Agent 驗證流程外，也新增 Playwright Test 測試框架操作，說明如何將 PetShop-App 的主要操作流程整理為可重複執行的 E2E 測試案例腳本。

課程內容加量不加價，原課程費用維持不變。

課程要點

課程目標

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

理解 UI 自動化測試、E2E Testing 與 Smoke Test 在 Web 開發流程與 AI Agent 協作中的定位
能夠使用 Playwright Test 撰寫、執行與檢視可重複執行的 E2E 測試案例腳本。
掌握 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 測試設計
從 Playwright CLI 的一次性 UI 操作，銜接到 Playwright Test 的正式測試腳本與 HTML Report。
強調測試意圖、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 測試腳本如何成為可執行的驗收規格
二、開發環境安裝與建置	課程示範使用的工具與環境概覽 Node.js、Python、VS Code 與必要擴充套件確認 Playwright CLI、Playwright Skill 與 Playwright Test 的環境定位 PetShop-App 範例專案啟動與本機環境驗證使用 Playwright CLI 驗證本機首頁 AGENTS.md、Skill 與 MCP 設定說明本次範例專案所安裝 Skills / MCP 列表與摘要說明
三、PetShop-App 示範情境說明	以「Pet Shop 寵物購物平台」作為 UI 測試示範情境範例專案的功能範圍與課程使用邊界 PetShop-App 在測試流程中的角色：測試標的、驗證對象與 Agent 協作案例購物平台主要操作流程概覽：首頁、商品瀏覽、商品搜尋、購物車與結帳 UI Smoke Test 在 PetShop-App 案例中的測試範圍從示範情境銜接至後續 Playwright 操作、測試腳本與驗證流程
四、Playwright CLI、Skill 與 Test 基礎操作	Playwright CLI、Playwright Skill 與 Playwright Test 的基本分工使用 Playwright CLI 觀察與操作 PetShop-App 頁面使用 snapshot 與 screenshot 建立 UI 驗證證據 Playwright Skill 如何約束 Agent 的操作與回報使用 Playwright Test 建立最小測試案例使用 VS Code 執行與檢視 Playwright Test 從一次性 UI 操作銜接到可重複執行的測試腳本
五、Playwright 核心腳本能力：以操作面向建立測試腳本	測試腳本的操作流程圖與基本結構 TypeScript / JavaScript 在本課程中的角色：作為 UI 驗證腳本語言，而非前端框架開發主線 Navigation：頁面瀏覽、URL 驗證、載入判斷與跳轉檢查 Locator：元素定位、selector 穩定性與 brittle selector 避免原則 User Actions：click、fill、selectOption、check、keyboard / mouse 操作 Assertions：expect 與常用驗證方式，包括可見性、文字、URL、表單值與錯誤訊息 Waiting / Auto-waiting：auto-waiting 概念、明確等待時機與 timeout 使用原則 Test Structure：test、beforeEach、測試命名、測試資料與 helper function
六、使用 AI Agent 生成、修正與審查 Playwright 測試	說明 AI Agent 在 Playwright 測試流程中的角色與使用邊界將使用者操作流程整理為 Agent 可執行的測試需求透過 Agent 產生 Playwright 測試腳本並檢查測試意圖要求 Agent 使用穩定 Locator 與具體 Assertion 依據測試失敗訊息、Screenshot、Trace 或 Report 回饋 Agent 修正避免 Agent 為了通過測試而降低驗證品質 Agent 修改 UI 或測試腳本後，重新執行測試並確認結果
七、Debugging：測試失敗診斷與驗證證據	Playwright 測試失敗時的基本診斷流程透過錯誤訊息、Screenshot、Video recording 與 Trace Viewer 判斷失敗原因使用 HTML Report 檢視測試執行結果與失敗細節區分問題來源是產品功能、測試腳本、測試資料或環境設定整理測試失敗摘要，記錄失敗案例、錯誤原因與重現方式將 Screenshot、Trace、Video 或 Report 作為 Evidence 提供給 AI Agent 依據 Evidence 引導 Agent 修正產品功能或測試腳本
八、進階測試架構導覽：Unit Test、POM 與 BDD	Unit Test、Integration Test、UI / E2E Test 的測試分層定位 Playwright Test 與其他測試框架的關係 Playwright 在使用者流程層級 UI 驗證中的角色 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 輔助開發流程。

了解更多講師背景與經歷

常見問題與備註

報名後將先提供環境安裝與設置教材，以及可用於驗證本機環境的 Python App Web 首頁。
完整課程教材與 PetShop-App 專案範例將於課前提供，學員可先行研讀並依教材完成環境驗證與基本操作練習。

課程形式與授課方式

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

教材、課程產出與備註

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

企業內訓說明

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