Skip to main content

撰寫測試

簡介​

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/');

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

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

  // 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();
});
note

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

Actions​

導覽​

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

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

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

互動​

執行操作從定位元素開始。Playwright 使用 Locators API 來實現這一點。Locators 代表了一種在任何時刻在頁面上找到元素的方法，了解更多關於可用的 不同類型 的 locators。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 部分以了解更多資訊。

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

斷言​

Playwright 包含 test assertions 以 expect 函式 的形式。要進行斷言，呼叫 expect(value) 並選擇一個反映預期的匹配器。

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

expect(success).toBeTruthy();

Playwright 也包含將等待直到預期條件滿足的異步匹配器。使用這些匹配器可以使測試不易失敗且具有彈性。例如，這段程式碼將等待直到頁面獲得包含 "Playwright" 的標題:

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

以下是最受歡迎的非同步斷言清單。請注意，還有更多可以熟悉：

斷言描述
expect(locator).toBeChecked()Checkbox 已勾選
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 基於 測試裝置 的概念，例如 內建的 page 裝置，它會被傳遞到你的測試中。由於 瀏覽器上下文，頁面在測試之間是隔離的，這相當於一個全新的瀏覽器配置檔案，每個測試都會獲得一個全新的環境，即使多個測試在單個瀏覽器中執行。

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.
});

使用測試掛鉤​

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

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/');
  });

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

接下來是什麼​