---
GA: UA-34467841-15
---

# 用 Playwright + MCP 打造 AI 驅動測試流程 - 洪逸崇（Winter）

###### tags: `HelloWorld2025` `HWDC2025` `2025` `DE 會議室` `AI 開發工具實戰和流程改造`

<blockquote>
LINE 購物團隊持續追求「品質穩定」與「快速交付」的平衡，為達成這個目標，本次分享將深入探討由 Playwright 自動化測試框架、模型上下文協議 (MCP) 與人工智慧 (AI) 結合而成的強大解決方案。我們將揭示 Playwright MCP 如何透過自然語言指令，實現測試腳本的自動生成與執行，並透過實戰案例展示其在測試登入功能及前端偵錯上的應用。

聽眾收穫：

1.理解 Playwright MCP 的核心價值：掌握 Playwright 與 AI 結合如何降低測試門檻，提升測試效率。

2.洞悉智慧測試的應用場景：了解 Playwright MCP 在錯誤解析、腳本生成及前端偵錯等方面的實際應用。

3.啟發自動化測試新思維：獲得將自然語言轉化為可執行測試的實用見解，為團隊導入智慧測試提供方向。

4.認識未來挑戰與應對策略：預見智慧測試的潛在限制，並學習如何有效規劃與運用資源。

</blockquote>

{%hackmd @HWDC/announcement-2025 %}

## 會議資訊

**時間：** 10:05 ~ 10:35
**地點：** DE 會議室
**日期：** 2025年10月15日
**語言：** 中文
**難度：** 通識

