What does this skill do, and when should you use it?
This skill guides teams in building a small story gallery served by the application’s development server and testing it with Playwright’s built-in mount fixture. Each story prepares the component’s props, state, callbacks, providers, and mock data in the browser. Tests assert only on behavior observable through the page. The workflow requires no dedicated component-testing runtime, bundler integration, or extra component-testing package, and supports migration from @playwright/experimental-ct-react or @playwright/experimental-ct-vue.
Detects whether the project uses React or Vue and which bundler it uses; defines a gallery under playwright/gallery/ with window.mount(params) and window.unmount(); configures a Playwright components project with baseURL, webServer, serviceWorkers, and reuseContext; adds .story.* files beside components; and writes tests using mount, Locators, update, page.route, and web-first assertions. The documented run command is npx playwright test --project=components, and the gallery can be opened in a browser for visual inspection.
- Frontend developers need isolated interaction, callback, and visual-state tests for React components.
- Vue teams want searchable, reviewable stories for concrete component scenarios.
- Vite applications want to serve the gallery through their existing development server.
- Non-Vite applications need a standalone Vite server to host the component gallery.
- Teams migrating away from @playwright/experimental-ct-react or @playwright/experimental-ct-vue want a regular Playwright test workflow.
How do you install this skill?
- The migration callback example passes a callback through mount props, contradicting the stated boundary that callbacks cannot cross; it should record state inside the story and assert it from the test.
- The gallery, story discovery, framework plugins, and dev server must be implemented for each project; string story IDs can fail only at runtime or silently suffix-match another story after renames.
- Before adoption, verify the React/Vue, bundler, Playwright, and dependency versions, and create a reversible configuration and migration plan.
- Shell / CLI
- Network access
- Local filesystem
Node.js@playwright/testVite for non-Vite applicationsThe relevant React or Vue framework plugin for non-Vite applications
The skill is located at packages/playwright-core/src/tools/skills/playwright-component-testing/SKILL.md in the Playwright repository. For Playwright Test, the repository README documents npm i -D @playwright/test followed by npx playwright install. Non-Vite applications also require vite and the applicable React or Vue framework plugin as development dependencies. The source does not document how to install an individual SKILL.md into a particular Agent client.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/microsoft/playwright.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/packages/playwright-core/src/tools/skills/playwright-component-testing" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Set up a Playwright story gallery for my React components and test the Button’s primary, disabled, and callback states.
Give a compatible coding Agent a request such as: "Set up a Playwright story gallery for my React components and test the Button’s primary, disabled, and callback states." Implement the gallery, configure the components project, add tests under tests/components, and run npx playwright test --project=components. Load stories with mount('components/Button/Primary'); pass plain serializable data with mount(storyId, props); and use component.update(newProps) to test prop changes without remounting.
What are this skill's strengths and limitations?
- Uses regular Playwright tests, Locators, and web-first assertions.
- Stories own browser-side state and callbacks, making scenario setup explicit and observable.
- Avoids a dedicated component-testing runtime and extra component-testing package.
- Supports React and Vue and allows page-level network mocking.
- Supports isolated story mounts, multiple states in one test, and screenshots of the gallery root.
- The gallery must be implemented to the referenced specification; there is no ready-made gallery template.
- Non-Vite applications require additional Vite-server and framework-plugin setup.
- The source provides no sample project, test results, or platform validation evidence.
- This skill covers the component-testing workflow only; capabilities of Playwright CLI, MCP, the library, or the VS Code extension should not be attributed to it.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Playwright Component Testing this page ✓ Microsoft · Official | 58 · Recommended | ★ 98k | 12d ago | Apache-2.0 |
| Playwright Issue Triage ✓ Microsoft · Official | 48 · Use with care | ★ 98k | 12d ago | Apache-2.0 |
| VS Code Smoke Test Assistant ✓ Microsoft · Official | 53 · Use with care | ★ 194k | 12d ago | MIT |
| Playwright Trace CLI ✓ Microsoft · Official | 48 · Use with care | ★ 98k | 12d ago | Apache-2.0 |
| Azure Playwright Cloud Testing ✓ Microsoft · Official | 53 · Use with care | ★ 2.7k | 3mo ago | MIT |
Compared with @playwright/experimental-ct-react or @playwright/experimental-ct-vue, this approach uses ordinary Playwright end-to-end tests against a story gallery instead of a dedicated component-testing runtime.
How did FollowSkills review this skill?
The documentation keeps component state and callbacks inside browser-side stories, restricts props to serializable data, recommends blocking service workers, and scopes locators; it requests no credentials or elevated permissions and shows no malicious exfiltration. Deductions reflect project configuration changes, dev-server startup, and possible application-network access without explicit confirmation, sensitive-data guidance, rollback instructions, or dependency-security notes.
The main flow, error propagation, root reuse, update/unmount behavior, and several examples are documented, but static evidence cannot prove execution. The Vue mounting description is not fully consistent across files, React guidance differs in details from the gallery example, and the migration callback example contradicts the earlier rule that callbacks cannot cross the mount boundary, creating a likely misuse path. Static calibration caps this at 10, with further deductions for edge-case feedback and documentation consistency.
The audience and triggers are clear: isolated React/Vue component testing and migration from experimental CT; the material covers Vite, Next, webpack, no dev server, monorepos, providers, and network mocking. Deductions apply because non-fit component scenarios and complex interaction limits are not clearly stated, the material is English-only for Chinese users, and environment guidance is incomplete. The core function does not entirely depend on an overseas online service.
The material is layered across concepts, workflow, conventions, patterns, framework references, and migration, with configuration, examples, limitations, and gotchas. The supplied context also provides Apache-2.0 licensing, Microsoft provenance, repository versioning, and a security-reporting path. Deductions apply because the skill itself lacks a compatibility matrix, changelog, explicit maintenance owner or update path, is not fully self-contained regarding referenced templates/dependencies, and offers limited troubleshooting/FAQ coverage.
The skill covers the principal tasks of building a gallery, configuring Playwright, writing stories/specs, migrating CT tests, and debugging, with examples that are mostly directly adaptable. Deductions apply because the gallery must be implemented by the user, no complete copy-ready template is supplied, the React story template referenced by the instructions is absent from the provided material, and the callback migration example is internally contradictory and may require substantial correction. Static calibration caps this at 7.
The selected skill and its references/templates provide concrete contracts, code examples, error behavior, and story/spec mappings, giving moderate auditability. Deductions apply because the supplied material contains no CI workflow, committed tests specifically covering this component-testing path, or third-party execution evidence; static calibration therefore caps this at 5.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →