skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

storybook-play-functions

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

1|Updated Apr 26, 2026
Search Tags:#automation#react#storybook#frontend-testing#interaction-testing#play-function#story-testing
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill storybook-play-functions-matthewharwood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-play-functions
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/storybook-play-functions
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill storybook-play-functions-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Storybook test authors can embed interactive tests directly inside stories using play functions, running inside Storybook's iframe with @storybook/test.

Core Features & Use Cases

  • Owns play functions attached to StoryObj to drive in-story interactions and assertions.
  • Distinguishes in-story tests from external Playwright tests for fast, iterative feedback during component development.
  • Documents patterns like minimal plays, step grouping, and async waits within the iframe to improve test readability and reliability.

Quick Start

Open a story file and attach a play function to the StoryObj, then run Storybook to execute the in-story tests.

Frequently Asked Questions about storybook-play-functions

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

FAQPage Schema
How do I add interaction tests to Storybook stories?▼

In-story play functions run inside the Storybook iframe using @storybook/test, isolating tests internally for fast, iterative feedback during component development without relying on external Playwright test runners.

How do I write a play function in Storybook?▼

To write a play function in Storybook, attach it to your StoryObj and use @storybook/test to drive in-story interactions, applying patterns like step grouping and async waits to ensure deterministic behavior within the iframe.

Do I need Playwright to run Storybook interaction tests?▼

No, you do not need external Playwright tests to run Storybook interaction tests. You can validate user interactions and component states by using @storybook/test and inline play functions instead.

What is the difference between Storybook play functions and Playwright tests?▼

Storybook play functions run inline within the Storybook iframe for immediate component feedback, whereas category-level external test runners validate broader application flows and end-to-end user journeys.

Why are my Storybook play functions failing async operations?▼

Storybook play functions fail async operations when they lack proper async waits within the iframe. You must apply deterministic patterns like step grouping and async waits to ensure reliable in-story test execution.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

storybook

Generate Storybook configuration and story files for React components.

Community
Intermediate
factorialcofactorialco
27

f0-storybook-testing

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

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

storybook-story-writing

Create CSF3 Storybook stories with TypeScript-typed Meta and StoryObj.

Official
Intermediate
Svenja-devSvenja-dev
38

e2e-testing

Automate end-to-end browser testing for web applications with Playwright MCP.

Community
Intermediate