This document covers Playwright's component testing architecture, which enables testing UI components in isolation within a real browser environment. Component testing in Playwright allows developers to test React, Vue, and Svelte components by rendering them in a controlled browser context powered by Vite, while leveraging Playwright's browser automation capabilities.
For information about end-to-end testing with @playwright/test, see Test Framework. For browser automation fundamentals, see Core API.
Playwright's component testing is implemented as a layered package system with a shared core and framework-specific adapters.
Sources: packages/playwright-ct-core/package.json1-33 packages/playwright-ct-react/package.json1-39 packages/playwright-ct-vue/package.json1-39 packages/playwright-ct-svelte/package.json1-42 packages/playwright-ct-react17/package.json1-39
The @playwright/experimental-ct-core package provides the foundational infrastructure for component testing across all supported frameworks.
| Dependency | Version | Purpose |
|---|---|---|
playwright-core | 1.59.0-next | Browser automation primitives |
playwright | 1.59.0-next | Full Playwright API with transforms |
vite | ^6.4.1 | Development server and module bundler |
| Export Path | Module | Purpose |
|---|---|---|
. | index.js | Main entry point with component testing API |
./lib/mount | lib/mount.js | Component mounting implementation |
./lib/program | lib/program.js | CLI program for component testing |
./types/component | types/component.d.ts | TypeScript definitions for component testing |
The core package acts as a bridge between Playwright's browser automation capabilities and Vite's module transformation system, enabling components to be compiled, bundled, and served to the browser during test execution.
Sources: packages/playwright-ct-core/package.json1-33
Each framework adapter extends the core package with framework-specific Vite plugins and configuration.
@playwright/experimental-ct-react)The React adapter integrates @vitejs/plugin-react to enable JSX transformation, Fast Refresh, and React-specific optimizations.
Sources: packages/playwright-ct-react/package.json1-39
@playwright/experimental-ct-vue)The Vue adapter provides similar functionality using @vitejs/plugin-vue (v5.2.0) for Single File Component (SFC) compilation and Vue 3 support.
Sources: packages/playwright-ct-vue/package.json1-39
@playwright/experimental-ct-svelte)The Svelte adapter uses @sveltejs/vite-plugin-svelte (v5.1.0) to compile Svelte components and handle reactive transformations.
Sources: packages/playwright-ct-svelte/package.json1-42
@playwright/experimental-ct-react17)A specialized adapter for React 17 compatibility, using the same @vitejs/plugin-react but configured for the older React runtime.
Sources: packages/playwright-ct-react17/package.json1-39
The following diagram illustrates how component tests execute, from test definition through browser rendering.
mount() with a component definitionSources: packages/playwright-ct-core/package.json22
Component testing leverages Vite's development server to provide fast module transformation and hot module replacement (HMR) during test execution.
Component testing configures Vite with:
Sources: packages/playwright-ct-core/package.json30 package.json62 package.json102
Framework adapters export two key modules for customizing component behavior during tests.
register.mjs)The register module handles framework-specific initialization and global setup. Each framework adapter exports this module to:
Export Path: ./register in each framework adapter package
hooks.mjs)The hooks module provides lifecycle hooks for component testing:
Export Path: ./hooks in each framework adapter package
These modules enable framework-specific customization while maintaining a consistent API across all adapters.
Sources: packages/playwright-ct-react/package.json22-29 packages/playwright-ct-vue/package.json22-29 packages/playwright-ct-svelte/package.json22-29
Component testing provides CLI commands through the lib/program.js export.
All component testing packages expose a playwright CLI binary:
packages/playwright-ct-{react,vue,svelte}/cli.js
This binary extends the standard Playwright CLI with component testing commands:
The root package.json defines a component test runner:
This script executes component tests using the standard @playwright/test runner but with component testing configuration.
Sources: package.json28 packages/playwright-ct-core/package.json23 packages/playwright-ct-react/package.json39
Component testing fully integrates with Playwright's test runner, fixtures, and reporting systems.
Component testing extends @playwright/test fixtures with:
mount fixture: Function to render components in the browserComponent tests use the same test() and expect() APIs as end-to-end tests:
Sources: packages/playwright-test/package.json32-34 packages/playwright-ct-core/package.json29-31
All component testing packages maintain synchronized versioning with the core Playwright packages.
| Package | Version | Core Dependency | Framework Dependency |
|---|---|---|---|
@playwright/experimental-ct-core | 1.59.0-next | playwright-core: 1.59.0-nextplaywright: 1.59.0-next | vite: ^6.4.1 |
@playwright/experimental-ct-react | 1.59.0-next | @playwright/experimental-ct-core: 1.59.0-next | @vitejs/plugin-react: ^4.2.1 |
@playwright/experimental-ct-vue | 1.59.0-next | @playwright/experimental-ct-core: 1.59.0-next | @vitejs/plugin-vue: ^5.2.0 |
@playwright/experimental-ct-svelte | 1.59.0-next | @playwright/experimental-ct-core: 1.59.0-next | @sveltejs/vite-plugin-svelte: ^5.1.0 |
The "experimental" prefix in package names indicates that the component testing API is subject to changes before stabilization.
Sources: packages/playwright-ct-core/package.json2-31 packages/playwright-ct-react/package.json2-34 packages/playwright-ct-vue/package.json2-34 packages/playwright-ct-svelte/package.json2-34
Component testing provides comprehensive TypeScript definitions through the types/component.d.ts export.
The core package exports component testing types at:
@playwright/experimental-ct-core/types/component
This module includes type definitions for:
mount() function signaturesEach framework adapter inherits and extends these types with framework-specific definitions:
Sources: packages/playwright-ct-core/package.json24-26
The root package.json includes development dependencies for all framework plugins used in component testing.
| Dependency | Version | Purpose |
|---|---|---|
@vitejs/plugin-basic-ssl | ^1.1.0 | HTTPS support for Vite dev server |
@vitejs/plugin-react | ^4.2.1 | React transformation plugin |
vite | ^6.4.1 | Core build tool and dev server |
react | ^19.2.1 | React runtime (for testing) |
react-dom | ^19.2.1 | React DOM renderer (for testing) |
These dependencies enable component testing development and are used during CI/CD testing of component testing features.
Sources: package.json78-79 package.json98-99 package.json102
Refresh this wiki
This wiki was recently refreshed. Please wait 2 days to refresh again.