Skip to content

建立 2026-09-15 更新 2026-09-15

撰寫並執行第一個測試

安裝完成後，這一頁帶你寫出第一支測試，了解測試的基本結構，並學會如何檢視執行結果。

測試的基本結構

在 tests/ 資料夾建立 example.spec.ts：

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

test('首頁標題應包含 Playwright', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('點擊 Get started 會進入文件頁', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

幾個關鍵元素：

  • test()：定義一個測試案例，第一個參數是描述文字，第二個是測試函式。
  • page 是 fixture，Playwright 會自動幫每個測試開一個乾淨的瀏覽器分頁，測試之間互不干擾（詳見 Fixtures 與 Hooks）。
  • expect() 是 Playwright 的斷言函式，toHaveTitle、toBeVisible 屬於「Web-first assertions」，會自動重試直到條件成立或逾時（詳見 互動操作與斷言）。

執行測試

npx playwright test                  # 執行全部測試（預設無頭模式）
npx playwright test example.spec.ts  # 只跑單一檔案
npx playwright test --headed         # 顯示瀏覽器視窗，方便觀察
npx playwright test --ui             # 進入 UI Mode，互動式除錯（見除錯與工具）

檢視測試報表

測試結束後，Playwright 預設會產生 HTML 報表：

npx playwright show-report

報表會列出每個測試的通過／失敗狀態，失敗的測試還能看到截圖、錯誤訊息，以及（若有開啟）Trace 紀錄可回放整個操作過程，這是排查失敗原因最直接的方式，詳見 Trace Viewer 追蹤除錯。

下一步

有了第一支測試後，建議接著閱讀 核心概念，了解 Locators 如何精準又穩定地找到頁面元素。