跳到主要內容

編寫測試

簡介​

Playwright 測試很簡單，它們會

  • 執行動作，以及
  • 斷言狀態是否符合期望。

在執行動作之前，無需等待任何事情：Playwright 會在執行每個動作之前，自動等待各種可操作性檢查通過。

在執行檢查時，也無需處理競爭條件 - Playwright 斷言的設計方式是描述最終需要滿足的期望。

就是這樣！這些設計選擇讓 Playwright 使用者可以完全忘記測試中不穩定的逾時和競爭檢查。

您將學習

第一個測試​

請參考以下範例，了解如何編寫測試。

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

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

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

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

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
注意

在 VS Code 中使用 JavaScript 時，在每個測試檔案的開頭新增 // @ts-check 以取得自動型別檢查。

動作​

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

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

Playwright 將等待頁面達到載入狀態後才繼續前進。深入了解 page.goto() 選項。

互動​

執行動作從定位元素開始。Playwright 使用 定位器 API 來實現。定位器代表一種在任何時刻在頁面上尋找元素的方式，深入了解可用的不同類型的定位器。Playwright 將等待元素變得可操作後才執行動作，因此無需等待其變得可用。

// Create a locator.
const getStarted = page.getByRole('link', { name: 'Get started' });

// Click it.
await getStarted.click();

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

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

基本動作​

這是最受歡迎的 Playwright 動作列表。請注意，還有更多動作，因此請務必查看 Locator API 章節以了解更多資訊。

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

斷言​

Playwright 在 expect 函數的形式中包含測試斷言。若要進行斷言，請呼叫 expect(value) 並選擇一個符合期望的匹配器。

有許多通用匹配器，例如 toEqual、toContain、toBeTruthy，可用於斷言任何條件。

expect(success).toBeTruthy();

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 Test 基於測試夾具的概念，例如傳遞到測試中的內建頁面夾具。由於瀏覽器上下文，頁面在測試之間是隔離的，瀏覽器上下文相當於全新的瀏覽器設定檔，即使多個測試在單一瀏覽器中執行，每個測試都會獲得全新的環境。

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

test('example test', async ({ page }) => {
  // "page" belongs to an isolated BrowserContext, created for this specific test.
});

test('another test', async ({ page }) => {
  // "page" in this second test is completely isolated from the first test.
});

使用測試 Hook​

您可以使用各種測試 hook，例如 test.describe 來宣告測試群組，以及在每個測試之前/之後執行的 test.beforeEach 和 test.afterEach。其他 hook 包括每個 worker 在所有測試之前/之後執行一次的 test.beforeAll 和 test.afterAll。

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

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.dev.org.tw/');
  });

  test('main navigation', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.dev.org.tw/');
  });
});

接下來是什麼​