第 進階 章
Webwright 不是幫你亂點網頁，
而是幫你留下可重跑的做法
給想把重複網頁操作講清楚、交給 AI 幫忙的上班族
先把成功條件講清楚，再看截圖和 log 對答案，才算真的做完。
先懂它到底在做什麼
很多人第一次聽到 Webwright，會以為它就是「叫 AI 幫我點網站」。這樣理解太淺，也很容易用錯。它比較像一位剛報到的新同事，你不是丟一句「幫我抓報表」就結束，而是要先把工作條件講清楚，讓它照流程做，還把過程留下來給你核對。
Webwright 的重點不是一次幫你把事情做完，而是把這次怎麼做、做完留下什麼、下次怎麼重跑都整理進工作區。它通常會留下 plan.md（任務計畫）、final_script.py（最後執行的腳本）、screenshots（截圖）、final_script_log.txt（操作記錄），所以它更像「可重跑的做法」，不是一次性的點擊錄影。
容易誤會的想法
叫 AI 幫我上網站按一按，看到結果就算完成。
比較正確的想法
先把任務拆成可驗收條件，再讓 AI 在本地終端機裡用 Playwright 這套瀏覽器操作工具操作瀏覽器，過程中保存計畫、腳本、截圖和操作記錄，最後回頭逐條核對證據。
為什麼它看起來比一般瀏覽器 AI 更囉唆
因為它的設計目標不是「看起來很會做」，而是「做完後你能驗收」。以這堂課示範的做法來說，通常會先寫計畫、摸清頁面、整理出 final_script.py、實際執行，再自己逐條對答案。也就是說，它不是先追求華麗，而是先追求能重現。
以這堂課示範的做法來說，任務一旦做通，最後留下來的不只是結果，還會有一份之後能重跑、能交接的做法。這就是它和單純叫 AI 寫一段 Playwright 腳本最大的差別。
先確認你適不適合現在就用
先放心，這堂課不要求你今天就把所有東西裝好。重點先放在怎麼把任務講清楚、怎麼驗收結果。就算你現在還沒裝 Python、Playwright 這套瀏覽器操作工具，或 Firefox 瀏覽器本體，先看懂任務規格怎麼寫，之後再安裝也有收穫。
開始前先確認
如果你現在還沒準備安裝，也沒關係。先把任務規格看懂，之後再動手，挫折會少很多。
不適合當第一個任務
付款、刪除資料、批次修改正式資料、送出表單、改權限。
適合當第一個任務
打開報表頁、套日期、只看某店別、讀 3 個數字、存一張截圖、把結果寫成 CSV 或文字摘要。
先把環境裝起來，再做第一次最小練習
如果你已經看懂 Webwright 在做什麼，下一步就是把本地環境裝到能跑。這一段不用追求一次學會所有進階做法，先求最小可用：電腦上有 Python 環境，裝好 Playwright 這套瀏覽器操作工具，再執行 `playwright install firefox` 把 Firefox 瀏覽器本體裝起來。這個 skill 本身不需要另外準備 API key。
第一次安裝，照這個順序做
Webwright 走的是本地 Playwright Firefox 流程。先把環境裝好，後面練習比較不會卡在基本依賴。
先確認 Python 可用 安裝 Playwright playwright install firefox open 打開瀏覽器 goto 到你要看的頁面 snapshot 看目前畫面地圖 看畫面確認有沒有真的到對的地方
先不要急著做複雜任務。第一次只要能成功開瀏覽器、進頁面、看懂 snapshot 和截圖，就已經完成最小啟動。
常見卡點
還沒把 Python、Playwright、Firefox 裝好，就直接丟一個完整任務給它，結果分不清楚是任務寫錯，還是環境根本沒起來。
比較穩的起手式
先把環境裝好，再做一次最小流程：開瀏覽器、進頁面、看 snapshot、看畫面。先確認最基本的路能通，之後再慢慢加條件。
第一次任務要怎麼講，AI 才不會走偏
AI 很像只照字面做事的新同事。你如果只說「幫我抓報表」，它可能真的抓到一個畫面就回來了，但你真正想要的是特定日期、特定店別、特定欄位，還要留下證據。這種任務越模糊，越容易出現「看起來有做，其實沒有做對」的情況。
到[網站或後台名稱]完成這次任務。請先在 plan.md 把任務拆成驗收重點（critical points），再執行。條件如下：1. 日期範圍是[開始日期]到[結束日期]。2. 只看[店別/品牌/客戶]。3. 讀取這些欄位：[欄位1]、[欄位2]、[欄位3]。4. 結果輸出成[CSV/表格/文字摘要]。5. 保存過程截圖與 final_script_log.txt（操作記錄）。6. 跑完後自己逐條對答案（self-verify），對每個驗收重點指出對應證據。
方括號請換成你自己的任務內容。這種寫法的重點不是客氣，而是可驗收。
模糊講法
幫我抓五月報表。
可驗收講法
到公司報表後台，切到 2026-05-01 到 2026-05-31，只看台北門市，讀取營收、訂單數、新會員數，輸出成一列 CSV，並保存截圖與 final_script_log.txt 當證據。
一個好任務至少講清楚這些
只要少了一項，後面就容易變成你和 AI 各自理解。
怎麼判斷它是真的做對，不是只是跑完
在 Webwright 裡，「跑完」不等於「成功」。真正的完成標準是，每個驗收重點（critical points）都有清楚證據。這個習慣很重要，因為很多網站表面上看起來有切條件，實際上可能沒有套用成功。你如果只看最後有沒有跳回一串數字，很容易把錯的結果當成對的。
驗收時至少看這 4 件事
證據要能讓你或同事回頭看時，知道它是怎麼得到這個結果的。
為什麼要特別強調驗收重點
因為它把「感覺有做到」改成「逐條核對」。例如一個報表任務可以拆成：已打開正確頁面、已套用指定日期、已套用指定店別、已讀出 3 個欄位、已輸出結果、已留下證據。每一條都要能被截圖或操作記錄單獨支持。
以這堂課示範的做法來說，不要把搜尋框輸入關鍵字就當成正式篩選成立。如果網站有原生 filter 或 sort 控制，就要用那個控制，這樣證據才站得住腳。
同一件事每月都做，就把它做成小工具
如果這件事你每個月都做一次，一次講一次跑的一次性模式就不夠了。比較划算的做法，是把這次成功的流程改成可重複執行的小工具。白話講，就是把「這次的具體條件」抽成參數，之後你只改日期、店別或客戶名稱，就能重跑，不用每次從頭講一遍。
/webwright:craft（可以把它理解成把一次任務整理成可重跑小工具的指令）到[網站或後台名稱]抓月報，將[開始日期]、[結束日期]、[店別/品牌/客戶]參數化；預設值重現這次任務；產生可從命令列執行的 final_script.py。你可以把 argparse 想成幫這個小工具收參數的做法，像是輸入 --start-date 這種參數開關。並提供 --help。執行時請在 plan.md 另外加入 # Parameters，列出每個參數的名稱、型別、預設值與格式。
這裡的重點是「參數化」與「預設值可重現原任務」，不是只有把腳本硬塞進命令列。
最小可用的小工具，至少要過這些驗收
這些是讓工具下次能穩定重跑、也方便同事接手的最小要求。
什麼叫參數化
參數化就是把每次會變的值抽出來。例如你每個月抓月報，固定不變的是網站、流程、要讀的欄位；會變的是開始日期、結束日期、店別。那這些就適合做成 `--start-date`、`--end-date`、`--store` 這種命令列上的參數開關。
這樣做的價值不是炫技，而是讓你下個月少打一長串說明，也讓同事接手時知道這個工具到底能改什麼、不能改什麼。
最後記住這些風險守則
瀏覽器自動化工具能處理不少重複操作，但仍不適合直接放在高風險任務上。已有研究指出，瀏覽器 agent 可能受到 prompt injection 影響，也就是網頁裡偷偷塞進的文字被 AI 誤當成指令。因此入門階段建議只做低風險的讀取型任務，先不要把它直接放進付款、刪除資料或其他不可逆的流程。
入門時先守住這些底線
保守不是多此一舉，而是因為這類工具的失誤常常不是「再跑一次」就能補救。
危險用法
讓 AI 直接在正式環境裡登入高權限帳號，自己送出、自己刪除、自己改資料。
比較穩妥的用法
先在低風險任務上驗證流程，只讓 AI 讀資料、截圖、留證。需要送出或異動時，保留人工最後確認。
學完這章，你可以⋯
一句話記住重點
Webwright 最有價值的地方，不是它會幫你點網頁，而是它會把「怎樣算做對」留下來，讓你下次能重跑，也能回頭查。
現在就試
先不要碰付款、送出表單、改資料。這週只挑一個低風險任務來試，例如打開報表頁、套昨天日期、讀 3 個數字、存一張截圖。只要你能把條件講清楚，第一步就算成功。