跳到主要內容

從 Testing Library 遷移

遷移原則​

本指南描述如何從 DOM Testing Library、React Testing Library、Vue Testing Library 和 Svelte Testing Library 遷移到 Playwright 的實驗性元件測試。

注意

如果您在瀏覽器中使用 DOM Testing Library (例如，您使用 webpack 捆綁端對端測試)，您可以直接切換到 Playwright Test。以下範例著重於元件測試，但對於端對端測試，您只需要將 await mount 替換為 await page.goto('https://127.0.0.1:3000/') 即可開啟測試中的頁面。

速查表​

Testing LibraryPlaywright
screenpage 和 component
查詢定位器
非同步 helpers斷言
使用者事件動作
await user.click(screen.getByText('Click me'))await component.getByText('Click me').click()
await user.click(await screen.findByText('Click me'))await component.getByText('Click me').click()
await user.type(screen.getByLabelText('Password'), 'secret')await component.getByLabel('Password').fill('secret')
expect(screen.getByLabelText('Password')).toHaveValue('secret')await expect(component.getByLabel('Password')).toHaveValue('secret')
screen.getByRole('button', { pressed: true })component.getByRole('button', { pressed: true })
screen.getByLabelText('...')component.getByLabel('...')
screen.queryByPlaceholderText('...')component.getByPlaceholder('...')
screen.findByText('...')component.getByText('...')
screen.getByTestId('...')component.getByTestId('...')
render(<Component />);mount(<Component />);
const { unmount } = render(<Component />);const { unmount } = await mount(<Component />);
const { rerender } = render(<Component />);const { update } = await mount(<Component />);

範例​

Testing Library

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('sign in', async () => {
  // Setup the page.
  const user = userEvent.setup();
  render(<SignInPage />);

  // Perform actions.
  await user.type(screen.getByLabelText('Username'), 'John');
  await user.type(screen.getByLabelText('Password'), 'secret');
  await user.click(screen.getByRole('button', { name: 'Sign in' }));

  // Verify signed in state by waiting until "Welcome" message appears.
  expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
});

逐行遷移到 Playwright Test

const { test, expect } = require('@playwright/experimental-ct-react'); // 1

test('sign in', async ({ mount }) => { // 2
  // Setup the page.
  const component = await mount(<SignInPage />); // 3

  // Perform actions.
  await component.getByLabel('Username').fill('John'); // 4
  await component.getByLabel('Password').fill('secret');
  await component.getByRole('button', { name: 'Sign in' }).click();

  // Verify signed in state by waiting until "Welcome" message appears.
  await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
});

遷移重點 (請參閱 Playwright Test 程式碼片段中的內嵌註解)

  1. 從 @playwright/experimental-ct-react (或 -vue, -svelte) 匯入所有內容以進行元件測試，或從 @playwright/test 匯入以進行端對端測試。
  2. 測試函式會獲得一個與其他測試隔離的 page，以及一個在該頁面中呈現元件的 mount。這些是 Playwright Test 中有用的 fixture 中的兩個。
  3. 將 render 替換為 mount，後者會傳回元件定位器。
  4. 使用使用 locator.locator() 或 page.locator() 建立的定位器來執行大多數動作。
  5. 使用斷言來驗證狀態。

遷移查詢​

所有類似 getBy...、findBy...、queryBy... 及其多元素對應項的查詢都將替換為 component.getBy... 定位器。定位器始終在需要時自動等待和重試，因此您不必擔心選擇正確的方法。當您想要執行列表操作時，例如斷言文字列表，Playwright 會自動執行多元素操作。

替換 waitFor​

Playwright 包含斷言，可自動等待條件，因此您通常不需要明確的 waitFor/waitForElementToBeRemoved 呼叫。

// Testing Library
await waitFor(() => {
  expect(getByText('the lion king')).toBeInTheDocument();
});
await waitForElementToBeRemoved(() => queryByText('the mummy'));

// Playwright
await expect(page.getByText('the lion king')).toBeVisible();
await expect(page.getByText('the mummy')).toBeHidden();

當您找不到合適的斷言時，請改用 expect.poll。

await expect.poll(async () => {
  const response = await page.request.get('https://api.example.com');
  return response.status();
}).toBe(200);

替換 within​

您可以使用 locator.locator() 方法在另一個定位器內建立定位器。

// Testing Library
const messages = document.getElementById('messages');
const helloMessage = within(messages).getByText('hello');

// Playwright
const messages = component.getByTestId('messages');
const helloMessage = messages.getByText('hello');

Playwright Test 超能力​

一旦您使用 Playwright Test，您將獲得很多好處！

  • 完整的零設定 TypeScript 支援
  • 在所有 Web 引擎 (Chrome、Firefox、Safari) 和任何流行的作業系統 (Windows、macOS、Ubuntu) 上執行測試
  • 完整支援多個來源、(i)frames、分頁和上下文
  • 跨多個瀏覽器平行隔離執行測試
  • 內建測試產物收集

您還可以獲得所有這些 ✨ 令人驚嘆的工具 ✨，它們與 Playwright Test 捆綁在一起

延伸閱讀​

深入了解 Playwright Test 執行器