Visual Testing Handbook

✍️Coming soon: 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 five chapter handbook gives you an overview of visual testing in Storybook.
Languages: English
+2
Contributors
5
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 and feels right every release.

Table of Contents
  1. 1
    Introduction
    The pragmatic way to test user interfaces
  2. 2
    Component explorers
    Your new favorite tool for UI development
  3. 3
    Visual test-driven development
    A clear workflow for building components
  4. 4
    Tutorial
    Put all the concepts together in code
  5. 5
    Automate
    Learn how to automate visual testing to conquer UI 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 states including loading, empty, and hasData. Then we'll walk through the process of visual testing by hand and automatically.

Authors
loading
Dominic Nguyen
Storybook design
loading
Tom Coleman
Storybook core