Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs(ct): enhance migrate guide and add further reading

Browse source
This commit is contained in:
sand4rt 2024-06-02 00:45:39 +02:00
parent e047c478a4
commit c33d706804
4 changed files with 48 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/src/protractor-js.md
View file

@ -150,7 +150,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-js)
- [UI mode](./test-ui-mode-js) 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

4
docs/src/puppeteer-js.md
View file

@ -158,7 +158,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-js)
- [UI mode](./test-ui-mode-js) 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

10
docs/src/test-components-js.md
View file

@ -641,3 +641,13 @@ test('override initialState ', async ({ mount }) => {
await expect(component).toContainText('override initialState');
});
```
## Further Reading
- [Running and debugging tests](./running-tests)
- [Test Isolation](./browser-contexts) and [Auto-waiting](./actionability)
- [Locators](./locators), [Actions](./input) and [Assertions](./test-assertions)
- [Emulation](./emulation), [Mock web APIs](./mock) and [browser APIs](./mock-browser-apis)
- [Visual comparisons](./test-snapshots)
- [Testing dialogs](./dialogs) and [Downloads](./downloads)
- [Migrating from Testing Library](./testing-library-js)

59
docs/src/testing-library-js.md
View file

@ -13,20 +13,24 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
## Cheat Sheet
| Testing Library | Playwright |
|---------------------------------------------------------|-----------------------------------------------|
| 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) |
| [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')` |
| [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('...')` |
| `screen.queryByPlaceholderText('...')` | `component.getByPlaceholder('...')` |
| `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })`|
| `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 +41,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 +61,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 +122,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,16 +137,17 @@ 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-js)
- [UI mode](./test-ui-mode-js) 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
## Further Reading
Learn more about Playwright Test runner:
- [Getting Started](./intro)
- [Experimental Component Testing](./test-components)
- [Locators](./locators.md)
- [Assertions](./test-assertions)
- [Auto-waiting](./actionability)
- [Test Isolation](./browser-contexts) and [Auto-waiting](./actionability)
- [Locators](./locators), [Actions](./input) and [Assertions](./test-assertions)
- [Emulation](./emulation), [Mock web APIs](./mock) and [browser APIs](./mock-browser-apis)
- [Visual comparisons](./test-snapshots)
- [Testing dialogs](./dialogs) and [Downloads](./downloads)