playwright-component-testing

Set up component testing with Playwright using a story gallery — scaffold stories and a gallery dev page driven by the built-in mount fixture, no dedicated component-testing runtime. Use when asked to test React or Vue components in isolation with Playwright, or to migrate off @playwright/experimental-ct-react / -vue.

Install
npx skills add 'https://github.com/microsoft/playwright/tree/main/packages/playwright-core/src/tools/skills/playwright-component-testing'
Download bundle ↓
main · 500c9c8Scanned 2026-09-15

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗
View on GitHub
← Back to SKILL.md
// Example component test. `mount` is a built-in fixture of @playwright/test.// It returns a locator for the gallery root, scope the queries from there.import { test, expect } from '@playwright/test'; test('renders primary button', async ({ mount }) => {  const component = await mount('components/Button/Primary');  await expect(component.getByRole('button')).toHaveText('Submit');}); test('disabled button is disabled', async ({ mount }) => {  const component = await mount('components/Button/Disabled');  await expect(component.getByRole('button')).toBeDisabled();}); test('button click fires callback', async ({ mount }) => {  const component = await mount('components/Button/CountsClicks');  await component.getByRole('button').click();  await expect(component.getByTestId('click-count')).toHaveValue('1');}); 
Referenced from SKILL.md