Playwright Component Testing in TestDino

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 @testdino/playwright. 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	Run the component test config
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`

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

Setup

Initialize component testing

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

npm
yarn
pnpm

npm init playwright@latest -- --ct

yarn create playwright --ct

pnpm create playwright --ct

Install the TestDino reporter

npm install @testdino/playwright

View TestDino npm package for @testdino/playwright ↗

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
Vue
Svelte

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

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

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

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.

export TESTDINO_TOKEN="$TESTDINO_TOKEN"
npx playwright test --config=playwright-ct.config.ts

All standard Playwright options work:

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.

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

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

Getting Started

Installation & Setup

AI & MCP

Guides

Project

Test Management

Organization

Integrations

Data Privacy

Resources

Playwright Component Testing in TestDino

Quick Reference

Supported Frameworks

Setup

Configure the TestDino Reporter

Run Tests

CI Integration

Limitations

Supported TestDino Features

Annotations

Code Coverage

Flaky Test Detection

Real-Time Streaming

​Quick Reference

​Supported Frameworks

​Setup

​Configure the TestDino Reporter

​Run Tests

​CI Integration

​Limitations

​Supported TestDino Features

Annotations

Code Coverage

Flaky Test Detection

Real-Time Streaming

Quick Reference

Supported Frameworks

Setup

Configure the TestDino Reporter

Run Tests

CI Integration

Limitations

Supported TestDino Features