Playwright Visual Testing
Exercise a Storybook-style component library with Playwright MCP—states, visual regression, accessibility, and responsive checks—before you ship UI changes.
Overview
Playwright Visual Testing is an agent skill most often used in Ship (also Build frontend) that runs Playwright MCP workflows to validate component libraries for visuals, states, and accessibility.
Install
npx skills add https://github.com/manutej/luxor-claude-marketplace --skill playwright-visual-testingWhat is this skill?
- End-to-end component library workflow using Playwright MCP browser tools
- State and variant coverage for Button, Input, Modal, Card, Toast, Dropdown
- Visual consistency and responsive behavior checks on canvas and controls
- Accessibility and keyboard navigation verification steps
- Documentation accuracy checks alongside interactive element tests
- Six component families enumerated: Button, Input, Modal, Card, Toast, Dropdown
- Multi-step workflow starting with browser_navigate and browser_snapshot tool patterns
Adoption & trust: 741 installs on skills.sh; 58 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You ship UI from a component library but lack a consistent agent-driven pass over Storybook states, visuals, and a11y before release.
Who is it for?
Indie frontend devs maintaining a React design system who already expose components in Storybook and use an agent with Playwright MCP.
Skip if: Backend-only APIs with no UI surface, or teams that want unit tests only with no browser-based visual regression.
When should I use this skill?
Testing a component library, Storybook stories, visual consistency, accessibility, or responsive component behavior with Playwright MCP.
What do I get? / Deliverables
Your agent follows a documented Playwright MCP sequence that captures structure, exercises controls, and flags regressions across named component variants.
- Browser snapshot evidence per component
- Variant and state coverage notes
- Accessibility and interaction verification results
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Ship is canonical because the skill is a pre-release verification workflow for components, not initial UI implementation. Testing matches visual regression, state matrices, accessibility verification, and interactive behavior checks.
Where it fits
After adding a new Toast variant, run the MCP snapshot flow to confirm canvas and controls render.
Gate a release by walking Button through Primary, Secondary, Danger, and Ghost states in Storybook.
Re-run dropdown and modal steps on staging when users report keyboard navigation bugs.
How it compares
MCP-driven browser QA workflow—not a static screenshot diff CLI installed as a standalone npm tool only.
Common Questions / FAQ
Who is playwright-visual-testing for?
Solo builders and small teams owning a component library who want their coding agent to run structured visual and accessibility checks via Playwright MCP.
When should I use playwright-visual-testing?
In Ship before merging UI-heavy PRs; in Build when hardening new variants in Storybook; in Operate when investigating reported UI regressions—use when validating design-system components in the browser.
Is playwright-visual-testing safe to install?
The skill drives browser automation against URLs you provide; review the Security Audits panel on this Prism page and only point tests at trusted Storybook or staging hosts.
SKILL.md
READMESKILL.md - Playwright Visual Testing
# Component Library Testing Example Complete workflow for testing a design system component library using Playwright MCP server. This example covers component state validation, visual regression testing, accessibility verification, and documentation generation. ## Scenario Testing a React component library (storybook.example.com) to verify: - Component rendering in all states - Visual consistency across variants - Accessibility and keyboard navigation - Responsive behavior of components - Documentation accuracy - Interactive element functionality ## Component Library Structure **Components to Test:** - Button (Primary, Secondary, Danger, Ghost variants) - Input (Text, Email, Password, Error states) - Modal (Default, Large, Alert, Confirmation) - Card (Default, Elevated, Outlined, Interactive) - Toast/Notification (Success, Error, Warning, Info) - Dropdown (Single select, Multi-select, Searchable) ## Step 1: Button Component Testing ### Navigate to Button Component ``` Tool: browser_navigate Parameters: url: "https://storybook.example.com/?path=/story/components-button" ``` ``` Tool: browser_wait_for Parameters: text: "Button" ``` ### Capture Component Page Structure ``` Tool: browser_snapshot Returns: heading "Button" [ref=101] text "Primary interactive button component" [ref=102] group "Canvas" [ref=103] button "Button" [ref=104] group "Controls" [ref=105] combobox "Variant" [ref=106] combobox "Size" [ref=107] textbox "Label" [ref=108] checkbox "Disabled" [ref=109] checkbox "Loading" [ref=110] navigation "Stories" [ref=111] link "Primary" [ref=112] link "Secondary" [ref=113] link "Danger" [ref=114] link "Ghost" [ref=115] link "Sizes" [ref=116] link "States" [ref=117] ``` ### Test Primary Button - Default State ``` Tool: browser_click Parameters: element: "Primary story link" ref: "112" ``` ``` Tool: browser_wait_for Parameters: time: 0.5 ``` ``` Tool: browser_snapshot Returns: group "Canvas" [ref=201] button "Click me" [ref=202] role: button ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-primary-default.png" element: "Canvas group" ref: "201" ``` ### Test Hover State ``` Tool: browser_hover Parameters: element: "Click me button" ref: "202" ``` ``` Tool: browser_wait_for Parameters: time: 0.3 ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-primary-hover.png" element: "Canvas group" ref: "201" ``` ### Test Active/Pressed State ``` Tool: browser_evaluate Parameters: element: "Click me button" ref: "202" function: "(element) => { element.focus(); }" ``` ``` Tool: browser_wait_for Parameters: time: 0.3 ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-primary-focus.png" element: "Canvas group" ref: "201" ``` ### Test Disabled State ``` Tool: browser_click Parameters: element: "Disabled checkbox" ref: "109" ``` ``` Tool: browser_wait_for Parameters: time: 0.3 ``` ``` Tool: browser_snapshot Returns: button "Click me" [ref=202] disabled: true ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-primary-disabled.png" element: "Canvas group" ref: "201" ``` ### Test Loading State ``` Tool: browser_click Parameters: element: "Disabled checkbox" ref: "109" ``` ``` Tool: browser_click Parameters: element: "Loading checkbox" ref: "110" ``` ``` Tool: browser_wait_for Parameters: time: 0.5 ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-primary-loading.png" element: "Canvas group" ref: "201" ``` ### Test Secondary Button ``` Tool: browser_click Parameters: element: "Secondary story link" ref: "113" ``` ``` Tool: browser_wait_for Parameters: time: 0.5 ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-secondary-default.png" element: "Canvas group" ref: "201" ``` ``` Tool: browser_hover Parameters: element: "Button" ref: "202" ``` ``` Tool: browser_take_screenshot Parameters: filename: "button-secondary-hover.png" element: "Canvas group" r