ChatGPT 問世之前有句至高無上的名言：「萬事問 Google」;
時至今日，這句名言也跟著進化成：「萬事問 ChatGPT/AI」了～

ChatGPT 從 2022 年底橫空出世至今 3 年，已經從根本上顛覆了這個世界。從寫出流暢動人的文章、繪製出令人讚嘆的圖片，到製作栩栩如生的影像內容，人類過去獨有的創意界線正在被快速模糊。

最近鬧得沸沸揚揚的 Vibe Coding，正是 AI 升級的最好證明，也就是 AI 不再只是單向的工具，而是具備理解上下文和推導能力的協作夥伴，在這樣的背景下，網頁開發的最後一個環節「測試和品質保證 (QA)」，自然就會成為人們對 AI 的期許目標。

Chrome DevTools 的 MCP 自動化，正是讓 AI 從寫程式，進一步深入到驗證程式的關鍵點。

本日重點

• 學習如何用 Chrome DevTools MCP（Recorder）進行前端的自動化測試
• 練習錄製並回放表單操作、UI互動等常見測試場景，提升測試效率
• 了解 MCP 與傳統 Selenium/Cypress/Playwright 工具的差異與適用時機
• 掌握自動化測試基本流程：錄製、調整、回放、驗證

一、通常手動測試是這樣開始的...

打開終端機，給個暗號 python app.py
填寫完首頁的資料後，送出資料，開啟 result.html

1.「儲存這筆資料」：使用者驅動的儲存機制

• Day16 有說明設計這個 result.html 頁面的想法
• 昨天有提到「使用者驅動」的儲存機制，result.html 頁面的「儲存這筆資料」，就是這種設計方式：「專案的資料儲存由使用者自行決定是否要寫入資料庫」。

2.「查詢飲食紀錄」：

二、認識 Chrome DevTools MCP

1. Chrome DevTools MCP 是什麼？

Chrome DevTools MCP（Manual Chrome Playback，又稱 Recorder）是 Chrome 內建的自動化測試功能，能直接在瀏覽器錄製使用者操作流程，並快速重播驗證操作結果。適合前端開發、UI、表單等重複步驟，無需寫程式即可生成測試腳本，大幅提升測試效率與穩定性。

2. 自動測試工具比較表

讀者可選擇適合自己的工具，不一定要使用 Chrome DevTools MCP

三、實作過程

今天練習用的專案來源：
Day23. Flask 與資料庫整合 Ep2：練習用 SQLite 實作留言板功能（＆單元測試）

step 1. 開啟 Chrome DevTools > Recorder

1. 在目標頁面上按 F12 或右鍵「檢查」進入開發者工具
2. 選擇「Recorder」頁籤

step 2. 開始錄製

1. 點選「Record」按鈕，開始操作
2. 依實際需求先操作一次給 MCP 看（例如：「填寫表單」「送出表單」...等等）
3. 操作完畢點「Stop」，自動生成互動腳本

step 3. 播放並驗證測試結果

• 按下「Replay」，Chrome 就會自動重播剛才操作流程

圖片中最新的一筆紀錄（紅色框框），就是 Chrome DevTools 測的

step 4. 腳本調整與擴充

• 可匯出腳本成 JSON、或轉換為 Puppeteer/Playwright 代碼（取決於Chrome版本）
• 可針對重複任務（例：多筆資料填寫、異常處理）調整錄製片段或多次重播驗證

四、延伸閱讀

• Chrome DevTools Recorder 官方文檔
• Chrome DevTools 使用教學
• Selenium 官方網站
• Cypress 官方網站
• Playwright 官方網站