skills.rest
factorialco
factorialcoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

f0-storybook-testing

Automate interaction and accessibility tests for Storybook components with Playwright and axe-playwright.

27|5|Updated Mar 20, 2024
Search Tags:#testing#accessibility#a11y#playwright#storybook#component testing
One-click install
npx skills add https://github.com/factorialco/f0 --skill f0-storybook-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: f0-storybook-testing
Source: https://github.com/factorialco/f0/tree/main/packages/react/.skills/f0-storybook-testing
Command: npx skills add https://github.com/factorialco/f0 --skill f0-storybook-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the testing of F0 design system components within Storybook, ensuring both interactive functionality and accessibility compliance.

Core Features & Use Cases

  • Interaction Tests: Write and execute Playwright-based play functions for component interactions.
  • Accessibility (a11y) Tests: Automatically run axe-playwright checks for WCAG compliance on every story.
  • Use Case: When developing a new button component, use this Skill to write a play function that simulates a click event and verifies the expected output, while also ensuring the button meets accessibility standards.

Quick Start

Run all Storybook tests using the command pnpm test-storybook.

Frequently Asked Questions about f0-storybook-testing

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

FAQPage Schema
How do I automate accessibility testing for Storybook components?▼

Automate interaction testing in Storybook components by writing Playwright play functions that simulate user events like clicks and verify expected deterministic component behavior outputs. This validates interactive functionality directly within the Storybook environment.

Can I use Playwright to test Storybook component interactions?▼

Yes, you can use Playwright to test Storybook component interactions by writing play functions that simulate user events like clicks and verify expected deterministic component behavior outputs. This validates interactive functionality directly within the Storybook environment.

How do I run all Storybook component tests from the command line?▼

Run all Storybook component tests from the command line using the `pnpm test-storybook` command. This executes both Playwright interaction tests and axe-playwright accessibility checks across your configured stories.

Does Storybook testing support configuring a11y test modes per story?▼

Yes, Storybook testing supports configuring per-story a11y test modes, allowing you to customize axe-playwright accessibility checks for individual stories. This ensures targeted WCAG compliance validation for specific component states and variants.

What is the best way to verify WCAG compliance for design system components?▼

The best way to verify WCAG compliance for design system components is running axe-playwright checks within Storybook. This automatically validates accessibility standards across all component stories while simulating real user interactions.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

storybook

Generate Storybook configuration and story files for React components.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
ForgePlanForgePlan
3

canvas-storybook-test

Automate Storybook story testing against design specifications with Vitest, axe-core, and Chromatic.

Official
Advanced
matthewharwoodmatthewharwood
1

storybook-play-functions

Attach play functions to StoryObj for in-story interaction tests.

Community
Intermediate