2.3 斷言：驗證頁面狀態#

expect：Web 第一斷言#

Playwright 的斷言都用 expect，而且會自動重試——元素還沒出現時不會立刻失敗，而是等到超時（見 3.3）。

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

await expect(page).toHaveTitle(/Playwright/);   // 頁面標題
await expect(page).toHaveURL(/dashboard/);      // 目前網址

元素狀態斷言#

// 元素可見 / 隱藏
await expect(page.getByText("歡迎回來")).toBeVisible();
await expect(page.getByText("錯誤訊息")).toBeHidden();

// 勾選狀態
await expect(page.getByLabel("記住我")).toBeChecked();

// 停用狀態
await expect(page.getByRole("button", { name: "送出" })).toBeDisabled();
await expect(page.getByRole("button", { name: "送出" })).toBeEnabled();

// 取得焦點
await expect(page.getByLabel("搜尋")).toBeFocused();

文字與屬性斷言#

// 元素包含特定文字（最常用）
await expect(page.getByRole("heading")).toContainText("歡迎");
await expect(page.getByRole("heading")).toHaveText("歡迎光臨");   // 完全相同

// 屬性值
await expect(page.getByRole("link")).toHaveAttribute("href", "/home");

// 輸入框的值
await expect(page.getByLabel("電子郵件")).toHaveValue("user@test.com");

清單與數量斷言#

// 清單項目數量
await expect(page.getByRole("listitem")).toHaveCount(5);

// 清單內容
await expect(page.getByRole("listitem")).toHaveText(["蘋果", "香蕉", "櫻桃"]);

有條件的斷言（表單驗證錯誤訊息等）#

真實場景：點送出後出現錯誤訊息：

test("空白表單應該顯示錯誤", async ({ page }) => {
  await page.goto("https://my-site.com/login");
  await page.getByRole("button", { name: "登入" }).click();

  await expect(page.getByText("請輸入電子郵件")).toBeVisible();
  await expect(page).toHaveURL(/login/);   // 沒有跳轉
});

常用斷言速查#

斷言	用途
`toBeVisible()` / `toBeHidden()`	可見 / 隱藏
`toHaveText()` / `toContainText()`	文字完全相同 / 包含
`toHaveValue()`	輸入框的值
`toHaveCount()`	元素數量
`toBeChecked()`	已勾選
`toBeEnabled()` / `toBeDisabled()`	可用 / 停用
`toHaveURL()` / `toHaveTitle()`	網址 / 標題
`toHaveAttribute()`	屬性值

心法：測試的名稱寫「使用者會看到什麼」。斷言不是在驗證 DOM，而是驗證使用者眼睛看到的結果——可見、文字、網址。