# Visual Testing — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/en/storybook/sb-visual-testing

> Add screenshot-based visual regression testing to Storybook with Chromatic or Percy and review changes before merge.

## Visual regression testing

Visual testing tools like Percy or Chromatic integrate with Storybook to automatically capture component screenshots and alert you to unexpected visual changes.

## Chromatic for Storybook

Chromatic is the official cloud service for Storybook visual testing. It runs visual tests, tracks changes, and provides a review dashboard for every build.

## Setting up Chromatic

Connect your Storybook to Chromatic with a simple authentication.

```bash
# Install Chromatic CLI
npm install --save-dev chromatic

# Run visual tests
npx chromatic --project-token=YOUR_TOKEN
```

## Percy integration

Percy is another visual testing tool that integrates with Storybook. It captures full-page screenshots and highlights visual differences.