Skip to content

[pull] main from microsoft:main #524

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
pull merged 6 commits into from
Feb 16, 2026
Merged

[pull] main from microsoft:main #524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
53fe062
fix: component testing w/ svelte bot failures (#39282)
pavelfeldman Feb 16, 2026
3f92471
chore(cli): fix install browser (#39280)
pavelfeldman Feb 16, 2026
c4a8008
chore: tab header fix (#39281)
pavelfeldman Feb 16, 2026
19ae3eb
chore(bidi): rename BidiPage._realmToContext (#39285)
hbenl Feb 16, 2026
ea1df36
test: roll stable-test-runner to 1.59.0-alpha-2026-02-16 (#39284)
microsoft-playwright-automation[bot] Feb 16, 2026
a6ad29b
test(bidi): Enable 3 popup tests for Firefox with WebDriver BiDi (#39…
lutien Feb 16, 2026
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
4 changes: 2 additions & 2 deletions docs/src/release-notes-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2464,8 +2464,8 @@ WebServer is now considered "ready" if request to the specified url has any of t

- Components Testing (preview)

Playwright Test can now test your [React](https://reactjs.org/),
[Vue.js](https://vuejs.org/) or [Svelte](https://svelte.dev/) components.
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.
Expand Down
108 changes: 3 additions & 105 deletions docs/src/test-components-js.md
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 @@ -108,7 +108,6 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand Down Expand Up @@ -155,20 +154,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 @@ -297,7 +282,6 @@ Provide props to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand All @@ -312,17 +296,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">

Expand Down Expand Up @@ -356,7 +329,6 @@ Provide callbacks/events to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand All @@ -371,17 +343,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">

Expand Down Expand Up @@ -415,7 +376,6 @@ Provide children/slots to a component when mounted.
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand All @@ -430,17 +390,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">

Expand Down Expand Up @@ -550,7 +499,6 @@ Unmount the mounted component from the DOM. This is useful for testing the compo
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand All @@ -566,18 +514,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">

Expand Down Expand Up @@ -612,7 +548,6 @@ Update props, slots/children, and/or events/callbacks of a mounted component. Th
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Svelte', value: 'svelte'},
{label: 'Vue', value: 'vue'},
]
}>
Expand All @@ -630,22 +565,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">

Expand Down Expand Up @@ -717,22 +636,21 @@ 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'},
]
}>
Expand Down Expand Up @@ -772,26 +690,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 docs/src/testing-library-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "Migrating from Testing Library"

## 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
If you use DOM Testing Library in the browser (for example, you bundle end-to-end tests with webpack), you can switch directly to Playwright Test. Examples below are focused on component tests, but for end-to-end test you just need to replace `await mount` with `await page.goto('http://localhost:3000/')` to open the page under test.
Expand Down Expand Up @@ -78,7 +78,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 [`method: Locator.locator`] or [`method: Page.locator`] to perform most of the actions.
Expand Down
Loading
Loading