Playwright/MCP/AI -Winter

by LINE Developers Taiwan

Slide 1

Slide 1 text

用 Playwright + MCP 打造 AI 驅動測試流程 Winter Hung

Slide 2

Slide 2 text

自我介紹 LINE TEC QA Lead 目前擔任 LINE 購物台灣團隊的一員，負責電商相關服務的測試管理與品質保證工作。積極探索如何將 AI 技術應用於測試流程中，包括導入大型語言模型（LLM）協助自動生成測試案例、優化測試流程與錯誤分析，以提升整體功能穩定性與開發效率。

Slide 3

Slide 3 text

自我介紹協助自動生成測試案例 Test Case Helper 人工智慧驅動的測試案例產生工具，可根據功能描述或心智圖建立測試案例和 Playwright 自動化程式碼。。

Slide 4

Slide 4 text

自我介紹優化測試流程 Test Query AI 一款基於 Flask 的 Web 應用程序，它使用 AI 來管理、搜尋和推薦測試案例。該應用程式實現了模型-視圖-控制器 (MVC) 架構，並使用向量嵌入來實現語義搜尋功能。

Slide 5

Slide 5 text

01 02 03 04 品質穩定與快速交付 Playwright 的優勢什麼是Playwright MCP Playwright MCP 在測試中的應用背景介紹 05 應用中仍有一些需要注意的限制和挑戰未來的挑戰 CONTENT 快速建立並維護關鍵路徑的 E2E 測試

Slide 6

Slide 6 text

品質穩定與快速交付 01 背景介紹

Slide 7

Slide 7 text

面臨著高頻率的版本更新和大型檔期活動的壓力 1,200 萬不重複訪客 LINE 購物團隊 1,500 萬官方使用者 999 特點項目文字特點項目 1,500 品牌店家 1,500 1,500 萬官方使用者家品牌商店 1,500 萬官方使用者 1,500 家品牌店家

Slide 8

Slide 8 text

快速建立並維護關鍵路徑的 E2E 測試 02 Playwright 的優勢

Slide 9

Slide 9 text

跨瀏覽器支援 Playwright 的優勢特點項目文字 15 特點項目文字自動等待機制強大的選取器同時支援 Chromium（Chrome、Edge）、Firefox 和 WebKit 程式語言支援

Slide 10

Slide 10 text

跨瀏覽器支援 Playwright 的優勢特點項目文字 15 特點項目文字自動等待機制提供多種元素選取方式，包括 CSS、XPath 和文字內容程式語言支援跨瀏覽器支援強大的選取器

Slide 11

Slide 11 text

跨瀏覽器支援 Playwright 的優勢特點項目文字 15 特點項目文字自動等待機制 JS, Python, Java, .NET 跨瀏覽器支援強大的選取器強大的選取器程式語言支援

Slide 12

Slide 12 text

跨瀏覽器支援 Playwright 的優勢特點項目文字 15 特點項目文字智慧型等待元素出現、消失或變為可互動狀態跨瀏覽器支援強大的選取器強大的選取器程式語言支援程式語言支援自動等待機制

Slide 13

Slide 13 text

03 什麼是 Playwright MCP?

Slide 14

Slide 14 text

MCP 基本原理像是連接AI與外部工具的共同規則以烹飪為例，料理的人（AI）依照食譜操作，並且有刀具或鍋子（工具）可以使用 MCP（Model Context Protocol）

Slide 15

Slide 15 text

Playwright MCP是什麼 MCP 是一種允許大規模語言模型 (LLM)（例如 Claude Code）與外部工具通訊的協定。 Playwright MCP 是微軟官方提供的模型上下文協定 (MCP) 伺服器

Slide 16

Slide 16 text

Playwright MCP 的三層架構

Slide 17

Slide 17 text

Playwright MCP對話測試方法撰寫測試腳本需要數小時修改測試流程費時費力需要等待自動化工程師排程即時生成測試腳本不中斷的連續對話立即看到執行結果傳統測試方法 Playwright MCP對話測試

Slide 18

Slide 18 text

Playwright MCP的優勢即時資料接取 • 反映現況的即時資料 • 根據今天的數據給予建議 • 最新的摘要個人化 • 透過最小化資料揭露來增強上下文管理 • 縮減個人化互動所需的背景資訊量模組與自動化 • Playwright MCP 架構讓測試部署流程模組化 • 支持並行驗證與錯誤彙整 • 提高 debug 效率可擴展性 • 不同模組可以獨立執行測試流程 • 滿足多樣產品線的測試需求

Slide 19

Slide 19 text

04 Playwright MCP 在測試中的應用

Slide 20

Slide 20 text

Playwright MCP 應用解析錯誤訊息：LLM 模型自動解析 Playwright 的報錯訊息，幫助我們快速定位問題。生成測試腳本：AI 能根據 Confluence 的需求文件，自動生成場景測試腳本骨架，減輕開發人員的負擔。

Slide 21

Slide 21 text

從藍圖到對話生成器傳統程式碼：像建築師繪製的詳細藍圖，需要專業知識才能理解和修改。每一行程式碼都需要精確的語法和邏輯。 Playwright MCP的創新：把複雜的藍圖變成「設計圖的對話生成器」。您只需要用自然語言描述需求，系統就能自動轉化為可執行的測試。。

Slide 22

Slide 22 text

只要能清楚描述您想測試的功能，Playwright MCP 就能理解並執行想法產生產品經理構思新功能的測試需求語言描述 AI 理解 MCP 智能解析需求並生成測試快速驗證即時獲得測試結果和視覺化回饋為什麼非技術人員也能使用用自然語言表達測試步驟和預期結果

Slide 23

Slide 23 text

用對話完成完整測試流程幫我打開這個網址 https://semantic- ui.com/examples/login.html 在名稱欄位輸入 [email protected]，密碼輸入 1234 截圖確認,頁面上是否有顯示Your password must be at least 6 characters 對話式實戰演示:測試登入功能

Slide 24

Slide 24 text

對話式實戰演示這個範例展示了從開啟網頁到驗證結果的完整過程

Slide 25

Slide 25 text

對話式實戰演示這個範例展示了從開啟網頁到驗證結果的完整過程

Slide 26

Slide 26 text

對話式實戰演示 Playwright MCP 不僅能執行測試，還能協助我們進行前端偵錯

Slide 27

Slide 27 text

對話式實戰演示我的網頁上，點擊 'Generate' 按鈕沒有反應，請幫我檢查前端程式碼是否有問題

Slide 28

Slide 28 text

對話式實戰演示 AI 進一步建議：「請將 document.getElementBy Id('generateBtn').onclick = () => handleGenerate(); 改為 document.getElementBy Id('generate').onclick = handleGenerate;。」

Slide 29

Slide 29 text

對話式實戰演示這個範例展示了從開啟網頁到前端偵錯的完整過程

Slide 30

Slide 30 text

05 未來的挑戰應用中仍有一些需要注意的限制和挑戰

Slide 31

Slide 31 text

目前的挑戰與注意事項特點項目文字 15 特點項目文字內容邏輯複雜邏輯的測試場景建議由專業測試人員設計大量並發測試可能產生較高成本需要合理規劃準確度使用清晰、具體的指令,必要步驟描述了解這些限制可以幫助我們更好地規劃使用策略內容生成的內容需要更精確的選擇器描述或多次嘗試邏輯複雜邏輯的測試場景建議由專業測試人員設計成本大量並發測試可能產生較高成本需要合理規劃

Slide 32

Slide 32 text

No content