在軟體開發的過程中，確保程式碼上線後能正常運作是至關重要的一環。在這之中，「端對端測試」（End-to-End Testing，簡稱E2E測試）是最貼近真實使用者的測試方法，它會模擬使用者打開瀏覽器、點擊按鈕、輸入資料的完整流程。這種測試雖然精準，卻讓開發者又愛又恨。因為只要網頁的介面稍微改動（例如按鈕換了位置或改了名稱），測試腳本就會有錯，維護起來相當耗時。
為了解決這個痛點，資策會開發了一套基於大語言模型的e2e-testing輔助工具。它能夠讓AI看懂網頁結構、自動幫忙寫測試步驟，甚至在測試失敗時，自己找出原因並嘗試修復。本文將分享這個工具是如何將AI技術落實到日常的程式開發與品質把關中。

創新技術介紹

市面上有許多AI工具可以幫忙寫程式碼，但在網頁測試領域，光會寫程式是不夠的。網頁環境瞬息萬變，按鈕可能還沒載入完成，或是畫面彈出了預期之外的警告視窗，甚至對使用者再平凡不過的表單和表單驗證，都會成為工具完成測試的麻煩。而e2e-testing工具的核心設計理念，是建立一套「錯誤處理與除錯循環」。

這個工具不只是寫程式，還會「自我修正」，運作流程可以用幾個簡單的指令來理解：

1.分析與規劃：當我們給AI一個網頁時，它會先像人類一樣「觀察」畫面，分析有哪些按鈕、輸入框，並產出一份網頁的結構表與測試涵蓋計畫。

2.建立與執行：接著，它會根據計畫寫出測試腳本，並且自動打開瀏覽器跑跑看。

3.遇到錯誤自動修復：這是工具最實用的地方。如果測試失敗了，AI 不會直接放棄並丟出一堆錯誤代碼，它會去查看錯誤的原因，例如：
●找不到按鈕：AI 會重新檢視目前的網頁畫面，發現「原來按鈕的名字從『加入購物車』變成『立即購買』了」，然後自動修改測試腳本並重試。
●畫面載入太慢：AI 發現點擊失敗是因為網頁還在轉圈圈，它就會在腳本裡加上「等待載入」的指令再試一次。

4.人工操作錄製： 如果網頁邏輯太複雜，開發者也可以自己點擊一遍給 AI 看，AI 會把你的滑鼠動作直接翻譯成標準的測試程式碼。

圖1：AI 遇到錯誤時，自動修正腳本並重新測試的流程圖
資料來源：圖片由Gemini Nano Banana 2生成

創新應用案例

我們可以想像一個常見的開發情境：一個電商網站的開發團隊，最近為了提升使用者體驗，把原本在網頁左側的「會員登入」區塊移到了右上角，並且稍微修改了登入表單的設計。在過去，負責測試的工程師必須手動打開測試程式碼，一行一行找出舊的按鈕定位，然後改成新的定位，這個過程枯燥且容易漏改。

現在，透過導入這個 AI 測試工具的「維護模式」，開發者只需要告訴 AI：「我剛剛改了程式碼，幫我更新相關的測試」。AI 就會自動執行現有的測試，AI 可能不會一次就完美達成任務，測試可能會因為找不到舊的登入區塊而失敗，但是 AI 的「除錯循環」會啟動，它會透過截圖和程式碼分析，立刻辨識出登入區塊的新位置，自動將舊的腳本替換成正確的版本，並再次執行測試，直到通過為止。

結論與建議

雖然這個工具能大幅減少繁瑣的測試維護工作，但在實際開發運用中，依然有需要注意的挑戰與限制：

1.高度客製化介面的辨識盲區：AI雖然聰明，但如果網頁使用的是極度非標準化的設計（例如，完全用繪圖畫布Canvas 刻出來的遊戲介面，或是沒有任何語意化標籤的自訂元件），AI依然會看不懂，導致無法準確點擊。

2.無法修復的系統層級錯誤：如果測試失敗的原因不是按鈕找不到，而是後端資料庫當機、或是伺服器根本沒有回應，AI也是束手無策，這時仍需要人類工程師介入處理。

3.效能與成本考量：讓AI仔細分析整個網頁的程式碼結構，需要消耗大量的 token。對於架構極度龐大、動輒數萬行程式碼的單一網頁，如何有效率地讓AI只看「重點」，是未來需要持續優化的效能議題。

筆者認為， e2e-testing 工具並不是要取代專業的測試人員，而是要成為開發團隊的助手。它可以接手最無聊的「找按鈕、改定位」工作，讓團隊成員能把精力專注在設計更嚴謹、更有價值的測試邏輯上。

封面圖片來源：本文作者使用Gemini Nano Banana 2生成
參考資料來源： https://github.com/ClayLeee/my-everything-claude-code