從 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('http://localhost:3000/')
即可開啟待測頁面。
Cheat Sheet
Testing Library | Playwright |
---|---|
screen | page 和 component |
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 程式碼片段中的內嵌註解):
- 對於元件測試,從
@playwright/experimental-ct-react
(或 -vue、-svelte)匯入所有內容,對於端對端測試,則從@playwright/test
匯入。 - 測試函數會收到一個與其他測試隔離的
page
,以及一個在此頁面中渲染元件的mount
。這是 Playwright Test 中兩個有用的佈置。 - 將
render
替換為會回傳元件定位器的mount
。 - 使用透過 locator.locator() 或 page.locator() 建立的定位器來執行大部分操作。
- 使用斷言來驗證狀態。
遷移查詢
所有查詢,如 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 一同提供的 ✨ 驚人工具 ✨:
- Visual Studio Code 整合
- UI 模式,用於偵錯測試,具備時光倒流體驗和監看模式。
- Playwright Inspector
- Playwright Test 程式碼產生
- Playwright 追蹤,用於事後偵錯
延伸閱讀
了解更多關於 Playwright Test 執行器: