Playwright 內建一個很直覺的功能叫 Codegen:開一個瀏覽器讓你實際操作,它同步把你的每個動作變成程式碼。對不寫程式的人來說像魔法。不過先講清楚:它錄出來的是草稿,不是成品。這篇教你怎麼用對它——錄製抓流程,AI 磨品質。

先玩一次

在專案資料夾的終端機輸入(或請 Claude Code 幫你執行):

npx playwright codegen https://demo.playwright.dev/todomvc

會開出兩個視窗:一個瀏覽器讓你操作,一個即時顯示產生的程式碼。試著新增兩筆待辦、勾一筆完成、點一下 Active 篩選,看程式碼一行一行長出來。這個網址就是官方文件示範錄製時用的站。

程式碼視窗的語言下拉,本篇刻意選 Pytest(Python 的測試框架),所以錄出來的存檔叫 test_recorded.py,不是 .spec.js。為什麼故意選一個跟專案不同的語言?示範一件事:錄下來的核心是「流程」,輸出哪種語言都無妨,反正交給 Claude Code 都能轉。你之後遇到別人交接的 Python 錄製稿,也不用慌。

順便觀察一件事:它產生的定位,大多是 getByRole、getByText 開頭的。官方工具自己就遵循第 6 篇講的優先順序,等於幫你現場示範什麼叫語意化定位。

錄製視窗導覽:幾個要認得的按鈕

圖 1:Inspector 視窗的工具列

• ① 錄製(Start/Stop Recording):按一下暫停、再按續錄。用途比想像大——不想入稿的段落(例如先手動登入、或翻找頁面),按暫停做完再續錄,錄出來的稿子乾乾淨淨。
• ②選取定位(Pick Locator):點它再點畫面上任何元素,它顯示 Playwright 會怎麼定位那個元素。查定位的即問即答。
• ③眼睛(Assert Visibility): 點一下眼睛、再點畫面上的成功訊息,程式碼區當場多一條「應該看得到」的 expect
• ④字母(Assert Text): 字母是在確認「文字應該是⋯」
• ⑤勾選框(Assert Value): 勾選框是在確認輸入框的「值應該是⋯」
• ⑥ 截圖(Assert Snapshot): 一次把整塊元素的結構拍下來當斷言。進階款,先認得就好。

複製程式碼的按鈕在程式碼區上方:錄完整段複製、存檔,交給 Claude Code 重構。旁邊可切換輸出語言,本篇示範選 Pytest。

圖2:Inspector程式碼區

為什麼錄出來的只是草稿

圖 3:錄製稿的三個典型問題與 AI 的修法

最大的問題:預設情況下,錄製稿裡不會有斷言。你點、你打字,它就只錄點和打字。工具看得到你做了什麼,看不到你在確認什麼——你操作到訂單成立頁時,眼睛掃過訂單編號、金額、成功訊息,心裡打了三個勾,這三個勾不會自己入稿。

驗證鈕能救回一部分:邊錄邊點,當場補上「看得見、文字是、值是」三種基本款。但也就三種,而且驗得淺——筆數、網址、資料層的驗證,還有反向場景,它都給不了。上一篇說得很清楚:斷言不夠深的測試,守不住東西。所以錄完仍然不能直接收工。

另外兩個問題比較小,但也要處理:定位偶爾會錄到比較有問題的寫法,以及三十行流水帳很難維護。這些都是 AI 擅長修的。

實際看一眼。用開頭那段 TodoMVC 操作(新增兩筆、勾一筆完成、切 Completed 篩選)錄出來的 Pytest 稿,大概長這樣:

def test_example(page: Page):
    page.goto("https://demo.playwright.dev/todomvc")
    page.get_by_placeholder("What needs to be done?").fill("買牛奶")
    page.keyboard.press("Enter")
    page.get_by_placeholder("What needs to be done?").fill("繳電費")
    page.keyboard.press("Enter")
    page.get_by_test_id("todo-item").first\
        .get_by_role("checkbox").check()
    page.get_by_role("link", name="Completed").click()

別被 Python 的長相嚇到:動作和定位的思路跟你學過的一模一樣,只是換了身衣服。問題也一目瞭然:動作都在,驗證一條都沒有——新增有沒有成功、勾完成有沒有生效、篩選出來對不對,全部沒檢查(除非你錄的時候有點驗證鈕)。

標準工作流:你錄流程,AI 補靈魂

圖 4:錄製與 AI 重構的分工

分工的邏輯:錄製解決「元素在哪、流程怎麼走」,這部分你親手操作,比 AI 用猜的準;剩下的「驗證什麼、程式怎麼寫得好」,交給 Claude Code。

實際操作:錄完把程式碼存檔(錄製視窗可以直接複製),回到 Claude Code 說:
你可以這樣對 Claude Code 說:

test_recorded.py 是我用 codegen 錄的待辦清單流程(Pytest):新增兩筆待辦、勾第一筆完成、切到 Completed 篩選。請直接在這份 Pytest 上重構:
1) 補上斷言——新增後清單應有 2 筆;勾完成後應顯示 1 item left;切到 Completed 後應只看到被勾的那筆。
2) 檢查定位方式,脆弱的改掉。
3) 加上中文註解說明每段在做什麼。
4) 重構過程,流程步驟不可增減。改完先給我看差異,再執行。

注意這段指令的結構:流程是錄的,不用再描述;但預期結果是你口述的。又回到那個規律——斷言的品質,來自你描述預期結果的品質。錄製省掉的是描述操作步驟的力氣,省不掉的是測試設計。

它會回給你什麼

送出後,Claude Code 的回覆通常分三塊:先是計畫或差異對照(告訴你哪些地方要動),你確認後它修改檔案並執行,最後總結結果。重構後的成品,大概長這樣:

# 新增兩筆待辦,驗證清單筆數
todo = page.get_by_placeholder("What needs to be done?")
todo.fill("買牛奶")
page.keyboard.press("Enter")
todo.fill("繳電費")
page.keyboard.press("Enter")
expect(page.get_by_test_id("todo-item")).to_have_count(2)
 
# 勾第一筆完成,驗證剩餘數
page.get_by_test_id("todo-item").first\
    .get_by_role("checkbox").check()
expect(page.get_by_text("1 item left")).to_be_visible()
 
# 切到 Completed,應只剩被勾的那筆
page.get_by_role("link", name="Completed").click()
expect(page.get_by_test_id("todo-item")).to_have_count(1)
expect(page.get_by_text("買牛奶")).to_be_visible()

讀這份成品,三個看點。一,結構跟第 4 篇的骨架一模一樣:動作,加 expect——Python 只是把 toHaveCount 寫成 to_have_count,照樣唸得出英文。二,三段中文註解,對應你錄的三段流程,結構清楚了。三,也是最重要的:每段後面都多了 expect——第一段驗筆數、第二段驗剩餘數、第三段驗篩選結果和內容,正好對應你在指令裡口述的三個預期,一條不多、一條不少。

驗收方式就是這個對照:你口述的預期逐條找到對應的 expect,都對得上,收貨;少了哪條、或它自作主張多驗了奇怪的東西,點名要它改。這三十秒的對照,就是你的把關動作。

常見場景的錄法

• 表單:照常填,填完用勾選框圖示(驗證值)逐一點欄位,送出後用字母圖示(驗證文字)點成功訊息。一輪錄完,動作和基本驗證都有了。
• 登入後才有的功能:Record 暫停 → 手動登入 → 續錄。上一段講過的招,實務上使用率最高。
• 說不清怎麼定位的元素:下拉選單、日期選擇器這類,錄一小段,看它產出什麼定位——答案就在稿子裡,之後寫指令直接引用。
• 滑鼠移過去才出現的選單:錄製常抓不到「移過去」這個動作,錄出來會少一步。遇到就別勉強,改用描述式請 AI 寫:「滑鼠移到會員選單上,等子選單出現,點登出」。
• 點擊後另開新分頁:放心點,codegen 會跟著新分頁繼續錄,自動處理切換。

業界怎麼用它

先回答一個你可能已經在想的問題:業界都靠錄製做自動化嗎?不是。而且如果你覺得它不太好用,那個感覺是準的。

錄製回放這類工具,在測試圈的名聲一直不算好。從十幾年前的 Selenium IDE 開始,太多團隊的第一次自動化就是被它帶進溝裡:錄出來的東西容易出錯、囉嗦、沒驗證,改版就整片壞掉。Playwright 的 codegen 比前輩們好很多,但是老問題沒變, 官方自己也把它定位成起點,不是標準作法。

就這樣。沒有人拿它當主力工作法。當AI越強之後, codegen 越不會被用到。後面我們會看到 Claude Code 透過 MCP 來產生操作腳本。如果Codegen的使用遇到挫折感,記得那是工具的天花板,不是你的問題。

今天的練習
• 用 codegen 在 TodoMVC 錄一段:新增兩筆、勾一筆完成、切到 Completed 篩選。體驗程式碼長出來的過程。
• 把錄製稿交給 Claude Code,用上面的指令格式重構,重點是補上你口述的預期結果。
• 比對重構前後的差異,找出它補的 expect 在哪幾行,唸成中文確認驗的是你要的。