Introduction

Welcome to Applitools Eyes for Storybook. This guide focuses on the value of visual testing for component‑driven UI development and how Eyes augments your Storybook workflow to ship high‑quality UI faster. You already have stories; Applitools Eyes layers on Visual AI to turn those stories into reliable, cross‑browser visual tests with minimal friction.

The promise of visual testing

In today's fast-paced software development landscape, ensuring that your application not only functions correctly but also appears correctly to users is paramount. Traditional testing methods often rely on textual assertions and code-based verifications, which can be time-consuming, fragile, and may not guarantee that the UI looks as intended.

Why add Eyes to Storybook

• Massive UI coverage for every story – Each story becomes a visual checkpoint across the browsers/devices you choose - with zero code to author and maintain. Catch layout, style, and rendering issues early in the component workflow.
• Find what code checks miss – Typography shifts, spacing regressions, z‑index/overflow, asset and font hiccups—surfaces fast during component reviews.
• Consistent experience everywhere – Validate the same look across Chrome/Firefox/Edge/Safari and mobile devices via the Ultrafast Grid, no matter what local browser and OS you are developing on, without any setup or devops hassle.
• Design/dev friendly – Review visually inside Storybook with the Eyes Addon, or in the Applitools Dashboard — no custom test code required.
• Scales with your library – Add stories/states and let Eyes keep pace; batch by PR/branch for neat reviews and history.

Why Eyes vs. pixel‑matching tools

Most Storybook‑centric visual tools rely on strict pixel diffs. That approach struggles with rendering noise, font/anti‑aliasing, and dynamic content—creating false positives and flakiness. Applitools Visual AI compares like a human, focusing on meaningful differences. The result: stable, trustworthy signals and far less maintenance.

Where Applitools Eyes shines for Storybook teams

As the inventor of visual testing, Applitools Eyes addresses these challenges by leveraging advanced Visual AI technology to provide reliable, efficient, and scalable visual testing that truly fulfills the promise of visual testing.

• Fewer false alarms – Advanced match levels (Strict, Layout, Ignore Colors, Dynamic) ignore unimportant pixel noise while flagging real UX changes.
• Cross‑browser & real devices at speed – Run the same story across multiple browsers and iOS/Android devices on the Ultrafast Grid—no extra infra.
• Automated maintenance – Approve once to propagate across relevant checkpoints/branches; reuse ignore/floating regions; group similar diffs.
• Deeper diagnostics – Optional Root Cause Analysis (DOM/CSS insight) to understand why a diff happened.
• Enterprise‑grade – Scales to millions of checks with SSO/security/compliance and team workflows.

Advanced algorithms and match levels

Applitools provides advanced image comparison algorithms beyond strict pixel matching:

• Flexible match levels: Choose from Strict, Layout, Ignore Colors, and Dynamic text match levels to suit your testing needs. These match levels can be applied to entire pages or mixed and matched on different regions of the page, giving you granular control over your visual comparisons:
  • Strict: Detects any meaningful differences that are visible to the human eye.
  • Layout: Ignores content changes but detects layout shifts, useful for testing highly dynamic pages and localization.
  • Ignore color: Ignores style changes but detects content changes.
  • Dynamic (New!): Designed to handle dynamic content gracefully by automatically detecting and suppressing diffs due to dynamic content such as emails, dates, credit card numbers, etc..
• Ignore displacements: suppresses differences caused by elements shifting position, reducing diff clutter in dynamic pages and expedites diff reviews.
• Handling dynamic content: Intelligent algorithms focus on significant visual differences, effectively managing animations, dynamic data, and other variable content.

Automated maintenance and baseline management

Applitools simplifies and expedites baseline management with a variety of automated features:

• Effortless baseline management: Baselines are stored in the cloud, avoiding repository bloat and enabling easy updates.
• Automated maintenance tools:
  • Group by diff: Automatically groups similar differences, allowing to resolve hundreds of diffs with a few clicks by batch acceptance or rejection.
  • Propagation of accept/reject: Changes can be propagated across tests and branches, streamlining updates.
  • Propagation of ignore regions: Ignore regions added in the UI can be applied to other tests, reducing repetitive tasks.
  • Adaptation of ignore regions: When the layout of components changes, regions automatically adjust their location accordingly without anyone having to re-apply them.
• Reduced developer involvement: Non-developers can approve new screenshots directly in the Applitools Dashboard, minimizing the need for code changes and developer intervention.

Scalability and reliability

• Run millions of tests daily: Designed to handle high volumes of tests efficiently.
• Cross-environment consistency: Provides stable results across different browsers, devices, and screen sizes without additional setup, test framework, or code adjustments.
• Stable tests: By focusing on meaningful differences, tests are less flaky and more reliable over time.

How it fits your Storybook flow

1. Write/organize stories as usual (args/controls, states, themes).
2. Run Eyes via CLI (npx eyes-storybook) or inside Storybook with the Eyes Addon.
3. Render on the Ultrafast Grid to your configured targets (desktop browsers, mobile, real devices).
4. Review diffs where you prefer: Addon (resolve in place) or Dashboard (full triage tools).
5. Approve intentional changes to update baselines; rejected diffs fail the run and block merges in CI when desired.

Additional benefits of using Applitools

By integrating Applitools Eyes into your Storybook workflow, you unlock a suite of powerful features that enhance your testing efforts beyond basic visual comparisons.

Ultrafast Grid for cross-browser testing

• Efficient parallel testing: Define browser targets (see how) in applitools.config.js and Eyes fans your stories out in parallel—no local Selenium farms, tunnels, or device labs to manage. Add/remove coverage without touching story code.
• No additional infrastructure: The Ultrafast Grid handles rendering across environments, simplifying your testing process and reducing maintenance efforts. There's no need to modify your test framework for parallel or distributed execution.
• Improved security: No need to set up inbound firewall rules or install secured tunnels to test internal systems. The Ultrafast Grid securely handles rendering without exposing your internal environments.
• Faster cross-device and browser testing: Accelerate your testing cycles by running tests concurrently, ensuring rapid feedback.

Advanced dashboard and collaboration tools

• Detailed test reports: Visual diffs with side-by-side comparisons, annotations, and the ability to mark up differences.
• Historical test results: Access and filter historical test data, aiding in traceability and analysis.
• Team collaboration: Share results, discuss issues, and resolve discrepancies with your team effectively.
• Special views for tests requiring attention: Quickly identify and focus on tests that need review, improving efficiency.
• Team insights: Insights provides matrices and charts that help users quickly track the performance, trends, and effectiveness of their tests and batches.

Enterprise-grade support and security

• Expert assistance: Access to expert support ensures you can implement visual testing at scale effectively.
• Security and compliance Enterprise-grade security measures and compliance with industry standards protect your data.
• Scalability for large teams: Designed to support organizations running millions of tests, ensuring performance and reliability at scale.
• CI/CD integration: Seamlessly incorporate visual testing into your continuous integration and deployment pipelines, automating tests on every code change, pull request, or deployment.

Intelligent handling of complex scenarios

• A/B testing support: Manage multiple baselines and variants within the platform to handle A/B testing scenarios effectively.
• Accessibility testing: Ensure your application meets accessibility standards like WCAG, delivering an inclusive user experience.
• Root cause analysis: Inspect underlying DOM and CSS changes when visual differences are detected, helping you quickly identify and resolve UI regressions.