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
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify