diff --git a/nodejs/docs/release-notes.mdx b/nodejs/docs/release-notes.mdx index d2f959f783..d7d7b74cd1 100644 --- a/nodejs/docs/release-notes.mdx +++ b/nodejs/docs/release-notes.mdx @@ -2213,7 +2213,7 @@ WebServer is now considered "ready" if request to the specified url has any of t ### Highlights - Components Testing (preview) - Playwright Test can now test your [React](https://reactjs.org/), [Vue.js](https://vuejs.org/) or [Svelte](https://svelte.dev/) components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers. + Playwright Test can now test your [React](https://reactjs.org/) or [Vue.js](https://vuejs.org/) components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers. Here is what a typical component test looks like: diff --git a/nodejs/docs/test-components.mdx b/nodejs/docs/test-components.mdx index 73c246f1b3..9d8cebcb6e 100644 --- a/nodejs/docs/test-components.mdx +++ b/nodejs/docs/test-components.mdx @@ -40,7 +40,7 @@ test('event should work', async ({ mount }) => { ## How to get started -Adding Playwright Test to an existing project is easy. Below are the steps to enable Playwright Test for a React, Vue or Svelte project. +Adding Playwright Test to an existing project is easy. Below are the steps to enable Playwright Test for a React or Vue project. ### Step 1: Install Playwright Test for components for your respective framework @@ -93,7 +93,7 @@ You can include stylesheets, apply theme and inject code into the page where com ### Step 2. Create a test file `src/App.spec.{ts,tsx}` - + @@ -139,20 +139,6 @@ declare module '*.vue'; - - -```js title="app.spec.ts" -import { test, expect } from '@playwright/experimental-ct-svelte'; -import App from './App.svelte'; - -test('should work', async ({ mount }) => { - const component = await mount(App); - await expect(component).toContainText('Learn Svelte'); -}); -``` - - - ### Step 3. Run the tests @@ -273,7 +259,7 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle Provide props to a component when mounted. - + @@ -287,18 +273,6 @@ test('props', async ({ mount }) => { - - -```js title="component.spec.ts" -import { test } from '@playwright/experimental-ct-svelte'; - -test('props', async ({ mount }) => { - const component = await mount(Component, { props: { msg: 'greetings' } }); -}); -``` - - - ```js title="component.spec.ts" @@ -326,7 +300,7 @@ test('props', async ({ mount }) => { Provide callbacks/events to a component when mounted. - + @@ -340,18 +314,6 @@ test('callback', async ({ mount }) => { - - -```js title="component.spec.ts" -import { test } from '@playwright/experimental-ct-svelte'; - -test('event', async ({ mount }) => { - const component = await mount(Component, { on: { click() {} } }); -}); -``` - - - ```js title="component.spec.ts" @@ -379,7 +341,7 @@ test('event', async ({ mount }) => { Provide children/slots to a component when mounted. - + @@ -393,18 +355,6 @@ test('children', async ({ mount }) => { - - -```js title="component.spec.ts" -import { test } from '@playwright/experimental-ct-svelte'; - -test('slot', async ({ mount }) => { - const component = await mount(Component, { slots: { default: 'Slot' } }); -}); -``` - - - ```js title="component.spec.ts" @@ -502,7 +452,7 @@ test('configure routing through hooks config', async ({ page, mount }) => { Unmount the mounted component from the DOM. This is useful for testing the component's behavior upon unmounting. Use cases include testing an "Are you sure you want to leave?" modal or ensuring proper cleanup of event handlers to prevent memory leaks. - + @@ -517,19 +467,6 @@ test('unmount', async ({ mount }) => { - - -```js title="component.spec.ts" -import { test } from '@playwright/experimental-ct-svelte'; - -test('unmount', async ({ mount }) => { - const component = await mount(Component); - await component.unmount(); -}); -``` - - - ```js title="component.spec.ts" @@ -559,7 +496,7 @@ test('unmount', async ({ mount }) => { Update props, slots/children, and/or events/callbacks of a mounted component. These component inputs can change at any time and are typically provided by the parent component, but sometimes it is necessary to ensure that your components behave appropriately to new inputs. - + @@ -576,23 +513,6 @@ test('update', async ({ mount }) => { - - -```js title="component.spec.ts" -import { test } from '@playwright/experimental-ct-svelte'; - -test('update', async ({ mount }) => { - const component = await mount(Component); - await component.update({ - props: { msg: 'greetings' }, - on: { click() {} }, - slots: { default: 'Child' } - }); -}); -``` - - - ```js title="component.spec.ts" @@ -663,7 +583,7 @@ test('example test', async ({ mount, router }) => { ## Frequently asked questions -### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue}`? +### What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,vue}`? ```js test('…', async ({ mount, page, context }) => { @@ -671,9 +591,9 @@ test('…', async ({ mount, page, context }) => { }); ``` -`@playwright/experimental-ct-{react,svelte,vue}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`: +`@playwright/experimental-ct-{react,vue}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`: - + @@ -711,26 +631,6 @@ test('should work', async ({ mount }) => { - - -```js -import { test, expect } from '@playwright/experimental-ct-svelte'; -import HelloWorld from './HelloWorld.svelte'; - -test.use({ viewport: { width: 500, height: 500 } }); - -test('should work', async ({ mount }) => { - const component = await mount(HelloWorld, { - props: { - msg: 'Greetings', - }, - }); - await expect(component).toContainText('Greetings'); -}); -``` - - - Additionally, it adds some config options you can use in your `playwright-ct.config.{ts,js}`. diff --git a/nodejs/docs/testing-library.mdx b/nodejs/docs/testing-library.mdx index aa02dfa3bf..3310642852 100644 --- a/nodejs/docs/testing-library.mdx +++ b/nodejs/docs/testing-library.mdx @@ -8,7 +8,7 @@ import HTMLCard from '@site/src/components/HTMLCard'; ## Migration principles -This guide describes migration to Playwright's [Experimental Component Testing](./test-components) from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro) and [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/intro). +This guide describes migration to Playwright's [Experimental Component Testing](./test-components) from [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro). :::note @@ -80,7 +80,7 @@ test('sign in', async ({ mount }) => { // 2 ``` Migration highlights (see inline comments in the Playwright Test code snippet): -1. Import everything from `@playwright/experimental-ct-react` (or -vue, -svelte) for component tests, or from `@playwright/test` for end-to-end tests. +1. Import everything from `@playwright/experimental-ct-react` (or -vue) for component tests, or from `@playwright/test` for end-to-end tests. 1. Test function is given a `page` that is isolated from other tests, and `mount` that renders a component in this page. These are two of the [useful fixtures](./api/class-fixtures) in Playwright Test. 1. Replace `render` with `mount` that returns a [component locator](./locators). 1. Use locators created with [locator.locator()](/api/class-locator.mdx#locator-locator) or [page.locator()](/api/class-page.mdx#page-locator) to perform most of the actions.