Playwright/MCP/AI -Winter

Transcript

1. 用 Playwright + MCP 打 造 AI 驅動測試流程 Winter Hung
2. 自我介紹 LINE TEC QA Lead 目前擔任 LINE 購物台灣團隊的一 員，負責電商相關服務的測試管理 與品質保證工作。積極探索如何將 AI 技術應用於測試流程中，包括導 入大型語言模型（LLM）協助自動 生成測試案例、優化測試流程與錯 誤分析，以提升整體功能穩定性與 開發效率。
3. 自我介紹 協助自動生成測試案例 Test Case Helper 人工智慧驅動的測試案例產生工具，可 根據功能描述或心智圖建立測試案例 和 Playwright 自動化程式碼。 。
4. 自我介紹 優化測試流程 Test Query AI 一款基於 Flask 的 Web 應用程序，它 使用 AI 來管理、搜尋和推薦測試案例。 該應用程式實現了模型-視圖-控制器 (MVC) 架構，並使用向量嵌入來實現 語義搜尋功能。
5. 01 02 03 04 品質穩定與快速交付 Playwright 的優勢 什麼是Playwright MCP Playwright MCP 在測試中的應用 背景介紹 05 應用中仍有一些需要注意的限制和挑戰 未來的挑戰 CONTENT 快速建立並維護關鍵路徑的 E2E 測試
6. 品質穩定與快速交付 01 背景介紹
7. 面臨著高頻率的版本更新和大型檔期活動的壓力 1,200 萬不重複訪客 LINE 購物團隊 1,500 萬官方使用者 999 特點項目文字 特點項目 1,500 品牌店家 1,500 1,500 萬官方使用者 家品牌商店 1,500 萬官方使用者 1,500 家品牌店家
8. 快速建立並維護關鍵路徑的 E2E 測試 02 Playwright 的優勢
9. 跨瀏 覽器 支援 Playwright 的優勢 特點項目文字 15 特點項目文字 自動 等待 機制 強大 的選 取器 同時支援 Chromium（Chrome、Edge）、Firefox 和 WebKit 程式 語言 支援
10. 跨瀏 覽器 支援 Playwright 的優勢 特點項目文字 15 特點項目文字 自動 等待 機制 提供多種元素選取方式，包括 CSS、XPath 和文字內容 程式 語言 支援 跨瀏 覽器 支援 強大 的選 取器
11. 跨瀏 覽器 支援 Playwright 的優勢 特點項目文字 15 特點項目文字 自動 等待 機制 JS, Python, Java, .NET 跨瀏 覽器 支援 強大 的選 取器 強大 的選 取器 程式 語言 支援
12. 跨瀏 覽器 支援 Playwright 的優勢 特點項目文字 15 特點項目文字 智慧型等待元素出現、消失或變為可互動狀態 跨瀏 覽器 支援 強大 的選 取器 強大 的選 取器 程式 語言 支援 程式 語言 支援 自動 等待 機制
13. 03 什麼是 Playwright MCP?
14. MCP 基本原理 像是連接AI與外部工具的共同規則 以烹飪為例，料理的人（AI）依照食譜操作，並且 有刀具或鍋子（工具）可以使用 MCP（Model Context Protocol）
15. Playwright MCP是什麼 MCP 是一種允許大規模語言模型 (LLM)（例如 Claude Code）與外部工具通訊的協定。 Playwright MCP 是微軟官方提供的模型上下文協 定 (MCP) 伺服器
16. Playwright MCP 的三層架構
17. Playwright MCP對話測試方法 撰寫測試腳本需要數小時 修改測試流程費時費力 需要等待自動化工程師排程 即時生成測試腳本 不中斷的連續對話 立即看到執行結果 傳統測試方法 Playwright MCP對話測試
18. Playwright MCP的優勢 即時資料接取 • 反映現況的即時資料 • 根據今天的數據給予建議 • 最新的摘要 個人化 • 透過最小化資料揭露來增強上下文管理 • 縮減個人化互動所需的背景資訊量 模組與自動化 • Playwright MCP 架構讓測試部署流程模組化 • 支持並行驗證與錯誤彙整 • 提高 debug 效率 可擴展性 • 不同模組可以獨立執行測試流程 • 滿足多樣產品線的測試需求
19. 04 Playwright MCP 在 測試中的應用
20. Playwright MCP 應用 解析錯誤訊息：LLM 模型自動解析 Playwright 的報錯訊息，幫助我們快速 定位問題。 生成測試腳本：AI 能根據 Confluence 的需求文件，自動生成場景測試腳本骨 架，減輕開發人員的負擔。
21. 從藍圖到對話生 成器 傳統程式碼：像建築師繪製的詳細藍圖， 需要專業知識才能理解和修改。每一行 程式碼都需要精確的語法和邏輯。 Playwright MCP的創新：把複雜的藍 圖變成「設計圖的對話生成器」。您只 需要用自然語言描述需求，系統就能自 動轉化為可執行的測試。。
22. 只要能清楚描述您想測試的功能，Playwright MCP 就能理解並執行 想法產生 產品經理構思 新功能的測試 需求 語言描述 AI 理解 MCP 智能解 析需求並生成 測試 快速驗證 即時獲得測試 結果和視覺化 回饋 為什麼非技術人員也能使用 用自然語言表 達測試步驟和 預期結果
23. 用對話完成完整測試流程 幫我打開這個網址 https://semantic- ui.com/examples/login.html 在名稱欄位輸入 user@gmail.com， 密碼輸入 1234 截圖確認,頁面上是否有顯示Your password must be at least 6 characters 對話式實戰演示:測試登入功能
24. 對話式實戰演示 這個範例展示了從開啟網頁到驗證結果 的完整過程
25. 對話式實戰演示 這個範例展示了從開啟網頁到驗證結果 的完整過程
26. 對話式實戰演示 Playwright MCP 不僅能執 行測試，還能協助我們進 行前端偵錯
27. 對話式實戰演示 我的網頁上，點擊 'Generate' 按鈕沒有反應， 請幫我檢查前端程式碼是 否有問題
28. 對話式實戰演示 AI 進一步建議：「請將 document.getElementBy Id('generateBtn').onclick = () => handleGenerate(); 改為 document.getElementBy Id('generate').onclick = handleGenerate;。」
29. 對話式實戰演示 這個範例展示了從開啟網 頁到前端偵錯的完整過程
30. 05 未來的挑戰 應用中仍有一些需要注意的限制和挑戰
31. 目前的挑戰與注意事項 特點項目文字 15 特點項目文字 內容 邏輯 複雜邏輯的測試 場景建議由專業 測試人員設計 大量並發測試可 能產生較高成本 需要合理規劃 準確 度 使用清晰、具體 的指令,必要步 驟描述 了解這些限制可以幫助我們更好地規劃使用策略 內容 生成的內容需要 更精確的選擇器 描述或多次嘗試 邏輯 複雜邏輯的測試 場景建議由專業 測試人員設計 成本 大量並發測試可 能產生較高成本 需要合理規劃