很多測試人員聽過「Playwright 可以拿來做探索性測試」，但一看到要寫程式就退縮了。這篇文章的前提很簡單：你完全不需要寫程式。所有需要程式碼的地方，都用一段 prompt 請 Claude Code 代勞；你負責的是動腦、操作、判斷，也就是探索性測試真正的核心。
受測物用 Playwright 官網的示範網站 TodoMVC，每一步都附上可以直接複製貼上的 prompt，照著做就能走完一個完整的探索性測試 session。
圖 1：一個 session 的六個步驟。需要程式的三步（2、4、5）全部用 prompt 請 Claude Code 做。
先認識今天的受測物
TodoMVC 是一個極簡的待辦清單：輸入文字按 Enter 新增、勾選完成、雙擊編輯、滑鼠移過出現刪除鈕、底部可以切換 All / Active / Completed 三種篩選，還有「Clear completed」與全選開關。它小到十分鐘就能摸完，但正因為小，才適合用來練習「怎麼探」，而不是被「探什麼」淹沒。
圖 2：TodoMVC 的六個功能點。資料存在瀏覽器的 localStorage，重新整理不會消失。
第 0 步：一次性準備（可以請同事幫忙）
這一步只做一次，之後每個 session 都不用再做。需要三樣東西：
- Node.js：到 nodejs.org 下載安裝，一路下一步即可。
- Claude Code：依官方文件安裝並登入。
- Playwright MCP：讓 Claude Code 能直接操作瀏覽器。在終端機貼上這一行（這是整篇文章唯一需要你自己打的指令）：
claude mcp add playwright npx @playwright/mcp@latest
接著開一個空資料夾（例如 et-playground），在裡面啟動 Claude Code，貼上第一段 prompt：
貼給 Claude Code 的 prompt
請在這個資料夾建立一個 Playwright 專案，用 TypeScript、預設設定，並安裝瀏覽器。
完成後告訴我版本號，並用一句話確認可以開始用了。
Claude Code 會自己執行安裝指令，中途可能問你是否允許，選允許即可。看到版本號就代表環境好了。
| 如果過程中出現紅字錯誤，不用慌：把錯誤訊息整段複製，貼回 Claude Code 並說「幫我解決這個錯誤」。這是接下來每一步遇到問題時的標準動作。 |
第 1 步：先寫一張 charter，決定這次要探什麼
探索性測試和「隨便點點」最大的差別，就是探索之前先決定方向。這一步不需要工具，只需要三行字：
圖 3：Charter 三行模板。這張 charter 之後會直接貼進 prompt 裡，人和 AI 用的是同一張。
時間盒設 45 分鐘。不要貪心，一張 charter 只探一個功能區域；探到一半冒出來的其他念頭，記下來留給下一張。
第 2 步：請 Claude Code 幫你佈置現場
編輯功能要探索，前提是清單裡先有幾筆資料。每次手動打三筆很煩，所以請 Claude Code 寫一段腳本代勞，並且讓它「停在現場」把瀏覽器交給你：
貼給 Claude Code 的 prompt
請寫一個 explore.js 並執行它，需求如下：
1. 用 Playwright 開啟 Chromium（要看得到視窗），前往 https://demo.playwright.dev/todomvc
2. 開啟 trace 記錄（包含截圖與快照）
3. 建立三筆待辦：買牛奶、寫測試報告、回覆客戶信，並把第二筆勾選為已完成
4. 然後呼叫 page.pause() 停下來，把瀏覽器交給我手動操作
5. 等我按 Resume 之後，把 trace 存成 trace.zip 並關閉瀏覽器
執行後告訴我瀏覽器已經準備好。
Claude Code 會寫好檔案並執行。你會看到瀏覽器打開，三筆待辦已經在畫面上，旁邊跳出一個 Playwright Inspector 視窗，腳本停在 page.pause()。從這一刻開始，瀏覽器是你的，想點哪裡就點哪裡。
圖 4：三個視窗的關係。Claude Code 幫你把現場佈置好，瀏覽器停下來等你，Inspector 等你按 Resume。
| 你不需要看懂 explore.js 裡的程式。你需要說清楚的是「現場長什麼樣子」：有幾筆資料、什麼狀態、停在哪一頁。 下一次換一張 charter，只要改 prompt 裡描述現場的那幾句，例如「建立十筆待辦，全部勾選完成，切到 Completed 篩選」。 |
第 3 步：開始探索（這一步只有人能做）
依照 charter，這裡列幾條我自己會試的路線，你可以照做，也可以自己發揮：
- 雙擊「寫測試報告」進入編輯，把內容全部刪光再按 Enter。這筆應該被刪除，還是保留空白？
- 雙擊編輯，輸入前後都帶空白的文字「 買咖啡 」再按 Enter。空白有被去掉嗎？
- 雙擊編輯，改成一段兩百字的文字。畫面會撐開還是截斷？
- 雙擊編輯，打了一半按 Escape。原本的內容有沒有還原？
- 雙擊編輯，打了一半直接點畫面其他地方。行為跟 Enter 一樣，還是跟 Escape 一樣？
- 先切到底部的 Completed 篩選，再編輯那筆已完成的項目並取消勾選。它會立刻從畫面消失嗎？消失得合理嗎？
- 編輯完之後按 F5 重新整理。修改有保存下來嗎？
每試一條，就在旁邊的筆記（一張紙或一個文字檔都可以）寫一行：做了什麼、看到什麼、有沒有怪。這份筆記是探索性測試的產出之一，不要省。
探索完之後，回到 Playwright Inspector 按 Resume，腳本才會從 page.pause() 的下一行繼續跑，把 trace.zip 存下來並關閉瀏覽器。
「按 Resume」是指按 Inspector 視窗左上角工具列的第一顆按鈕，綠色的 ▶，滑鼠移過去會顯示 Resume (F8)，按鍵盤 F8 也可以。
圖 5：Resume 按鈕的位置。它旁邊還有 Step over 等按鈕，不用理會。
| 兩個提醒：第一，不要直接關掉瀏覽器或 Inspector 視窗，那樣腳本會被中斷，trace.zip 不會存下來。 第二，如果 Inspector 被瀏覽器擋住找不到，它是一個獨立的視窗，從工作列切過去就看得到。 |
第 4 步：請 Claude Code 把「我做了什麼」整理成證據
剛才 45 分鐘的每一次點擊、輸入、console 錯誤，都被錄在 trace.zip 裡。你可以自己看，也可以請 Claude Code 先幫你看。先請它打開 Trace Viewer：
貼給 Claude Code 的 prompt
請幫我打開 trace.zip 的 Trace Viewer。
Trace Viewer 會打開。左側是動作列表，中間是每個時間點的畫面快照，下方有 console 與 network。你不需要看懂細節，只要找到「出問題的那一步」，看看它前後發生了什麼。
圖 6：Trace Viewer 版面。左側找動作、中間看快照、下方看 console 與 network。
接著讓 Claude Code 幫你把發現寫成開發人員看得懂的 bug 報告。把你的筆記貼給它：
貼給 Claude Code 的 prompt
我剛才在探索時發現一個問題：雙擊「寫測試報告」進入編輯、刪光內容按 Enter 後，畫面上留下一個空白項目。
請你讀取 trace.zip 的內容，找出對應的那幾個動作，看看有沒有 console 錯誤或異常的網路請求，
然後幫我寫一份 bug 報告：標題、重現步驟（一步一步）、預期結果、實際結果、附加證據（trace 裡的哪幾步）。
這份報告連同 trace.zip 一起交給開發人員，他們打開就能逐步回放，比任何口頭描述都精準。如果整個 session 沒發現問題，trace.zip 直接刪掉即可。
第 5 步：請 Claude Code 當你的「自動記錄員」
第 2 步是「AI 佈置現場，然後你自己探」。還有另一種相反的用法：讓 Playwright 一邊看你操作，一邊幫你把操作記錄下來，而你完全不用碰程式碼：
貼給 Claude Code 的 prompt
請幫我啟動 Playwright codegen，網址是 https://demo.playwright.dev/todomvc，我要開始錄製操作。
瀏覽器和 Inspector 一起打開，接下來你在瀏覽器裡做的每個動作，Inspector 都會即時產生對應的程式碼。你不需要看懂那些程式碼，它的用途是「精確記錄你做了什麼」。
圖 7：codegen 即時記錄。右邊的程式碼你不用看懂，它是給 Claude Code 翻譯用的。
發現 bug 的時候，把 Inspector 裡的程式碼全選複製，貼給 Claude Code：
貼給 Claude Code 的 prompt
下面是 codegen 錄下的操作，請把它翻譯成人看得懂的重現步驟（用中文、一步一步），
並指出最後三步是在做什麼：
（貼上程式碼）
還有一個很實用的技巧。TodoMVC 把資料存在瀏覽器裡，如果你想保留一組準備好的資料給下次用：
貼給 Claude Code 的 prompt
請用 codegen 開啟 todomvc，並在我關閉瀏覽器時把儲存狀態存成 state.json。
之後我說「載入上次的資料」時，請用 state.json 開啟。
對需要登入的真實系統，這招同樣適用：登入一次存起來，之後每個 session 都跳過登入。
第 6 步：讓 AI 直接去探，你當指揮
前面幾步都是人在操作瀏覽器。AI 時代多了一個選項：讓 Claude Code 透過 Playwright MCP 自己開瀏覽器去探，你只負責決定方向和判斷結果。把第 1 步的 charter 幾乎原封不動地餵給它：
貼給 Claude Code 的 prompt
用 Playwright MCP 打開 https://demo.playwright.dev/todomvc。先建立三筆待辦。
接著探索「編輯待辦」功能：分別嘗試空白內容、前後帶空白、兩百字長文、特殊字元，
每種內容都試三種離開方式（Enter、Escape、點其他地方）。
每一次操作後截圖，最後整理成一張表：輸入內容、離開方式、實際結果、你覺得是否異常。
不確定是否異常的請標「?」，不要自己下結論。
Claude Code 會自己操作瀏覽器，把 12 種組合跑完並整理成表格。這件事人做要花二十分鐘而且會漏，AI 幾分鐘就窮舉完。
圖 8：AI 搭檔的分工。charter 由人寫，窮舉由 AI 跑，「是不是問題」由人判斷。
但表格出來之後，真正的工作才開始。AI 標記「異常」的地方，你要判斷是不是真的異常；AI 沒標記的地方，你要看看有沒有它看不出來的問題。舉例來說，「前後空白被去掉」AI 可能覺得正常，但如果你們的產品規格說要保留使用者原始輸入，那就是 bug。這種判斷 AI 沒有脈絡，只有人有。
一個好習慣是把 AI 的表格當成第二輪探索的起點：看完表格，挑兩三個你覺得可疑的組合，回到第 2 步請它重新佈置現場，你親自再走一次。
第 7 步：收尾，把探索的成果留下來
45 分鐘結束時，整理三個清單：
第一，發現的問題。每一個都附上第 4 步或第 5 步產出的重現步驟與 trace。以 TodoMVC 來說，你大概會在「編輯時清空內容」和「點其他地方離開編輯」這兩處看到值得討論的行為。
第二，值得自動化的路徑。探索過程中，如果某個行為很重要、又已經和開發或 PO 確認了正確答案，就請 Claude Code 把它寫成正式測試，以後自己跑：
貼給 Claude Code 的 prompt
請在 tests 資料夾新增一個 Playwright 測試，情境是：
在 todomvc 新增一筆待辦「買牛奶」，雙擊進入編輯，把內容清空後按 Enter，
預期結果：這筆待辦被刪除，清單裡沒有任何項目。
寫完後執行它，把結果告訴我。
這就是探索性測試和自動化測試的正確關係：探索負責發現，自動化負責守住已經確認的東西。你不需要會寫測試，你需要會描述「情境」和「預期結果」。
第三，下一張 charter。探索過程一定會冒出「咦，那篩選功能呢？」「全選之後再新增會怎樣？」這類念頭，把它們記下來，就是下一個 session 的起點。
給測試人員的 prompt 心法
整篇文章的 prompt 都遵守同一套結構，你可以套用在任何系統上：
- 說清楚現場：網址、要建立什麼資料、什麼狀態、停在哪一頁。
- 說清楚動作：要試哪些輸入、哪些操作、幾種組合。不確定就列出來，讓 AI 幫你窮舉。
- 說清楚產出格式：表格、bug 報告、重現步驟。格式指定得越具體，結果越能直接用。
- 把判斷留給自己：請 AI 標「?」而不是下結論。異常與否，由你決定。
- 出錯就貼回去：任何紅字錯誤，整段複製貼給 Claude Code 說「幫我解決」，不用自己看懂。
給想多練幾次的人：三張現成的 charter
- 探索「篩選與重新整理」：在 Active / Completed 各種狀態下切換、新增、刪除、重整，看網址、畫面、儲存的資料三者是否一致。
- 探索「全選開關」：全選、取消全選、在全選狀態下新增一筆、在 Completed 篩選下全選，看計數器與開關狀態是否同步。
- 探索「輸入邊界」：新增時輸入空白、只有空格、Emoji、HTML 標籤、上千字，看畫面、儲存、與後續編輯是否正常。
每張都可以用第 2 步的 prompt 改幾句「現場描述」就開始。
最後提醒
整篇文章裡，Claude Code 和 Playwright 做的事只有三件：佈置現場、幫你記錄、幫你窮舉。它們從頭到尾沒有替你決定「這算不算問題」。不會寫程式從來不是做探索性測試的門檻；不會思考才是。工具越強，判斷越值錢，也越是測試人員真正的價值所在。
| 快速對照表 佈置現場 → 「寫 explore.js，建好資料後 page.pause() 交給我」 幫你記錄 → 「打開 trace.zip」「啟動 codegen」「把程式碼翻成重現步驟」 幫你窮舉 → 「用 Playwright MCP 打開網站，試 X × Y 種組合，整理成表」 守住結論 → 「新增一個測試，情境是…預期結果是…」 判斷是不是問題 → 你 |
發表迴響