Skip to main content
What you’ll learn
  • How to configure the streaming reporter for component tests
  • What evidence TestDino captures (traces, screenshots, video)
  • How component test results appear alongside E2E tests
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.
WarningComponent testing requires the @testdino/playwright streaming reporter, which is currently in Experimental. The standard tdpw upload CLI does not support component test reporting. See Real-Time Streaming for setup.

​
Quick Reference

TopicLink
SetupInstall the component testing package and TestDino reporter
ConfigurationAdd the reporter to playwright-ct.config.ts
Run testsCLI and reporter methods
CI integrationGitHub Actions workflow
LimitationsKnown constraints

​
Supported Frameworks

FrameworkPackage
React@playwright/experimental-ct-react
Vue@playwright/experimental-ct-vue
Svelte@playwright/experimental-ct-svelte
NotePlaywright 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 init playwright@latest -- --ct
2

Install the TestDino reporter

npm install @testdino/playwright
View TestDino npm package for @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:
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');
});

​
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.
TipEnable 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/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

​
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