Skip to main content

從 Testing Library 遷移

遷移原則

本指南說明如何從 DOM Testing LibraryReact Testing LibraryVue Testing LibrarySvelte Testing Library 遷移到 Playwright 的實驗性元件測試

note

若您在瀏覽器中使用 DOM Testing Library(例如,您使用 webpack 來打包端對端測試),您可以直接切換到 Playwright Test。以下範例專注於元件測試,但對於端對端測試,您只需將 await mount 替換為 await page.goto('http://localhost:3000/') 即可開啟待測頁面。

Cheat Sheet

Testing LibraryPlaywright
screenpagecomponent
queries定位器
async helpers斷言
user events操作
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 () => {
// 設定頁面。
const user = userEvent.setup();
render(<SignInPage />);

// 執行操作。
await user.type(screen.getByLabelText('Username'), 'John');
await user.type(screen.getByLabelText('Password'), 'secret');
await user.click(screen.getByRole('button', { name: 'Sign in' }));

// 透過等待「歡迎」訊息出現來驗證登入狀態。
expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
});

逐行遷移到 Playwright Test:

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

test('sign in', async ({ mount }) => { // 2
// 設定頁面。
const component = await mount(<SignInPage />); // 3

// 執行操作。
await component.getByLabel('Username').fill('John'); // 4
await component.getByLabel('Password').fill('secret');
await component.getByRole('button', { name: 'Sign in' }).click();

// 透過等待「歡迎」訊息出現來驗證登入狀態。
await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
});

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

  1. 對於元件測試,從 @playwright/experimental-ct-react(或 -vue、-svelte)匯入所有內容,對於端對端測試,則從 @playwright/test 匯入。
  2. 測試函數會收到一個與其他測試隔離的 page,以及一個在此頁面中渲染元件的 mount。這是 Playwright Test 中兩個有用的佈置
  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 支援
  • 任何熱門作業系統(Windows、macOS、Ubuntu)上跨所有網頁引擎(Chrome、Firefox、Safari)執行測試
  • 完整支援多來源、(i)frames分頁和情境
  • 在多個瀏覽器中平行隔離執行測試
  • 內建測試產出物收集

您還能獲得所有這些與 Playwright Test 一同提供的 ✨ 驚人工具 ✨:

延伸閱讀

了解更多關於 Playwright Test 執行器: