--- 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 component = 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 are 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 init playwright@latest -- --ct ``` This step creates several files in your workspace: #### `playwright/index.html` This file defines an html file that will be used to render components during testing. It must contain element with `id="root"`, that's where components are mounted. It must also link the script called `playwright/index.[tj]s`. ```html
``` #### `playwright/index.ts` You can include stylesheets, apply theme and inject code into the page where component is mounted using this script. It can be either `.js` or `.ts` file. ```js // Apply theme here, add anything your component needs at runtime here. ``` ### Step 2. Create a test file `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(