Skip to content

feat(roll): roll to ToT Playwright (roll/next-18-02-26) #1974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Skn0tt merged 1 commit into from
Feb 19, 2026
Merged

feat(roll): roll to ToT Playwright (roll/next-18-02-26) #1974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion nodejs/docs/release-notes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
120 changes: 10 additions & 110 deletions nodejs/docs/test-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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}`

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand Down Expand Up @@ -139,20 +139,6 @@ declare module '*.vue';

</TabItem>

<TabItem value="svelte">

```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');
});
```

</TabItem>

</Tabs>

### Step 3. Run the tests
Expand Down Expand Up @@ -273,7 +259,7 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle

Provide props to a component when mounted.

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand All @@ -287,18 +273,6 @@ test('props', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';

test('props', async ({ mount }) => {
const component = await mount(Component, { props: { msg: 'greetings' } });
});
```

</TabItem>

<TabItem value="vue">

```js title="component.spec.ts"
Expand Down Expand Up @@ -326,7 +300,7 @@ test('props', async ({ mount }) => {

Provide callbacks/events to a component when mounted.

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand All @@ -340,18 +314,6 @@ test('callback', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';

test('event', async ({ mount }) => {
const component = await mount(Component, { on: { click() {} } });
});
```

</TabItem>

<TabItem value="vue">

```js title="component.spec.ts"
Expand Down Expand Up @@ -379,7 +341,7 @@ test('event', async ({ mount }) => {

Provide children/slots to a component when mounted.

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand All @@ -393,18 +355,6 @@ test('children', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';

test('slot', async ({ mount }) => {
const component = await mount(Component, { slots: { default: 'Slot' } });
});
```

</TabItem>

<TabItem value="vue">

```js title="component.spec.ts"
Expand Down Expand Up @@ -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.

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand All @@ -517,19 +467,6 @@ test('unmount', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';

test('unmount', async ({ mount }) => {
const component = await mount(Component);
await component.unmount();
});
```

</TabItem>

<TabItem value="vue">

```js title="component.spec.ts"
Expand Down Expand Up @@ -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.

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand All @@ -576,23 +513,6 @@ test('update', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```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' }
});
});
```

</TabItem>

<TabItem value="vue">

```js title="component.spec.ts"
Expand Down Expand Up @@ -663,17 +583,17 @@ 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 }) => {
// …
});
```

`@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`:

<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Svelte', value: 'svelte'}, {label: 'Vue', value: 'vue'}, ] }>
<Tabs groupId="js-framework" defaultValue="react" values={[ {label: 'React', value: 'react'}, {label: 'Vue', value: 'vue'}, ] }>

<TabItem value="react">

Expand Down Expand Up @@ -711,26 +631,6 @@ test('should work', async ({ mount }) => {

</TabItem>

<TabItem value="svelte">

```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');
});
```

</TabItem>

</Tabs>

Additionally, it adds some config options you can use in your `playwright-ct.config.{ts,js}`.
Expand Down
4 changes: 2 additions & 2 deletions nodejs/docs/testing-library.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down