Storybook embedding
summary
Storybook 6.4 introduces play function based interaction testing via CSF3 and 6.5 adds assertions and accessibility checks, running in-browser with Testing Library and in CI via a Node runner powered by Playwright and Jest. Chromatic automates build storybook uploads, takes screenshots, serves private embeds and enables Figma linking; exported stories become dynamic iframes with automatic height. Roadmap promise: Storybook 7.0 source of truth for the UI lifecycle, plus addon hooks so interaction testing and Chromatic uploads plug into existing tools.
AI-written summary · about
chapters (18)
- 0:00Intro
- 1:07Reusing components
- 2:28Storybook
- 3:32Story encoding
- 4:34Story for
- 5:28UI development
- 6:31Sharing
- 6:49Storybook Export
- 8:03Chromatic
- 8:50Figma
- 9:59Embed in other places
- 11:11Storybook docs
- 12:14UI testing
- 13:33Frontend testing
- 15:11Play function
- 15:53Interaction testing
- 17:57Actions
- 18:31Outro
related talks
18mStorybook and Testing
28mState of Storybook 7
27mTesting design systems using storybook + Storybook 7.0 sneak peeks
21mTest your UI in the REAL Browser
27mState of Storybook 7
52mStorybook: New and upcoming features
24mCost-Effective Testing with Storybook and Playwright in Vue Applications
24mReact-Storybook"Design, Develop, Document and Debug your React UI components"