這次選定的主題是 Playwright 端對端測試（E2E Testing），主要是工作上剛好碰到，而且之前因為工作忙，一直沒什麼機會把之前學得比較零散的基礎整理好，剛好利用這次鐵人賽的機會分享跟學習。

所以這系列除了是 Playwright 的教學文，也算是一個我自己的學習筆記，文章內的程式碼都是實際跑過的，在撰寫的時候碰到的坑也會跟大家分享。那麼就讓我們馬上進入主題吧。

Playwright 是什麼

Playwright 是微軟開源的端對端測試工具。所謂端對端測試，就是讓程式模擬真實使用者去操作瀏覽器，像是開網頁、點按鈕、填表單、送出，然後驗證畫面有沒有出現預期的結果。跟單元測試去驗證一個函式回傳結果不同，E2E 測試驗證的是整條流程串起來是否跟預期的使用方式一致。

簡單說一下Playwright的一些特點：

• 跨瀏覽器：同一份測試可以跑在 Chromium、Firefox、WebKit 上
• 自動等待（auto-waiting）：不用自己設定 sleep來等待元素出現在畫面上，Playwright 會等元素真的可以操作了才動作
• 內建工具齊全：錄製測試的 Codegen、事後回放的 Trace Viewer、HTML 測試報告，原生都有，不用另外安裝其他工具
• TypeScript 原生支援：這系列會以 TypeScript 為主

30天計劃

接下來的 30 天會分成五個階段：

整個過程中間會安排緩衝日，給一個貼近真實工作的小任務，把前面學過的東西實際組起來用一次。

需要什麼基礎

• 看得懂基本的 JavaScript / TypeScript（async / await 會用到，但不會很深）
• 知道怎麼用終端機跑 npm 指令
• 有寫過單元測試（Jest、Vitest 之類的）會更好上手，但沒有也沒關係

至於測試理論、CI/CD 整合這些，這系列不會多談，主要重點會放在Playwright測試的撰寫跟底層架構的學習。

練習專案：react-admin 的 demo

接下來 30 天，我們會固定使用 react-admin 的 demo 作為目標測試網站。

我選的是 react-admin 官方的 demo 專案，一個叫 Posters Galore 的模擬電商後台。選它的理由很單純：

1. 開源，後續的文章中會有需要調整網站程式的需求，例如示範加 data-testid 的需求，有本地的測試檔案可以直接去改程式
2. 功能夠齊全，有登入、列表、篩選、表單、詳細頁，測試情境足夠
3. 不用架後端，資料是用 FakeRest 在瀏覽器端模擬的，npm install 完就能跑

技術上它是 React + TypeScript + Material UI，跟現實專案的架構很接近。

先把測試專案準備好

我們先建立一個資料夾，之後這系列的練習內容（demo 網站 + 我們寫的 Playwright 測試）都會放在這裡面：

mkdir playwright-e2e-practice
cd playwright-e2e-practice

demo 專案其實就是 react-admin 官方 repo 裡的 examples/demo 資料夾。我們可以到 react-admin 這個 repo，進到 examples/demo 資料夾頁面，用 GitHub 提供的下載功能把這個資料夾下載下來，解壓縮後放到剛剛建立的資料夾底下。

接著進到 demo 資料夾，確認它跑得起來：

cd demo
npm install
npm run dev

裝完啟動後，打開瀏覽器連到 http://localhost:8000（這個 port 設定在 demo/vite.config.ts），應該會看到一個登入畫面，上面提示帳密是 demo / demo。

登入進去之後，你會看到一個有儀表板、商品、訂單、客戶、評論的後台系統。可以先隨意點一點，逛一下有哪些頁面跟功能，接下來 30 天我們會針對這個網站功能撰寫測試。

如果 npm install 失敗，先確認 Node.js 版本。這個專案建議用 Node.js 18 以上（LTS 版本），可以用 node -v 檢查。

今日小結

今天說明了這 30 天要學什麼、Playwright 是什麼，也把練習專案準備好了。

明天會安裝 Playwright，然後嘗試寫第一支測試，跑看看。