<commit_before>---
id: test-components
title: "Experimental: Components"
---

Playwright Test can now test your components.

<!-- TOC -->

## 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(<Button title='Submit'
    onClick={() => clicked = true}>
  </Button>);

  // 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
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/playwright/index.ts"></script>
  </body>
</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';
<commit_msg>docs(components): update docs (#13953)<commit_after>---
id: test-components
title: "Experimental: Components"
---

Playwright Test can now test your components.

<!-- TOC -->

## 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(<Button title='Submit'
    onClick={() => clicked = true}>
  </Button>);

  // 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 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
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/playwright/index.ts"></script>
  </body>
</html>
```

### Step 3: create `playwright/index.ts`
```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';

{'fraction_non_alphanumeric': 0.13904068002428657, 'fraction_numerical': 0.003339404978749241, 'mean_word_length': 3.9623493975903616, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1338267', 'n_tokens_mistral': 1019, 'n_tokens_neox': 966, 'n_words': 363}