**相關連結：**
- [Hello World Dev Conference 2025 官方網站](https://hwdc.ithome.com.tw/2025) [target=_blank]
- [Hello World 2025 議程表](https://hwdc.ithome.com.tw/2025/agenda) [target=_blank]

## 筆記區

> 請從這裡開始記錄你的筆記

- Test Case Helper
- 協助自動生成測試案例
- Test Query AI
- 優化測試流程
- 讓 PM 可以透過關鍵字查詢相關測試案例

### 背景介紹
LINE購物團隊，每週release，甚至面臨大型檔期的活動壓力，同時也需要維持品質穩定與快速交付
### Playwright的優勢
快速建立並維護關鍵路徑的E2E測試
1. 跨瀏覽器支援
- 支援多個主流瀏覽器
2. 強大的selecter
- CSS
- Xpath
3. 程式語言支援
- JS/Python/Java/.NET
4. 自動等待機制
- 智慧型等待元素出現、消失，或變為可互動狀態
### 什麼是Playwright MCP
- MCP：允許LLM與外部工具通訊的協定
- Playwright MCP 微軟官方
- ChatGPT/AI模型 -> (call tool) MCP Server <- (JSON RFC) Playwright Browser Context
- Playwright MCP的優勢：
- 即時資料接取
- 個人化
- 模組與自動化
- 可擴展性

### Playwright MCP在測試中的實際應用
1. 解析錯誤訊息
2. 生成測試腳本 (from Confluence的需求文件)
3. 將複雜藍圖變成設計圖的對話生成器，讓更多人可以參與測試流程
4. 非技術人員也能使用(整個團隊都可以參與協作)
- 想法產生
- 語言描述
- AI 理解
- 快速驗證
#### 對話式實戰演示：測試登入功能
- 使用對話完成完整測試生成
- 可透過 MCP 對話式：如功能按鈕沒有作用，請檢查前端程式是否有錯誤，進行排查
- 因此可以協助進行前端偵錯

### 未來的挑戰
- 準確度：不可以是很general的自然語言，要使用清晰具體的指令、必要步驟
- 內容：生成的內容需要更精確的選擇器描述或多次嘗試
- 邏輯：複雜邏輯的測試場景建議由專業的測試人員設計
- 成本：大量的併發測試可能會產生較高成本，需要合理規劃
## 討論區

> 歡迎在此進行討論與 Q&A

Q: 嘗試使用 playwright MCP，想請問目前主流的使用方式為何?
1. 僅維護 md test case，不產出任何 test code，由語言模型理解並執行測試
- 嘗試該方案，測試十分耗時切應該也很耗費 token ?
2. 維護 md test case，透過語言模型產出 test code，後續同步維護兩者
- 嘗試該方案，但要同時維護 test case 跟 test code 有點重複?

Q: 會使用 cucumber .feature來跟 AI 互動嗎？

Q: Playwright本身就可以錄製產生code，和Playwright MCP比較起來哪個比較有效率？

Q: 主講者主要是領導 QA QC 團隊進行測試，想請問 RD 端團隊也有使用 playwright 驗證嗎？

Q: 想請問目前 playwright MCP 好像只 support NodeJs, 所以你們是採用 NodeJs 的 Playwright 自動化腳本嗎? 有嘗試過用 Python 版本的嗎?

Q: Playwright MCP server 可用自然語言快速生成測試操作，但若之後要進行 regression testing，這些透過 MCP 快速產生的測試能否穩定重複使用？是否能輸出成固定的自動化腳本，方便整合進現有 QA 自動化框架嗎？

Q: 在新開發的需求如何利用LLM產生測試案例？新開發得需求通常都只有流程圖

Q: 非技術人員也能使用 Playwright MCP，那 RD 可利用 MCP 方式導出更進階的測試嗎？

Q: 導入了 Playwright MCP Server 後, 對於開發團隊和release 流程有改善多少呢？

## 相關資源

- 投影片連結：(待講者提供)
- 相關文件：(待更新)

## 逐字稿

T1C就是Taiwan E-Commerce,目前我們這個T1C主要有幾個產品,包括LINE購物和旅遊。 目前使用的軟體是 QAD,主要負責Lightbulb相關的測試。 主要管理QA相關的一些工作,我的職責其實不是確保產品的穩定性,主要還有一個是積極探索。 如何將AI的技術應用於測試的流程當中。好,那在AI的應用方面,其實基本上我比較關注怎麼去導入一個大型語言模型。 就是透過 LLM 這邊來協助我們的 QA 來做一個自動生成測試的案例。那從這個畫面裡面其實就是我參與的案子。 對,那其實我的目的就是希望我們能希望QA這邊可以全面提升我們整體的一個功能的穩定,呃,就是

並確保穩定性。這張圖片主要是我參與開發的一個專案,叫做Test Case Harpoon。 對,那它主要是可以根據我們的一些功能的描述,然後或是MyNIC,那自動建立一些case-by-case的案例,那甚至呢,它可以生成一個prerun的自動化的程式。 主要就是大幅減輕了測試人員的工作負擔,這不僅加速了測試案例的長處,也確保了我們測試的覆蓋率。 好,然後再來介紹我另外一個參與的專案,叫做Task Manager AI。那其實這是一個基於Blade的Web應用程式,它主要目的就是 優化我們的測試流程,那它主要利用AI來管理搜尋跟推薦一些測試的案例,然後這個應用程式呢,它採用了一些LPC的架構。

然後運用了一個像那樣的 Embedded 技術,實現了我們的語意搜尋的功能,讓我們的所有的使用這個平臺的,不管是 PM 或是 DEV 或是甚至業務單位的人員,他們在查找一些比較重要的 text 啊。 以上是我的自我介紹,接下來我要講的是今天的演講的重點。 今天的內容主要分成五個部分,首先我們會針對背景來介紹,探討一下我們主要的那個 Quality 跟快速教育的一個重要性。 然後接著呢,我會說明一下Playwright的優勢,為什麼我們要使用Playwright這個MCP,然後再來就是我們怎麼樣快速建立。

然後回復他一個關鍵路徑的Edgeware的測試。第三個部分呢,我們主要介紹什麼是Playwright。第四個部分,我會來探討一下Playwright NGP在測試中的一個實際的應用。 然後最後我們會討論在應用過程當中我們可能要面臨的一些挑戰與限制。

好,那首先我先從背景介紹開始,那我們知道在現在那個目前這個不管是AI啊或是大家在開發產品上這個市場的環境當中變化越來越快。 所以我們產品基本上都會面臨到所有的挑戰,就是品質穩定跟快速迭代的交互。好,那我們再從LINE購物這個團隊為例子,其實基本上我們LINE購物本身是每個禮拜都要release的。 不僅要面對頻率高的版本更新,還要承受大型檔期活動帶來的巨大壓力,這意味著我們必須要確保產品的穩定性。 然後實現一個快速的交通。所以在這邊耐購團隊其實基本上有一些龐大的用戶的基礎跟商品的規模。 所以我們從這些數字裡面來代表圖顯的一個我們測試的工作的一個重要性跟複雜性。好,那在這樣的一個背景下,所以我們需要一個很強大的一個測試工具。

這就是今天討論的一個重點,就是 Playwright 的優勢。Playwright 就是一個現代化的安兔內的測試環境,主要它能夠幫助我們快速維護一個安兔內的測試。 並且確保我們產品在這個快速迭代當中依然保持的高品質。那它有哪些優勢呢?第一個顯著最大的優勢就是一個跨瀏覽器支援。 它能同時支援一個快門、然後還有那個 Firefox 跟 WebAPI。那這意味著開發者呢,基本上只要需要寫一套一個測試的腳本。 就能在主流的瀏覽器上進行測試,大大減少跨瀏覽器相容性測試的複雜性。其次,Playwright其實基本上擁有強大的選取器。

它提供了多種的元素選取方式,包括 CSS、xpath,還有基於文字內容的選取,使得一些測試人員可以精確地 locate 到頁面上的所有元素。 無論結構多不複雜,基本上都能輕鬆應對,提高了測試腳本的穩定性和可回復性。 好,再來,Prereq的支援其實還有多種的一個主流程式語言,那包括JavaScript、Python、Java和.NET,這讓不同的那個TechState的一些團隊,其實基本上可以很容易的導入。 使用playwright 進行測試,基本上會降低人員客戶,促進團隊間的協作,不論你是前端開發或是後端。