Skip to main content

撰寫測試

簡介​

Playwright 測試很簡單：它們執行動作並斷言狀態符合預期。

Playwright 會在執行每個動作前自動等待可動作性檢查通過。您不需要加入手動等待或處理競爭條件。Playwright 斷言設計用來描述最終會滿足的預期，消除不穩定的逾時和競爭檢查。

您將學習

第一個測試​

查看以下範例了解如何撰寫測試。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 期望標題「包含」子字串。
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 點擊開始使用連結。
  await page.getByRole('link', { name: 'Get started' }).click();

  // 期望頁面有名為 Installation 的標題。
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
note

在 VS Code 中使用 JavaScript 時，請在每個測試檔案開頭加入 // @ts-check 以獲得自動型別檢查。

動作​

導航​

大多數測試從導航到 URL 開始。之後，測試與頁面元素互動。

await page.goto('https://playwright.dev/');

Playwright 會等待頁面達到載入狀態後再繼續。了解更多關於 page.goto() 選項。

互動​

執行動作首先需要定位元素。Playwright 使用定位器 API來達到這個目的。定位器代表在頁面上任何時刻尋找元素的方法。了解更多關於可用的不同類型定位器。

Playwright 會在執行動作前等待元素變成可動作，因此您無需等待它變成可用。

// 建立一個定位器。
const getStarted = page.getByRole('link', { name: 'Get started' });

// 點擊它。
await getStarted.click();

在大多數情況下，它會寫成一行：

await page.getByRole('link', { name: 'Get started' }).click();

基本動作​

以下是最受歡迎的 Playwright 動作。完整清單請查看定位器 API區段。

動作描述
locator.check()選取輸入核取方塊
locator.click()點擊元素
locator.uncheck()取消選取輸入核取方塊
locator.hover()將滑鼠懸停在元素上
locator.fill()填入表單欄位，輸入文字
locator.focus()聚焦元素
locator.press()按下單一按鍵
locator.setInputFiles()選擇要上傳的檔案
locator.selectOption()在下拉式選單中選擇選項

斷言​

Playwright 以 expect 函式的形式包含測試斷言。要進行斷言，請呼叫 expect(value) 並選擇反映預期的比對器。

Playwright 包含非同步比對器，會等待直到預期條件滿足。使用這些比對器讓測試不會不穩定且具有彈性。例如，此程式碼會等待直到頁面取得包含 "Playwright" 的標題：

await expect(page).toHaveTitle(/Playwright/);

以下是最受歡迎的非同步斷言。完整清單請參閱斷言指南：

斷言描述
expect(locator).toBeChecked()核取方塊已選取
expect(locator).toBeEnabled()控制項已啟用
expect(locator).toBeVisible()元素可見
expect(locator).toContainText()元素包含文字
expect(locator).toHaveAttribute()元素具有屬性
expect(locator).toHaveCount()元素清單具有指定長度
expect(locator).toHaveText()元素符合文字
expect(locator).toHaveValue()輸入元素具有值
expect(page).toHaveTitle()頁面具有標題
expect(page).toHaveURL()頁面具有 URL

Playwright 也包含通用比對器如 toEqual、toContain、toBeTruthy，可用來斷言任何條件。這些斷言不使用 await 關鍵字，因為它們對已有的值執行即時同步檢查。

expect(success).toBeTruthy();

測試隔離​

Playwright Test 基於測試固件的概念，如內建頁面固件，會傳遞到您的測試中。由於瀏覽器情境，頁面在測試之間是隔離的，這相當於全新的瀏覽器設定檔。每個測試都會取得新的環境，即使多個測試在單一瀏覽器中執行。

tests/example.spec.ts
import { test } from '@playwright/test';

test('example test', async ({ page }) => {
  // "page" 屬於一個隔離的 BrowserContext，專為此特定測試建立。
});

test('another test', async ({ page }) => {
  // 第二個測試中的 "page" 與第一個測試完全隔離。
});

使用測試掛勾​

您可以使用各種測試掛勾，如 test.describe 宣告測試群組，以及 test.beforeEach 和 test.afterEach，它們在每個測試之前/之後執行。其他掛勾包括 test.beforeAll 和 test.afterAll，它們在所有測試之前/之後針對每個工作程序執行一次。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // 在每個測試之前前往起始 URL。
    await page.goto('https://playwright.dev/');
  });

  test('main navigation', async ({ page }) => {
    // 斷言使用 expect API。
    await expect(page).toHaveURL('https://playwright.dev/');
  });
});

接下來做什麼​