Playwright component testing mounts UI components in a real browser without a full application. TestDino supports component tests out of the box. Results stream to the dashboard with traces, screenshots, videos, and AI insights, the same as E2E tests.
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 |
Setup
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
yarn create playwright --ct
pnpm create playwright --ct
Install the TestDino reporter
npm install @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: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');
});
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');
});
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');
});
@testdino/playwright to the reporter array in your playwright-ct.config.ts. The configuration is the same as E2E tests:
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',
},
});
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:
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
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
.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.
