docs(ct): update testing library migration guide (#31222)
This commit is contained in:
Sander
GitHub
Родитель
b60f99db36
Коммит
d9ac51bf87
|
|
@ -13,20 +13,25 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
|
|||
|
||||
## Cheat Sheet
|
||||
|
||||
| Testing Library | Playwright |
|
||||
|---------------------------------------------------------|-----------------------------------------------|
|
||||
| [screen](https://testing-library.com/docs/queries/about#screen) | [page](./api/class-page) and [component](./api/class-locator) |
|
||||
| [queries](https://testing-library.com/docs/queries/about) | [locators](./locators) |
|
||||
| [async helpers](https://testing-library.com/docs/dom-testing-library/api-async) | [assertions](./test-assertions) |
|
||||
| [user events](https://testing-library.com/docs/user-event/intro) | [actions](./api/class-locator) |
|
||||
| `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.getByLabel('Password'), 'secret')` | `await component.getByLabel('Password').fill('secret')` |
|
||||
| `expect(screen.getByLabel('Password')).toHaveValue('secret')` | `await expect(component.getByLabel('Password')).toHaveValue('secret')` |
|
||||
| `screen.findByText('...')` | `component.getByText('...')` |
|
||||
| `screen.getByTestId('...')` | `component.getByTestId('...')` |
|
||||
| `screen.queryByPlaceholderText('...')` | `component.getByPlaceholder('...')` |
|
||||
| `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })`|
|
||||
| Testing Library | Playwright |
|
||||
| ------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| [screen](https://testing-library.com/docs/queries/about#screen) | [page](./api/class-page) and [component](./api/class-locator) |
|
||||
| [queries](https://testing-library.com/docs/queries/about) | [locators](./locators) |
|
||||
| [async helpers](https://testing-library.com/docs/dom-testing-library/api-async) | [assertions](./test-assertions) |
|
||||
| [user events](https://testing-library.com/docs/user-event/intro) | [actions](./api/class-locator) |
|
||||
| `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 />);` |
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -37,18 +42,18 @@ import React from 'react';
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
test('should sign in', async () => {
|
||||
test('sign in', async () => {
|
||||
// Setup the page.
|
||||
const user = userEvent.setup();
|
||||
render(<SignInPage />);
|
||||
|
||||
// Perform actions.
|
||||
await user.type(screen.getByLabel('Username'), 'John');
|
||||
await user.type(screen.getByLabel('Password'), 'secret');
|
||||
await user.click(screen.getByText('Sign in'));
|
||||
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.
|
||||
await screen.findByText('Welcome, John');
|
||||
expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -57,14 +62,14 @@ Line-by-line migration to Playwright Test:
|
|||
```js
|
||||
const { test, expect } = require('@playwright/experimental-ct-react'); // 1
|
||||
|
||||
test('should sign in', async ({ page, mount }) => { // 2
|
||||
test('sign in', async ({ mount }) => { // 2
|
||||
// Setup the page.
|
||||
const component = await mount(<SignInPage />); // 3
|
||||
|
||||
// Perform actions.
|
||||
await component.getByText('Username').fill('John'); // 4
|
||||
await component.getByText('Password').fill('secret');
|
||||
await component.getByText('Sign in').click();
|
||||
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
|
||||
|
|
@ -118,7 +123,7 @@ const messages = document.getElementById('messages');
|
|||
const helloMessage = within(messages).getByText('hello');
|
||||
|
||||
// Playwright
|
||||
const messages = component.locator('id=messages');
|
||||
const messages = component.getByTestId('messages');
|
||||
const helloMessage = messages.getByText('hello');
|
||||
```
|
||||
|
||||
|
|
@ -133,7 +138,9 @@ Once you're on Playwright Test, you get a lot!
|
|||
- Built-in test [artifact collection](./test-use-options.md#recording-options)
|
||||
|
||||
You also get all these ✨ awesome tools ✨ that come bundled with Playwright Test:
|
||||
- [Playwright Inspector](./debug.md)
|
||||
- [Visual Studio Code integration](./getting-started-vscode.md)
|
||||
- [UI mode](./test-ui-mode.md) for debugging tests with a time travel experience complete with watch mode.
|
||||
- [Playwright Inspector](./debug.md#playwright-inspector)
|
||||
- [Playwright Test Code generation](./codegen-intro.md)
|
||||
- [Playwright Tracing](./trace-viewer.md) for post-mortem debugging
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче