環境安裝請讀者照官方文件走,這裡只給清單和連結;剩下的時間拿來做正事:用一句中文產出你的第一個 Playwright 測試,親眼看它跑、看它亮綠燈。

環境:三樣東西,照官方文件裝

需要準備三樣:Node.js(執行環境,先裝它)、Claude Code(你的 AI 夥伴)、Playwright(測試框架)。各自的官方文件都寫得很清楚,照著做就好:

• Node.js:nodejs.org 下載 LTS 版本,像一般軟體一路下一步。
• Claude Code:照官方文件安裝(https://code.claude.com/docs/en/overview),需要 Anthropic 帳號與付費方案;學習用量,基本方案通常就夠。裝完在終端機輸入 claude 啟動。
• Playwright:建一個練習資料夾,在裡面啟動 claude,直接說「幫我初始化一個 Playwright 專案,用 JavaScript 不要用 TypeScript」,讓它代勞。想自己裝的話,照 playwright.dev 的 Get started 頁。

裝好的判準,四項:
node --version 回得出版本號、輸入 claude 能啟動並對話、npx playwright --version 回得出版本號、專案裡出現 tests 資料夾。

過程中撞到任何紅字,標準動作:錯誤訊息整段複製,補一句「我剛執行了某某指令」,丟給 Claude Code 照它的建議處理。這一招之後遇到問題都用得上, 不會寫程式沒關係, 就先都交給 Claude Code 幫忙解決。

要記住:Playwright 測的是「瀏覽器裡的網頁」。你們的產品如果是手機原生 App(App Store 或 Play 商店下載的那種),它測不到,那是 Appium 等另一類工具的地盤。產品有網頁版或後台管理系統的話,就適用。

正事開始:第一個測試

我們第一個場景不要太複雜,選一個很小的場景:打開 Playwright 官網,確認頁面標題。這個場景很小,出任何狀況都能安心歸因到環境,除錯範圍最小。對 Claude Code 說:

你可以這樣對 Claude Code 說:
幫我寫一個 Playwright 測試:打開 https://playwright.dev,驗證頁面標題包含「Playwright」這個字。檔名叫 first-test.spec.js,寫好後直接執行給我看結果。

圖 1:從一句話到綠燈的完整流程

它會建檔、寫程式、跑測試。順利的話,終端機出現:

Running 1 test using 1 worker
✓ first-test.spec.js:3:1 › homepage title (1.2s)
1 passed (2.1s)

這份報告很好讀:第一行說用 1 個工人跑 1 個測試,打勾那行是測試名稱和消耗時間,最後一行是總結,1 passed。這就是你的第一個綠燈。

如果第一次跑就紅了,常見原因是網路慢逾時或瀏覽器沒下載完。照上面的標準動作,錯誤整段丟給 Claude Code, 相信你可以找到如何處理。如果真的不行, 只好求助附近會寫程式的同事幫幫忙。

它做事的樣子,順便看一下

圖 2:與 Claude Code 的結對循環

剛才那一分鐘裡,有幾件事值得注意。

它動手前會先問。建檔案、跑指令這類動作,它會先徵求你同意,你可以拒絕,也可以要它先解釋。初期建議保持逐項確認,順便看懂它每步在做什麼。

它做完會回報:檔案建在哪、驗證了什麼。這份回報就是你審查的入口,養成讀完回報再說好的習慣,把關從第一天就開始。

對話是有記憶的。同一場對話裡它記得前面講過什麼,所以「剛才那個測試,幫我改一下」它聽得懂。整個工作模式就是:你描述,它動手,你看結果、提修正。像結對,只是搭檔打字特別快,也不介意你問笨問題。

用有畫面的模式,親眼看它跑

剛才的執行是無頭模式(headless),瀏覽器在背景跑,你看不到畫面。想親眼看,兩條路擇一。

第一條,對 Claude Code 說:
你可以這樣對 Claude Code 說:
用有畫面的模式(headed)再執行一次 first-test.spec.js,讓我看到瀏覽器實際操作的過程。

第二條,自己在終端機下指令,就是平常跑測試的指令加一個 --headed:
npx playwright test first-test.spec.js --headed

你會看到一個瀏覽器視窗自己彈出來、打開網頁、關掉,前後一秒多。

嫌它跑太快看不清?請 Claude Code 幫你放慢:「用 headed 模式跑,每個動作之間停半秒」,它會加上慢動作設定(slowMo),瀏覽器的每一步就變成看得清的連續動作。看完記得請它把慢動作拿掉,日常執行不需要。

很多人是在這一刻真正有感的:原來自動化就是這麼回事——你平常用手做的操作,變成程式在做,而且快非常多。

認識你的新專案

趁熱請它導覽:「用白話介紹這個資料夾裡有哪些東西,各是做什麼的」。幾個成員先混個臉熟:
• tests 資料夾:測試住的地方,你的 first-test.spec.js 就在裡面。
• playwright.config.js:設定檔,控制用哪些瀏覽器、逾時多久。
• package.json:專案的身分證,記錄裝了哪些套件。知道它存在就好。

你的練習場:兩個官方網址,零安裝

接下來的練習, 大多使用Playwright 官方提供的網站,打開網址就能用,不用架任何東西:
• playwright.dev:官網本身。首頁、導覽、站內搜尋,拿來練基本操作和驗證,剛才的第一個測試就是用它。
• demo.playwright.dev/todomvc:官方的示範待辦清單。可以新增事項、勾完成、用 All / Active / Completed 篩選——輸入、清單、篩選、計數一應俱全,官方文件自己的範例也用它。之後表單、資料驅動、清單驗證幾篇,都會在這裡動手。

馬上再來一次

學工具最快的方式是立刻重複。這次換官方示範站,對 Claude Code 說:「幫我寫一個測試,打開 https://demo.playwright.dev/todomvc,驗證頁面上有一個提示文字為 What needs to be done? 的輸入框」。

跑完你會發現:換的只有內容,流程一模一樣——描述、產碼、執行、看結果。這個流程就是接下來的日常,今天你已經走過兩遍了, 相信你應該開始有點信心了, 靠著一張嘴也能請 Playwright 幫你測試。