playwright-story-tests

Run Playwright tests against Storybook stories in iframes and validate IndexedDB state.

1|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill playwright-story-tests
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-story-tests
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/playwright-story-tests
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill playwright-story-tests

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Playwright-based testing for Storybook stories mounted in an iframe, exercising the story's play function and validating UI state, ARIA, and real IndexedDB contents.

Core Features & Use Cases

  • Story-level tests target individual Storybook stories and verify the in-iframe play function outcomes.
  • Story-URL tests validate that the iframe URL contract (id-based) renders correctly and that post-condition UI and data are accurate.
  • The skill enforces a disciplined test-contract workflow integrated into the project's bun run check to gate changes.

Quick Start

Install dependencies and run bun run check to execute all Storybook Playwright tests.

Frequently Asked Questions about playwright-story-tests

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

FAQPage Schema
How do I run Playwright tests against Storybook stories in an iframe?

To run Playwright tests against Storybook stories, you mount the story's iframe URL and execute the story's play function to validate UI behavior, ARIA roles, and IndexedDB state. This ensures consistent end-to-end UI behavior.

Can I validate IndexedDB state during Storybook story play function tests?

Yes, you can validate IndexedDB state during Storybook story tests. The testing mechanism accesses real-browser IDB contents within the iframe to ensure accurate data persistence and UI state validation.

What is the best way to automate E2E testing for Storybook stories?

The best way to automate E2E testing for Storybook stories is coordinating Playwright to mount id-based iframe URLs and validate post-condition UI and data, integrated directly into the bun run check workflow.

Does the Playwright Storybook testing workflow enforce metadata consistency?

Yes, the Playwright Storybook testing workflow enforces metadata consistency. It validates the id-based iframe URL contract rendering to ensure accurate UI behavior and correct IndexedDB contents across story-level tests.

How do I integrate Storybook Playwright tests into my project's check command?

You integrate Storybook Playwright tests by running bun run check, which executes all story-level and story-URL tests to gate changes and ensure disciplined test-contract workflow compliance.

Why should I use Playwright for Storybook iframe URL testing instead of other tools?

Playwright provides real-browser IDB access and validates the id-based iframe URL contract, ensuring post-condition UI and data accuracy that other category-level testing tools might not achieve within Storybook iframes.