Tutorials

UI Testing Handbook

A guide that highlights UI testing strategies used by scaled front-end teams. You'll learn to verify everything from visual appearance to logic and even detect integration issues. Along the way, we'll demonstrate how you can reduce bugs by automatically running your tests.
Languages: English한국어
4
Contributors
9
Chapters
UI Testing Handbook

Overview

UI testing is integral to delivering high-quality experiences. But there are so many ways to test that it can be overwhelming to figure out what's right for your project. This guide distills learnings from leading teams such as Target, Adobe, O'Reilly and Shopify into a pragmatic testing strategy that offers comprehensive coverage, easy setup, and low maintenance. We'll walk through the processes of setting up tooling, writing tests and automating your workflow.

Table of Contents
  1. 1
    Introduction
    Latest production-ready techniques for testing UIs
  2. 2
    Visual
    Learn how to pinpoint UI bugs automatically
  3. 3
    Composition
    Prevent minor changes from turning into major regressions
  4. 4
    Interaction
    Learn how to simulate user behaviour and run functional checks
  5. 5
    Accessibility
    Fast feedback with integrated tooling
  6. 6
    User flow
    Verify that your UI works end-to-end
  7. 7
    Automate
    Speed up your workflow and ship higher quality of code
  8. 8
    Workflow
    A testing workflow that doesn’t slow you down
  9. 9
    Conclusion
    Get more done by doing less

What you'll build

React
Testing Library
Chromatic
Axe
Jest
GitHub Actions
Cypress

Taskbox UI

Follow along as we test the Taskbox app. It's a task management app, similar to Asana, where you can pin, edit and archive tasks. We'll look at how to verify the various characteristics of this UI.

Author
loading
Varun Vachhar
Storybook DX
Reviewed by
loading
Michael Chan
Storybook DX
loading
Kyle Gach
Storybook DX
loading
Dominic Nguyen
Storybook design
loading
Rob Snow
Adobe
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.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify