yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(ct): vue + jsx and general improvements (#32212)

Browse Source 
partial fix for:
https://github.com/microsoft/playwright/issues/31927#issuecomment-2267065378

---------

Signed-off-by: Sander <info@mesander.com>
Co-authored-by: Dmitry Gozman <dgozman@gmail.com>
This commit is contained in:
Sander 2024-09-09 14:09:18 +02:00 committed by GitHub
parent cc9c4cdd9a
commit 4a53973fd0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 135 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
docs/src/test-components-js.md
View File

@ -113,12 +113,10 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
}>
<TabItem value="react">
```js
```js title="app.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(<App />);
await expect(component).toContainText('Learn React');
@ -129,18 +127,25 @@ test('should work', async ({ mount }) => {
<TabItem value="vue">
```js
```js title="app.spec.ts"
import { test, expect } from '@playwright/experimental-ct-vue';
import App from './App.vue';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(App);
await expect(component).toContainText('Vite + Vue');
await expect(component).toContainText('Learn Vue');
});
```
```js title="app.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-vue';
import App from './App.vue';
test('should work', async ({ mount }) => {
const component = await mount(<App />);
await expect(component).toContainText('Learn Vue');
});
```
If using TypeScript and Vue make sure to add a `vue.d.ts` file to your project:
```js
@ -151,15 +156,13 @@ declare module '*.vue';
<TabItem value="svelte">
```js
```js title="app.spec.ts"
import { test, expect } from '@playwright/experimental-ct-svelte';
import App from './App.svelte';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(App);
await expect(component).toContainText('Vite + Svelte');
await expect(component).toContainText('Learn Svelte');
});
```
@ -167,12 +170,10 @@ test('should work', async ({ mount }) => {
<TabItem value="solid">
```js
```js title="app.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-solid';
import App from './App';
test.use({ viewport: { width: 500, height: 500 } });
test('should work', async ({ mount }) => {
const component = await mount(<App />);
await expect(component).toContainText('Learn Solid');
@ -261,7 +262,10 @@ export function InputMediaForTest(props: InputMediaForTestProps) {
Then test the component via testing the story:
```js title="input-media.test.spec.tsx"
```js title="input-media.spec.tsx"
import { test, expect } from '@playwright/experimental-ct-react';
import { InputMediaForTest } from './input-media.story.tsx';
test('changes the image', async ({ mount }) => {
let mediaSelected: string | null = null;
@ -313,7 +317,9 @@ Provide props to a component when mounted.
<TabItem value="react">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-react';
test('props', async ({ mount }) => {
const component = await mount(<Component msg="greetings" />);
});
@ -322,7 +328,9 @@ test('props', async ({ mount }) => {
</TabItem>
<TabItem value="solid">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';
test('props', async ({ mount }) => {
const component = await mount(<Component msg="greetings" />);
});
@ -331,7 +339,9 @@ test('props', async ({ mount }) => {
</TabItem>
<TabItem value="svelte">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';
test('props', async ({ mount }) => {
const component = await mount(Component, { props: { msg: 'greetings' } });
});
@ -340,12 +350,23 @@ test('props', async ({ mount }) => {
</TabItem>
<TabItem value="vue">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-vue';
test('props', async ({ mount }) => {
const component = await mount(Component, { props: { msg: 'greetings' } });
});
```
```js title="component.spec.tsx"
// Or alternatively, using the `jsx` style
import { test } from '@playwright/experimental-ct-vue';
test('props', async ({ mount }) => {
const component = await mount(<Component msg="greetings" />);
});
```
</TabItem>
</Tabs>
@ -366,36 +387,53 @@ Provide callbacks/events to a component when mounted.
<TabItem value="react">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-react';
test('callback', async ({ mount }) => {
const component = await mount(<Component callback={() => {}} />);
const component = await mount(<Component onClick={() => {}} />);
});
```
</TabItem>
<TabItem value="solid">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';
test('callback', async ({ mount }) => {
const component = await mount(<Component callback={() => {}} />);
const component = await mount(<Component onClick={() => {}} />);
});
```
</TabItem>
<TabItem value="svelte">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';
test('event', async ({ mount }) => {
const component = await mount(Component, { on: { callback() {} } });
const component = await mount(Component, { on: { click() {} } });
});
```
</TabItem>
<TabItem value="vue">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-vue';
test('event', async ({ mount }) => {
const component = await mount(Component, { on: { callback() {} } });
const component = await mount(Component, { on: { click() {} } });
});
```
```js title="component.spec.tsx"
// Or alternatively, using the `jsx` style
import { test } from '@playwright/experimental-ct-vue';
test('event', async ({ mount }) => {
const component = await mount(<Component v-on:click={() => {}} />);
});
```
@ -419,7 +457,9 @@ Provide children/slots to a component when mounted.
<TabItem value="react">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-react';
test('children', async ({ mount }) => {
const component = await mount(<Component>Child</Component>);
});
@ -428,7 +468,9 @@ test('children', async ({ mount }) => {
</TabItem>
<TabItem value="solid">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';
test('children', async ({ mount }) => {
const component = await mount(<Component>Child</Component>);
});
@ -437,7 +479,9 @@ test('children', async ({ mount }) => {
</TabItem>
<TabItem value="svelte">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';
test('slot', async ({ mount }) => {
const component = await mount(Component, { slots: { default: 'Slot' } });
});
@ -446,12 +490,23 @@ test('slot', async ({ mount }) => {
</TabItem>
<TabItem value="vue">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-vue';
test('slot', async ({ mount }) => {
const component = await mount(Component, { slots: { default: 'Slot' } });
});
```
```js title="component.spec.tsx"
// Or alternatively, using the `jsx` style
import { test } from '@playwright/experimental-ct-vue';
test('children', async ({ mount }) => {
const component = await mount(<Component>Child</Component>);
});
```
</TabItem>
</Tabs>
@ -614,7 +669,9 @@ Unmount the mounted component from the DOM. This is useful for testing the compo
<TabItem value="react">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-react';
test('unmount', async ({ mount }) => {
const component = await mount(<Component/>);
await component.unmount();
@ -624,7 +681,9 @@ test('unmount', async ({ mount }) => {
</TabItem>
<TabItem value="solid">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';
test('unmount', async ({ mount }) => {
const component = await mount(<Component/>);
await component.unmount();
@ -634,7 +693,9 @@ test('unmount', async ({ mount }) => {
</TabItem>
<TabItem value="svelte">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-svelte';
test('unmount', async ({ mount }) => {
const component = await mount(Component);
await component.unmount();
@ -644,13 +705,24 @@ test('unmount', async ({ mount }) => {
</TabItem>
<TabItem value="vue">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-vue';
test('unmount', async ({ mount }) => {
const component = await mount(Component);
await component.unmount();
});
```
```js title="component.spec.tsx"
// Or alternatively, using the `jsx` style
import { test } from '@playwright/experimental-ct-vue';
test('unmount', async ({ mount }) => {
const component = await mount(<Component/>);
await component.unmount();
});
```
</TabItem>
</Tabs>
@ -671,11 +743,13 @@ Update props, slots/children, and/or events/callbacks of a mounted component. Th
<TabItem value="react">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-react';
test('update', async ({ mount }) => {
const component = await mount(<Component/>);
await component.update(
<Component msg="greetings" callback={() => {}}>Child</Component>
<Component msg="greetings" onClick={() => {}}>Child</Component>
);
});
```
@ -683,11 +757,13 @@ test('update', async ({ mount }) => {
</TabItem>
<TabItem value="solid">
```js
```js title="component.spec.tsx"
import { test } from '@playwright/experimental-ct-solid';
test('update', async ({ mount }) => {
const component = await mount(<Component/>);
await component.update(
<Component msg="greetings" callback={() => {}}>Child</Component>
<Component msg="greetings" onClick={() => {}}>Child</Component>
);
});
```
@ -695,12 +771,14 @@ test('update', async ({ mount }) => {
</TabItem>
<TabItem value="svelte">
```js
```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: { callback: () => {} },
on: { click() {} },
slots: { default: 'Child' }
});
});
@ -709,17 +787,31 @@ test('update', async ({ mount }) => {
</TabItem>
<TabItem value="vue">
```js
```js title="component.spec.ts"
import { test } from '@playwright/experimental-ct-vue';
test('update', async ({ mount }) => {
const component = await mount(Component);
await component.update({
props: { msg: 'greetings' },
on: { callback: () => {} },
on: { click() {} },
slots: { default: 'Child' }
});
});
```
```js title="component.spec.tsx"
// Or alternatively, using the `jsx` style
import { test } from '@playwright/experimental-ct-vue';
test('update', async ({ mount }) => {
const component = await mount(<Component/>);
await component.update(
<Component msg="greetings" v-on:click={() => {}}>Child</Component>
);
});
```
</TabItem>
</Tabs>