diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md
new file mode 100644
index 0000000000..2b3b20208b
--- /dev/null
+++ b/docs/src/test-components-js.md
@@ -0,0 +1,101 @@
+---
+id: test-components
+title: "Experimental: Components"
+---
+
+Playwright Test can now test your components.
+
+
+
+## Example
+
+Here is what a typical component test looks like:
+
+```js
+test('event should work', async ({ mount }) => {
+ let clicked = false;
+
+ // Mount a component. Returns locator pointing to the component.
+ const c = await mount();
+
+ // As with any Playwright test, assert locator text.
+ await expect(component).toContainText('Submit');
+
+ // Perform locator click. This will trigger the event.
+ await component.click();
+
+ // Assert that respective events have been fired.
+ expect(clicked).toBeTruthy();
+})
+```
+
+## How to get started
+
+Adding Playwright Test to an existing React, Vue or Svelte project is easy. Below at the steps to enable Playwright Test for a sample create-react-app with TypeScript template.
+
+### Step 1: Install Playwright Test for components for your respective framework
+
+```sh
+npm i @playwright/test
+npm i @playwright/experimental-ct-react
+# npm i @playwright/experimental-ct-vue
+# npm i @playwright/experimental-ct-svelte
+```
+
+### Step 2: create `playwright/index.html`
+```html
+
+
+
+
+
+
+```
+
+### Step 3: create `playwright/index.js`
+```js
+// Apply theme here, add anything your component needs at runtime here.
+```
+
+### Create a test `src/App.spec.tsx`
+
+```js
+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();
+ await expect(component).toContainText('Learn React');
+});
+```
+
+### Run the tests
+
+```sh
+npx playwright test
+```
+
+### Further reading: configure reporting, browsers, tracing
+
+Refer to [Playwright config](./test-configuration.md) for configuring your project.
+
+## Under the hood
+
+When Playwright Test is used to test web components, tests run in Node.js, while components run in the real browser. This brings together the best of both worlds: components run in the real browser environment, real clicks are triggered, real layout is executed, visual regression is possible. At the same time, test can use all the powers of Node.js as well as all the Playwright Test features. As a result, the same parallel, parametrized tests with the same post-mortem Tracing story are available during component testing.
+
+Here is how this is achieved:
+
+- Once the tests are executed, Playwright creates a list of components that the tests need.
+- It then compiles a bundle that includes these components and serves it using a local static web server.
+- Upon the `mount` call within the test, Playwright navigates to the facade page `/playwright/index.html` of this bundle and tells it to render the component.
+- Events are marshalled back to the Node.js environment to allow verification.
+
+Playwright is using [Vite](https://vitejs.dev/) to create the components bundle and serve it.
+
+## Planned work
+
+- Watch mode: watch mode is highly anticipated and should be relatively straightforward in implementation.
diff --git a/examples/components-vue/README.md b/examples/components-vue/README.md
index b73f34bab5..5a2095a9c2 100644
--- a/examples/components-vue/README.md
+++ b/examples/components-vue/README.md
@@ -38,8 +38,8 @@ npm run test
npm i --save-dev @playwright/test @playwright/experimental-ct-vue
```
-- [playwright/index.html](playwright/index.html) file was added that defines theming for the components through importing [playwright/index.js](playwright/index.js) .
+- [playwright/index.html](playwright/index.html) file was added that defines theming for the components through importing [playwright/index.js](playwright/index.js).
-- [playwright.config.ts](playwright.config.ts) was added that executes `npm run dev` before running tests if it is not already running.
+- [playwright.config.ts](playwright.config.ts) was added that builds components before running tests.
- A bunch of `.spec.ts` and `.spec.tsx` files were added to `src` that demonstrate Vue3 component testing with and without the use of JSX syntax.
diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts
index 96d9d01eaa..76f294a34f 100644
--- a/packages/playwright-ct-react/index.d.ts
+++ b/packages/playwright-ct-react/index.d.ts
@@ -26,7 +26,7 @@ import type {
import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit & {
- use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+ use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
};
interface ComponentFixtures {
diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts
index ca7ac1ec29..479d70de17 100644
--- a/packages/playwright-ct-svelte/index.d.ts
+++ b/packages/playwright-ct-svelte/index.d.ts
@@ -26,7 +26,7 @@ import type {
import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit & {
- use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+ use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
};
interface ComponentFixtures {
diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs
index d7162cd919..0248069bac 100644
--- a/packages/playwright-ct-svelte/registerSource.mjs
+++ b/packages/playwright-ct-svelte/registerSource.mjs
@@ -18,16 +18,12 @@
const registry = new Map();
-export function register(components, options) {
- // SvelteKit won't have window in the scope, so it requires explicit initialization.
- const win = options?.window || window;
- win.playwrightMount = playwrightMount;
-
+export function register(components) {
for (const [name, value] of Object.entries(components))
registry.set(name, value);
}
-const playwrightMount = component => {
+window.playwrightMount = component => {
if (!document.getElementById('root')) {
const rootElement = document.createElement('div');
rootElement.id = 'root';
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index cc5a58a08e..71adb2e133 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -26,7 +26,7 @@ import type {
import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit & {
- use: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
+ use?: BasePlaywrightTestConfig['use'] & { vitePort?: number, viteConfig?: InlineConfig }
};
interface ComponentFixtures {