今天要來介紹一個筆者覺得很有感的實作：把 Playwright 接到 Github Copilot 的工作環境裡， 直接用自然語言請它操作瀏覽器、產生測試程式，甚至把多組測試結果各自存成截圖。 原本以為自動化測試一定要先寫一堆 TypeScript，結果居然可以先用人話把需求講清楚，讓 AI 幫忙補第一版啊~

🧭 為什麼要用 Playwright 做測試？
在傳統做法裡，如果要寫瀏覽器自動化測試，通常得自己準備測試框架、定位元件、輸入資料、按下按鈕， 最後再檢查結果。這些工作單看都不難，但一多起來就很容易變成「複製貼上工程」， 程式碼也會慢慢長得像公司十年沒整理的檔案伺服器。

📌 Playwright 的實務優勢
Playwright 可以用同一套 API 操作 Chromium、Firefox 與 WebKit，也支援非同步操作與平行執行測試。 更重要的是，它提供自動等待、測試追蹤、截圖與影片等功能，對於排查「明明我電腦可以，測試機卻不行」這種經典問題， 實務上非常實用。

筆者最喜歡的地方是，它不只是幫忙按按鈕，而是能把整個瀏覽器操作流程記錄下來，讓測試失敗時比較有跡可循。 凡走過必留下痕跡，測試跑過也要留下截圖，不然最後只剩工程師的回憶可以驗證，這就很危險了 😅

🛠️ 開始前的環境準備：工具要先醒著
筆者在開始示範之前，先確認 Playwright 相關 MCP Server 已經正確安裝，而且服務處於啟動狀態。

從 Tools 呼叫 Playwright 而不是MCP服務清單，只要在 Copilot 的 Tools 介面選取或輸入 Playwright 即可。不要看到 MCP 就一直按「新增」，已經加入的工具直接呼叫就好。

🌐 第一個 Demo：用自然語言測試 BMI 網站
這次筆者拿之前做好的 BMI Calculator 網站來練手。流程很單純：開啟網頁、輸入身高與體重， 按下計算按鈕，再確認畫面上的結果是否正確。

筆者在 Copilot Chat 裡直接描述需求，例如請它使用 Chrome 開啟網頁，填入指定的身高與體重， 然後執行 BMI 計算。沒想到它真的會透過 Playwright 開啟瀏覽器、找到欄位、輸入資料並執行測試。

✅ AI 幫我產生測試程式
從畫面可以看到，測試使用了身高 189、體重 90 這組資料，最後結果顯示 pass。 這個瞬間還是有點爽，畢竟以前要自己手刻的程式，現在 AI 可以協助產生，對剛開始學自動化測試的人來說， 絕對是很好的練習入口。

🎯 這裡的關鍵不是「不用寫程式」
筆者必須老實說，AI 不是魔法，也不是按一下就可以退休。真正重要的是： 要能描述清楚測試情境、知道應該驗證什麼，並且看得懂 AI 產生的程式碼。

AI 可以幫忙加速產生樣板，但測試案例的正確性、資料合理性，以及驗證條件是否完整， 還是要由工程師負責。否則只是把「自己寫錯」升級成「AI 幫你寫錯」，速度變快而已。

🧪 不只測一組：把測試資料做成 Test Case
實際情境當然不會只有一組資料。只測 189 公分、90 公斤，通過了就開始放鞭炮，這樣未免太樂觀。 所以筆者接著準備三組測試案例，讓 Playwright 逐筆讀取資料並執行。

多組案例測試實作，請參考完整版影片囉

🚀 本日結論：這項技能真的要學起來
這次用 Playwright 搭配 Copilot 實作 BMI 網站測試，筆者覺得最大的價值不是「不用寫任何程式」， 而是把自動化測試的門檻降低了。以前可能要先熟悉 TypeScript、Playwright API、locator 與 assertion， 現在可以先用自然語言描述測試流程，再從 AI 產生的 spec 開始理解。

🏆
如果你還在每天手動點網站、填資料、截圖、貼到群組回報，那這項自動化測試技能絕對值得投入時間； 不一定要一次做到很大，先從一個表單、一個流程、一組資料開始，慢慢把重複工作交給工具。