Playwright Component Testing in TestDino

Report Playwright component test results with embedded trace viewer, screenshots, and video. Same experience as E2E tests.

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

Component testing requires the @testdino/playwright streaming reporter, which is currently in Beta. The standard tdpw upload CLI does not support component test reporting. See Real-Time Streaming for setup.

Quick Reference

Topic	Link
Setup	Install the component testing package and TestDino reporter
Configuration	Add the reporter to playwright-ct.config.ts
Run tests	CLI and reporter methods
CI integration	GitHub Actions workflow
Limitations	Known constraints

Supported Frameworks

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

Playwright component testing is experimental. The API may change between Playwright versions. See the Playwright component testing docs for full API details.

Setup

1. Initialize component testing

   Run the Playwright scaffolding command to create a playwright/ directory with index.html and index.ts files:

   npm

   npm init playwright@latest -- --ct
   

   yarn

   yarn create playwright --ct
   

   pnpm

   pnpm create playwright --ct
   
2. Install the TestDino reporter

   npm install @testdino/playwright
   
3. 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:

   React

   src/App.spec.tsx

   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');
   });
   

   Vue

   src/App.spec.ts

   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');
   });
   

   Svelte

   src/App.spec.ts

   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');
   });
   

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:

playwright-ct.config.ts

import { defineConfig } from '@playwright/experimental-ct-react';

export default defineConfig({
  testDir: './src',
  reporter: [
    ['list"],
    ['@testdino/playwright', {
      token: process.env.TESTDINO_TOKEN,
    }],
  ],
  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 for the full list.

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

Run Tests

Option 1: TestDino CLI

Pass --ct to run component tests instead of E2E tests:

npx tdpw test --ct

All Playwright options pass through:

npx tdpw test --ct --project=chromium --workers=4
npx tdpw test --ct --headed
npx tdpw test --ct src/Button.spec.tsx

Option 2: Playwright CLI

If you configured the reporter in playwright-ct.config.ts, run Playwright directly:

npx playwright test --config=playwright-ct.config.ts

Both methods stream results to TestDino in real time.

CI Integration

Component tests run in CI the same way as E2E tests. The only difference is the --ct flag or the component testing config file.

GitHub Actions (tdpw CLI)

.github/workflows/component-tests.yml

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
        env:
          TESTDINO_TOKEN: ${{ secrets.TESTDINO_TOKEN }}
        run: npx tdpw test --ct

GitHub Actions (reporter)

.github/workflows/component-tests.yml

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
        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.

Supported TestDino Features

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

Annotations

Add metadata and Slack alerts to tests

Code Coverage

Track coverage per test run

Flaky Test Detection

Identify and track flaky tests

Real-Time Streaming

Monitor live test execution