diff --git a/docs/src/protractor-js.md b/docs/src/protractor-js.md index 279d796b99..9a84364bcc 100644 --- a/docs/src/protractor-js.md +++ b/docs/src/protractor-js.md @@ -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 diff --git a/docs/src/puppeteer-js.md b/docs/src/puppeteer-js.md index e620bed9ea..495d97eed1 100644 --- a/docs/src/puppeteer-js.md +++ b/docs/src/puppeteer-js.md @@ -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 diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md index c618489833..a3e4a8521d 100644 --- a/docs/src/test-components-js.md +++ b/docs/src/test-components-js.md @@ -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) diff --git a/docs/src/testing-library-js.md b/docs/src/testing-library-js.md index a5b4350d98..b84bdae606 100644 --- a/docs/src/testing-library-js.md +++ b/docs/src/testing-library-js.md @@ -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();` | `mount();` | +| `const { unmount } = render();` | `const { unmount } = await mount();` | +| `const { rerender } = render();` | `const { update } = await mount();` | ## 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(); // 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(); // 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)