skills.rest
TarunTeja44
TarunTeja44COMMUNITY
Explore all skills by this author →
GitHub

playwright-component-testing

Set up Playwright component testing for React and Vue using a story gallery page.

1|Updated Feb 22, 2026
Search Tags:#react#vue#migration#playwright#e2e testing#component testing#story gallery
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill playwright-component-testing-tarunteja44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-component-testing
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/playwright-component-testing
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill playwright-component-testing-tarunteja44

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Testing React or Vue components in isolation normally requires a dedicated component-testing runtime like @playwright/experimental-ct-react, which adds bundler integration, extra packages, and maintenance overhead. This Skill replaces that with plain Playwright e2e tests driven against a small story gallery page hosted by your app's own dev server. ## Core Features & Use Cases - Story gallery pattern: Scaffold *.story.tsx / .story.vue files next to components and a gallery page exposing window.mount/window.unmount, driven by Playwright's built-in mount fixture. - Framework-specific guidance: Reference docs cover React (StrictMode, providers, typed props) and Vue (SFC stories, plugins, reactive host) plus the gallery contract spec. - Migration path: Step-by-step mapping from @playwright/experimental-ct-react/-vue concepts (JSX mounts, beforeMount hooks, update/unmount) to the gallery pattern. - Use Case: A team wants to drop the experimental CT packages; use this Skill to implement the gallery, configure a components Playwright project, and rewrite existing CT specs as plain Playwright tests. ## Quick Start Set up Playwright component testing for my React app using the story gallery approach and write a first story and spec for my Button component.

Frequently Asked Questions about playwright-component-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test React components with Playwright without experimental-ct?▼

Create story files next to your components and a gallery page that exposes window.mount to render a story into #root. Playwright's built-in mount fixture drives the gallery, so tests are plain e2e tests with no extra test runner or bundler integration.

How to migrate from @playwright/experimental-ct-react to plain Playwright?▼

Move each mount(<Component/>) call's JSX structure into a story export, keep plain data props as mount's second argument, and convert callback spies into story state recorded in hidden form inputs. Assertions become toHaveValue() checks, and beforeMount hooks move into the gallery's window.mount.

Does Playwright component testing work with Vue and Vite?▼

Yes. Vite serves the gallery HTML from the project root through the existing dev server, and Vue stories can be render-function files or single-file components. The gallery mounts a reactive host once so prop updates re-render in place and preserve state.

How do I test component callbacks and events in Playwright?▼

The story owns the state and provides the callbacks, recording observed values into hidden form inputs with data-testid attributes. Tests perform actions and assert with toHaveValue(), a web-first assertion that retries until the state lands.

Why does my Playwright component test get stale network responses?▼

The app's service worker can serve cached responses that shadow page.route() mocks. Set serviceWorkers: 'block' in the Playwright project config and register routes before calling mount, since mounting navigates the page.

Related Skills

Explore More Software Engineering Skills→
vishirivishiri
401

fantasia-testing

Automate Fantasia Archive testing across Vitest and Playwright workflows.

Community
Advanced
HouseGarofaloHouseGarofalo
3

frontend-testing

Test React applications with Jest, Vitest, React Testing Library, and Playwright.

Official
Advanced
vesvietvesviet

frontend-testing

Add frontend test coverage using Playwright, MSW v2, and WCAG 2.2 accessibility gates.

Community
Advanced
lsst-sqrelsst-sqre
2

testing-infrastructure

Configure Vitest, React Testing Library, and MSW mocks for monorepo CI testing.

Official
Intermediate