Back to tutorials

Visual Testing Handbook

Visual testing is a pragmatic yet precise way to verify the look of UI components. It’s practiced by companies like Slack, Lonely Planet, and Walmart. This handbook gives you an overview of visual testing in Storybook.
Languages: EnglishEspañol한국어
33+
Contributors
6
Chapters
Visual Testing Handbook

Overview

What is visual testing? Visual tests validate the appearance of rendered UI by capturing an image of it in a consistent browser environment. That image is compared to previous images (baselines) to detect visual changes. UIs are more complex, multi-state, and personalized than ever. Visual testing helps you ensure that your app looks right every release.

Table of Contents
  1. 1
    Introduction
    The pragmatic way to test user interfaces
  2. 2
    Component explorers
    A tool for UI development and visual testing
  3. 3
    Workflow
    A test-driven workflow for building components
  4. 4
    Visual TDD
    Write your first visual tests
  5. 5
    Automate
    Automate visual testing to catch regressions
  6. 6
    Conclusion
    Say bye to visual bugs

What you'll build

React

CommentList

CommentList is a list component that you might find in any chat tool. Follow along as we demonstrate how to use Storybook to build discrete UI variations. Then we'll walk through the process of visual testing manually and automatically.

Authors
loading
Dominic Nguyen
Storybook design
loading
Tom Coleman
Storybook core
Join the community
6,614 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook
Maintained by
Chromatic
Special thanks to Netlify and CircleCI