Storybook's interaction testing system uses play functions to simulate user interactions directly within stories. Combined with @storybook/test-runner, play functions run as automated CI tests in a headless browser, turning component stories into a comprehensive test suite.
0 / 5 completed
1 / 5
What is a Storybook Interaction Test and how does it integrate with stories?
Storybook Interaction Tests use the play function in a story to simulate user events (clicks, typing) using @storybook/testing-library and run assertions with @storybook/jest. The play function runs after the story renders, both in the Storybook UI and in the test runner CLI.
2 / 5
A developer adds play: async ({ canvasElement }) => { ... } to a story. What does canvasElement represent?
canvasElement is the root DOM element that Storybook renders the story component into. You pass it to within(canvasElement) from Testing Library to scope queries to the story's DOM, preventing interference from Storybook's own UI elements.
3 / 5
Which package provides the userEvent API used in Storybook play functions to simulate realistic user interactions?
@storybook/testing-library re-exports userEvent from @testing-library/user-event, providing realistic event simulation (including keyboard events, focus changes, and clipboard interactions) rather than just firing synthetic DOM events like fireEvent.
4 / 5
A team uses @storybook/test-runner in CI. What does it do compared to running Storybook interactively?
The @storybook/test-runner runs a headless browser (via Playwright) against a built Storybook and executes all story play functions as automated tests. Stories without play functions are checked for render errors. This enables CI integration without a separate test suite.
5 / 5
What is the advantage of using Storybook's args system in interaction tests compared to hardcoding props?
The args system makes stories composable test fixtures. A base story defines default args, and variations override specific args without duplicating the play function. This enables reuse: a LoginForm story can have separate args for empty, filled, and error states, all sharing the same interaction test logic.