Concept
Visual Regression (Pixel Comparison)
Functional tests check if a button is clickable, but they cannot tell if a CSS bug moved the button off-screen, or changed its background color to white-on-white.
Visual Regression Testing solves this by capturing screenshots of components in headless browsers and comparing them to saved baseline images using pixel-comparison algorithms (like pixelmatch):
[Baseline Image] vs [Current Run Image] ──▶ [Diff Image]
(Highlights differences in red)If the mismatch percentage exceeds a defined threshold (e.g. 0.1%), the test fails, alerting developers to the visual drift.
Storybook Test Runner
Storybook is an isolated sandbox for UI components. The Storybook Test Runner is a utility (powered by Jest and Playwright) that converts your Storybook stories into automated tests: