> ## Documentation Index
> Fetch the complete documentation index at: https://docs.testdino.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playwright Component Testing in TestDino

> Report Playwright component tests with traces, screenshots, and AI insights.

Playwright component testing mounts UI components in a real browser without a full application. TestDino supports component tests with traces, screenshots, videos, and AI insights, the same as E2E tests.

<Warning>
  **Warning**

  Component testing requires `@testdino/playwright`. See [Real-Time Streaming](/guides/playwright-real-time-test-streaming) for setup.
</Warning>

## Quick Reference

| Topic                                             | Link                                                        |
| :------------------------------------------------ | :---------------------------------------------------------- |
| [Setup](#setup)                                   | Install the component testing package and TestDino reporter |
| [Configuration](#configure-the-testdino-reporter) | Add the reporter to `playwright-ct.config.ts`               |
| [Run tests](#run-tests)                           | Run the component test config                               |
| [CI integration](#ci-integration)                 | GitHub Actions workflow                                     |
| [Limitations](#limitations)                       | Known constraints                                           |

## Supported Frameworks

| Framework | Package                              |
| :-------- | :----------------------------------- |
| React     | `@playwright/experimental-ct-react`  |
| Vue       | `@playwright/experimental-ct-vue`    |
| Svelte    | `@playwright/experimental-ct-svelte` |

<Note>
  **Note**

  Playwright component testing is experimental. The API may change between Playwright versions. See the [Playwright component testing docs](https://playwright.dev/docs/test-components) for full API details.
</Note>

## Setup

<Steps>
  <Step title="Initialize component testing">
    Run the Playwright scaffolding command to create a `playwright/` directory with `index.html` and `index.ts` files:

    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm init playwright@latest -- --ct
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn create playwright --ct
        ```
      </Tab>

      <Tab title="pnpm">
        ```bash theme={null}
        pnpm create playwright --ct
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Install the TestDino reporter">
    ```bash theme={null}
    npm install @testdino/playwright
    ```

    View TestDino npm package for [@testdino/playwright ↗](https://www.npmjs.com/package/@testdino/playwright)
  </Step>

  <Step title="Write a component test">
    Create a test file next to your component. Import `test` and `expect` from the framework-specific package, and use the `mount` fixture to render the component:

    <Tabs>
      <Tab title="React">
        ```tsx src/App.spec.tsx theme={null}
        import { test, expect } from '@playwright/experimental-ct-react';
        import App from './App';

        test('renders the homepage', async ({ mount }) => {
          const component = await mount(<App />);
          await expect(component).toContainText('Welcome');
        });
        ```
      </Tab>

      <Tab title="Vue">
        ```ts src/App.spec.ts theme={null}
        import { test, expect } from '@playwright/experimental-ct-vue';
        import App from './App.vue';

        test('renders the homepage', async ({ mount }) => {
          const component = await mount(App);
          await expect(component).toContainText('Welcome');
        });
        ```
      </Tab>

      <Tab title="Svelte">
        ```ts src/App.spec.ts theme={null}
        import { test, expect } from '@playwright/experimental-ct-svelte';
        import App from './App.svelte';

        test('renders the homepage', async ({ mount }) => {
          const component = await mount(App);
          await expect(component).toContainText('Welcome');
        });
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Configure the TestDino Reporter

Add `@testdino/playwright` to the `reporter` array in your `playwright-ct.config.ts`. The configuration is the same as E2E tests:

```typescript playwright-ct.config.ts theme={null}
import { defineConfig } from '@playwright/experimental-ct-react';

export default defineConfig({
  testDir: './src',
  reporter: [
    ['list'],
    ['@testdino/playwright', {
      token: process.env.TESTDINO_TOKEN,
      serverUrl: "https://reporter.testdino.com",
    }],
  ],
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});
```

All standard reporter options work with component tests: `debug`, `ciRunId`, `artifacts`, and `coverage`. See the [Node.js CLI reference](/cli/testdino-playwright-nodejs#cli-flags) for the full list.

<Tip>
  **Tip**

  Enable `trace`, `screenshot`, and `video` in the config. These artifacts upload to TestDino and appear in the test case detail page for debugging.
</Tip>

## Run Tests

With `@testdino/playwright` in the `reporter` array of `playwright-ct.config.ts`, set the token and run Playwright against the component test config. Results stream to TestDino during the run.

```bash theme={null}
export TESTDINO_TOKEN="$TESTDINO_TOKEN"
npx playwright test --config=playwright-ct.config.ts
```

All standard Playwright options work:

```bash theme={null}
npx playwright test --config=playwright-ct.config.ts --project=chromium --workers=4
npx playwright test --config=playwright-ct.config.ts src/Button.spec.tsx
```

## CI Integration

Component tests run in CI the same way as E2E tests. Set `TESTDINO_TOKEN` and run Playwright against the component test config. Results stream during the run, so no separate upload step is needed.

```yaml .github/workflows/component-tests.yml theme={null}
name: Component Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps

      - name: Run component tests with TestDino
        env:
          TESTDINO_TOKEN: ${{ secrets.TESTDINO_TOKEN }}
        run: npx playwright test --config=playwright-ct.config.ts
```

## Limitations

* **Experimental API.** The component testing API may change between Playwright releases.
* **Plain data only for props.** Complex objects like class instances do not serialize across the browser boundary. Pass plain objects, strings, numbers, and dates only.
* **Callbacks are async.** Event handler callbacks run in Node.js while the component runs in the browser. Synchronous return values from callbacks do not work.

For full API details on props, events, slots, and hooks, see the [Playwright component testing documentation](https://playwright.dev/docs/test-components).

## Supported TestDino Features

All TestDino features work with component tests the same way as E2E tests.

<CardGroup cols={2}>
  <Card title="Annotations" icon="tags" href="/guides/playwright-test-annotations">
    Add metadata and Slack alerts to tests
  </Card>

  <Card title="Code Coverage" icon="chart-bar" href="/guides/playwright-code-coverage">
    Track coverage per test run
  </Card>

  <Card title="Flaky Test Detection" icon="rotate" href="/guides/playwright-flaky-test-detection">
    Identify and track flaky tests
  </Card>

  <Card title="Real-Time Streaming" icon="tower-broadcast" href="/guides/playwright-real-time-test-streaming">
    Monitor live test execution
  </Card>
</CardGroup>