6.1 最常使用的 12 個用法#

日常 E2E 測試 90% 的時間，你只會用到這些：

#	用法	用途
1	`npx playwright test`	跑全部測試
2	`npx playwright test --ui`	UI Mode 互動開發（開發時首選）
3	`npx playwright test --debug`	Inspector 逐步執行
4	`npx playwright show-report`	打開 HTML 報告
5	`page.goto("/login")`	開啟頁面（baseURL 自動補全）
6	`page.getByRole("button", { name: "送出" })`	定位元素（最推薦）
7	`page.getByLabel("電子郵件").fill("...")`	表單輸入
8	`.click()` / `.press("Enter")`	點擊 / 按鍵
9	`await expect(...).toBeVisible()`	驗證可見（自動重試）
10	`await expect(page).toHaveURL(...)`	驗證網址
11	`page.route("/api/", ...)`	攔截網路請求（Mock）
12	`test.beforeEach(async ({ page }) => {})`	每個測試前的共用準備

按場景記憶#

開發測試：

npx playwright test --ui      # 互動開發、時間旅行
# 不會定位元素 → Inspector 的 Pick locator
npx playwright test --debug

一個標準測試的骨架：

test("使用者應該能登入", async ({ page }) => {
  await page.goto("/login");                                  // 開頁
  await page.getByLabel("電子郵件").fill("user@test.com");     // 操作
  await page.getByLabel("密碼").fill("password123");
  await page.getByRole("button", { name: "登入" }).click();
  await expect(page).toHaveURL(/dashboard/);                  // 驗證
});

確認與提交：

npx playwright test           # 跑全部
# CI 上自動跑，失敗留 trace + 報告

測試失敗要除錯：

npx playwright test --ui      # 本機重現
npx playwright show-report    # 看失敗證據（截圖、trace）

把這一頁存成書籤，前幾週照著寫，兩週後就會內化。