1.3 第一個測試與執行方式#

第一個測試#

打開 tests/example.spec.ts，或自己建立一個（慣例：檔名以 .spec.ts 結尾）：

import { test, expect } from "@playwright/test";

test("首頁應該正確載入", async ({ page }) => {
  // 1. 開啟頁面
  await page.goto("https://playwright.dev");

  // 2. 斷言：驗證頁面標題
  await expect(page).toHaveTitle(/Playwright/);
});

三個核心要素：

• test("名稱", async ({ page }) => {...})：定義一個測試，page 是自動注入的頁面物件
• await page.goto(url)：開啟網址
• await expect(...)：驗證狀態

執行測試#

npx playwright test              # 跑全部測試（有頭瀏覽器視窗）
npx playwright test --headed     # 顯示瀏覽器視窗（預設是 headless 無頭）
npx playwright test tests/example.spec.ts   # 只跑某個檔案
npx playwright test -g "標題"    # 只跑名稱符合的測試

UI Mode：最好用的開發模式#

npx playwright test --ui

會打開一個互動介面，可以：

• 單獨執行任何一個測試
• 時間旅行：一步步看每個操作後的畫面
• 直接看到 DOM、network、console

開發測試時幾乎都待在 UI Mode。

有頭 vs 無頭#

慣例與建議#

• 測試檔放 tests/ 目錄，檔名 *.spec.ts
• 一個測試只驗證一個使用流程
• 測試名稱用「使用者行為」描述："使用者應該能登入" 而不是 "測試登入函式"

建議的工作流：開發時用 --ui，確認後用 npx playwright test 跑全部，commit 前跑一遍，PR 上讓 CI 跑（見 5.3）。