{"id":61542,"date":"2025-10-17T07:07:00","date_gmt":"2025-10-17T11:07:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=61542"},"modified":"2025-10-23T08:54:04","modified_gmt":"2025-10-23T12:54:04","slug":"test-your-components-where-you-build-with-the-applitools-storybook-addon","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/","title":{"rendered":"Test Your Components Where You Build with the Applitools Storybook Addon"},"content":{"rendered":"\n<p>Local dev is where most UI changes happen (and where regressions sneak in). States drift, styles diverge, and tiny tweaks pile up until something breaks in CI. The <a href=\"https:\/\/applitools.com\/docs\/eyes\/sdks\/storybook\/addon\">Applitools Storybook Addon<\/a> brings AI-powered visual testing straight into Storybook so you can catch issues as you code, approve the good changes quickly, and keep your CI\/CD pipelines green.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>AI-Powered Visual Testing Inside Storybook<\/strong><\/h2>\n\n\n\n<p>Open your Storybook and run visual tests from an Applitools Eyes tab \u2013 no context switching. Results are grouped by component to mirror your Storybook structure, and a reporter widget highlights what needs attention first so you can review diffs in minutes, not hours. Learn more on our <a href=\"https:\/\/applitools.com\/solutions\/storybook\/\">Storybook Component Testing with Applitools<\/a> page.<\/p>\n\n\n\n<ul>\n<li><strong>Catch bugs where you build.<\/strong> Validate component states during local development and avoid surprises later.<\/li>\n\n\n\n<li><strong>Review faster with Visual AI.<\/strong> See only meaningful, human-perceptible UI changes without pixel-to-pixel noise. Tune sensitivity with AI match levels when you need to.<\/li>\n\n\n\n<li><strong>Scale coverage painlessly.<\/strong> Run once; render everywhere with Ultrafast Grid across browsers, devices, and viewports in parallel.<\/li>\n<\/ul>\n\n\n\n<style>\n.browser-frame-light,.browser-frame-dark {\n   margin:0 auto;\n   width:100%;\n   position:relative;\n   border-radius:5px 5px 3px 3px;\n   box-shadow:0 0.2em .8em 0 rgba(0,0,0,0.4);\n}\n\n.browser-frame-light {\n   background-color:#f3f4f6;\n   border-top:1.25em solid rgba(120,144,156,0.3);\n}\n\n.browser-frame-dark {\n   background-color:#1c304b;\n   border-top:1.25em solid rgba(28,48,75,0.3);\n}\n\n.browser-frame-light:before, .browser-frame-dark:before {\n   content:\"\";\n   position:absolute;\n   top:-.8em;\n   left:0.75em;\n   width:0.4em;\n   height:0.4em;\n   border-radius:50%;\n}\n\n.browser-frame-light:before,.browser-frame-dark:before {\n   background-color:#0d7eb3;\n   box-shadow:0 0 0 1px #0d7eb3,1.1em 0 0 1px #0097ba,2.2em 0 0 1px #00a698;\n}\n\n.browser-frame-light video,.browser-frame-light img,\n.browser-frame-dark video,.browser-frame-dark img {\n   display:block;\n   width:100%;\n   height:auto;\n   border-radius:0 0 3px 3px;\n}\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use the Applitools Eyes Storybook Addon<\/h2>\n\n\n\n<p>Getting started takes just a couple of minutes. <\/p>\n\n\n\n<ol>\n<li><strong>Install the SDK &amp; Addon<br><\/strong>Add Applitools Eyes to your project and enable the Storybook addon (React, Vue, Angular supported). See the installation instructions in the <a href=\"https:\/\/applitools.com\/docs\/eyes\/sdks\/storybook\/addon\">Eyes Storybook Addon docs<\/a>.<\/li>\n\n\n\n<li><strong>Run Applitools Visual Tests in Storybook<\/strong><strong><br><\/strong>Open Storybook, switch to the Applitools Eyes tab, and trigger tests for a single story or an entire component. Results stream back in real time with automatic grouping by component.<\/li>\n\n\n\n<li><strong>Review &amp; Maintain<\/strong><strong><br><\/strong>Use Visual AI diffs, side-by-side views, and auto-maintenance to approve or reject changes in bulk. Prioritized sorting surfaces what needs attention first.<\/li>\n\n\n\n<li><strong>Scale Across Browsers\/Devices<br><\/strong>Turn on Ultrafast Grid to parallelize renders across Chrome, Firefox, Safari, Edge, and mobile sizes \u2013 without extra local setup.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Applitools Storybook Addon Use Case Playbook<\/h2>\n\n\n\n<p>Below are the three most common ways teams use the Eyes Storybook Addon each \u2013 with a quick, practical flow pulled right from the product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use Case: Guard Your Design System<\/h3>\n\n\n\n<p>As you refactor tokens or update themes, run visual tests on every component state. Spot unintended changes across the library instantly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-how-to-do-it-in-storybook\">How to do it in Storybook<\/h4>\n\n\n\n<ol>\n<li>Start Storybook and open your design\u2011system component in the <strong>Applitools Eyes<\/strong> tab.<\/li>\n\n\n\n<li>Click <strong>Run<\/strong> from the tab (or use <strong>Run<\/strong> in the left sidebar test module). The addon tests the stories and streams results inline for every browser\/device in your applitools.config.js.<\/li>\n\n\n\n<li>In the sidebar, filter by <strong>Unresolved<\/strong> to zero in on changes across the library (Green = passed, Orange = unresolved, Red = failed).<\/li>\n\n\n\n<li>Open a story\u2019s result and use <strong>Side\u2011by\u2011Side<\/strong> or the <strong>Slider<\/strong> to spot subtle spacing\/typography diffs.<\/li>\n\n\n\n<li>Approve legit theme updates with <strong>Thumbs Up<\/strong> (or use <strong>\u22ef \u2192 Review actions<\/strong> to approve the whole story\/batch). Reject regressions with <strong>Thumbs Down<\/strong> and fix.<\/li>\n<\/ol>\n\n\n\n<p><strong>Pro tip:<\/strong> Use the tab <strong>\u22ef \u2192 Configuration<\/strong> to confirm you\u2019re validating the right browser matrix and server URL. See more options in the docs.<\/p>\n\n\n\n<figure class=\"wp-block-video browser-frame-dark\"><video autoplay loop muted src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-review-all-affected-stories.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Use Case: Fix Fast During Local Dev<\/h3>\n\n\n\n<p>Working on a feature branch? Validate your component in Storybook before you commit.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-how-to-do-it-in-storybook-0\">How to do it in Storybook<\/h4>\n\n\n\n<ol>\n<li>Open your feature\u2019s stories, then hit <strong>Run<\/strong> in the <strong>Applitools<\/strong> tab for the component you\u2019re touching.<\/li>\n\n\n\n<li>Watch statuses update inline; click the status buttons to filter to <strong>Unresolved<\/strong> so you only look at what changed.<\/li>\n\n\n\n<li>Click into any row to open compare tools: <strong>Diff Image<\/strong>, <strong>Actual Image<\/strong>, <strong>Expected Image<\/strong>, <strong>Side\u2011by\u2011Side<\/strong>, or <strong>Slider<\/strong>.<\/li>\n\n\n\n<li>If the change is intended, <strong>Thumbs Up<\/strong> to approve; otherwise <strong>Thumbs Down<\/strong> to flag and keep iterating.<\/li>\n\n\n\n<li>When you\u2019re happy locally, push your branch. You can scale the same setup in CI using your existing Storybook build\/preview URL.<\/li>\n<\/ol>\n\n\n\n<p><strong>Heads\u2011up:<\/strong> To view baselines or approve\/reject, sign in to your Applitools account in the same browser that\u2019s running Storybook (you\u2019ll be prompted if not).<\/p>\n\n\n\n<figure class=\"wp-block-video browser-frame-dark\"><video autoplay loop muted src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-test-any-update-instantly.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Use Case: Ship Multi\u2011Browser Confidence<\/h3>\n\n\n\n<p>One click, many targets. Validate layout and responsive behavior across browsers and viewports \u2013 early.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-how-to-do-it-in-storybook-1\">How to do it in Storybook<\/h4>\n\n\n\n<ol>\n<li>In <strong>\u22ef \u2192 Configuration<\/strong>, verify your browsers\/devices list (Chrome, Firefox, Safari, Edge; add viewports you care about).<\/li>\n\n\n\n<li>Hit <strong>Run<\/strong> for representative stories (states, theming, interactive). Results come back grouped by each browser\/device so differences are obvious.<\/li>\n\n\n\n<li>Filter the sidebar by <strong>Unresolved<\/strong> and scan. Use <strong>Side\u2011by\u2011Side<\/strong> or <strong>Slider<\/strong> to compare layout at different sizes.<\/li>\n\n\n\n<li>Approve good changes in bulk (<strong>\u22ef \u2192 Review actions<\/strong>) to keep maintenance low.<\/li>\n\n\n\n<li>For broader coverage, run the same setup in CI and expand the matrix. <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video browser-frame-dark\"><video autoplay loop muted src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-results-by-browser.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-visual-ai-gt-pixel-diffs-for-storybook\">Why Visual AI &gt; Pixel Diffs for Storybook<\/h2>\n\n\n\n<p>Pixel-to-pixel tools are fragile with dynamic content and minor rendering differences. Applitools Visual AI mimics human vision to highlight only meaningful UI changes (structure, layout, content) while ignoring the noise. You can still dial sensitivity up or down with match levels whenever needed. <em>Less flake, more signal.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try AI-Powered Visual Testing in Storybook Today<\/h2>\n\n\n\n<p>Run your first component tests in minutes, review diffs right in Storybook, and expand coverage with Ultrafast Grid \u2013 without slowing delivery.<\/p>\n\n\n\n<ul>\n<li>Explore the <a href=\"https:\/\/applitools.com\/solutions\/storybook\/\">Applitools Storybook Component Testing<\/a> solution<\/li>\n\n\n\n<li>Read the <a href=\"https:\/\/applitools.com\/docs\/eyes\/sdks\/storybook\/addon\">Applitools Storybook Addon<\/a> docs<\/li>\n\n\n\n<li>Compare <a href=\"https:\/\/applitools.com\/compare\/chromatic\/\">Applitools Eyes against Chromatic<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group pt-none pb-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-frequently-asked-questions\">Frequently Asked Questions<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1731025092682\"><strong class=\"schema-faq-question\">What does the Applitools Storybook Addon do?<\/strong> <p class=\"schema-faq-answer\">It runs Applitools visual tests from inside Storybook. You can trigger tests per story or component, then review results and diffs inline with automatic grouping that mirrors your Storybook tree.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1760365302457\"><strong class=\"schema-faq-question\">Do I need to write tests with the Applitools Storybook Addon?<\/strong> <p class=\"schema-faq-answer\">With the Applitools Storybook Addon, you existing stories become the tests. <\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1760365328991\"><strong class=\"schema-faq-question\">How is the Applitools Storybook Addon different from Chromatic visual tests?<\/strong> <p class=\"schema-faq-answer\">Applitools&#8217; Visual AI detects signficant visual differences instead of only pixel-to-pixel comparisons. This means you see fewer false positives and spend less time on maintenance.<br\/><br\/>Appitools also lets you auto-maintain hundreds of tests at once (when you do need to perform test maintenance), run them across multiple browsers and devices instantly, and manage everything in the same platform that&#8217;s also running your Playwright and Cypress end-to-end test flows. See our <a href=\"\/compare\/chromatic\/\">Applitools vs. Chromatic comparison page<\/a> for a deeper breakdown.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1760365351403\"><strong class=\"schema-faq-question\">What about performance and CI stability?<\/strong> <p class=\"schema-faq-answer\">Validate locally in Storybook to prevent CI failures. When you\u2019re ready, run the same tests in CI and render broadly with Ultrafast Grid \u2013 fast and consistent.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1760365363708\"><strong class=\"schema-faq-question\">Do I need an Applitools account to use the Storybook Addon?<\/strong> <p class=\"schema-faq-answer\">Yes. You\u2019ll need an active <a href=\"https:\/\/auth.applitools.com\/users\/register?app=eyes\">Applitools Eyes account<\/a> and an API key to use the Applitools Storybook Addon.<\/p> <\/div> <\/div>\n\n\n\n<div class=\"wp-block-group pb-none pt-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n.schema-faq-section { \n  background: white;\n  margin: 1rem 0;\n  border: 2px solid rgba(0, 0, 0, 0.13);\n  border-radius: 10px;\n  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);\n}\n.schema-faq-question{\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  transition: opacity ease 0.25s;\n  padding: 1rem;\n  color: var(--wp--preset--color--primary);\n  font-size: var(--wp--preset--font-size-large);\n}\n.schema-faq-question:hover {\n  color: var(--wp--preset--color--secondary);\n}\n.schema-faq-question:after{\n  width: 16px;\n  height: 20px;\n  display: inline-block;\n  margin-left: auto;\n  margin-right: 5px;\n  vertical-align: top;\n  color: inherit;\n  content: \"+\";\n}\n.schema-faq-question.expanded:after{\n  content: \"-\";\n}\n.schema-faq-question:hover{\n  opacity: 0.75;\n}\n.schema-faq-answer{\n  padding: 0 1rem 1rem 1rem;\n  display: none;\n}\n.schema-faq-answer.default{\n  display: block;\n}\n.editor-styles-wrapper .schema-faq-question {\n  cursor: text;\n}\n.editor-styles-wrapper .schema-faq-answer {\n  display: block; \n}\n<\/style>\n\n\n\n<script>\njQuery(function($){var yoast={accordion:function(){var isAnimating=!1;$(\".schema-faq-section\").find(\".schema-faq-question\").click(function(event){event.stopPropagation();if(isAnimating)return;isAnimating=!0;var answer=$(this).nextAll(\".schema-faq-answer\").eq(0);answer.slideToggle(250,function(){$(this).toggleClass(\"expanded\");$(this).prev(\".schema-faq-question\").toggleClass(\"expanded\");isAnimating=!1});$(\".schema-faq-answer\").not(answer).slideUp(\"fast\",function(){$(this).removeClass(\"expanded\");$(this).prev(\".schema-faq-question\").removeClass(\"expanded\")})})}};yoast.accordion()});\n<\/script>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.<\/p>\n","protected":false},"author":8,"featured_media":61474,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10558],"tags":[10023,16673,12691,17013,12758,10268,10262],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual Component Testing with the Applitools Storybook Addon<\/title>\n<meta name=\"description\" content=\"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test Your Components Where You Build with the Applitools Storybook Addon\" \/>\n<meta property=\"og:description\" content=\"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-17T11:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T12:54:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1915\" \/>\n\t<meta property=\"og:image:height\" content=\"1077\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Applitools Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Applitools Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\"},\"author\":{\"name\":\"Applitools Team\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000\"},\"headline\":\"Test Your Components Where You Build with the Applitools Storybook Addon\",\"datePublished\":\"2025-10-17T11:07:00+00:00\",\"dateModified\":\"2025-10-23T12:54:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\"},\"wordCount\":1080,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png\",\"keywords\":[\"Applitools Eyes\",\"component testing\",\"Developers\",\"Eyes\",\"Product\",\"StoryBook\",\"Visual Testing Tools\"],\"articleSection\":[\"Product\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\",\"name\":\"Visual Component Testing with the Applitools Storybook Addon\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png\",\"datePublished\":\"2025-10-17T11:07:00+00:00\",\"dateModified\":\"2025-10-23T12:54:04+00:00\",\"description\":\"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png\",\"width\":1915,\"height\":1077},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Test Your Components Where You Build with the Applitools Storybook Addon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000\",\"name\":\"Applitools Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g\",\"caption\":\"Applitools Team\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/itay\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682\",\"position\":1,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682\",\"name\":\"What does the Applitools Storybook Addon do?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"It runs Applitools visual tests from inside Storybook. You can trigger tests per story or component, then review results and diffs inline with automatic grouping that mirrors your Storybook tree.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457\",\"position\":2,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457\",\"name\":\"Do I need to write tests with the Applitools Storybook Addon?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"With the Applitools Storybook Addon, you existing stories become the tests. \",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991\",\"position\":3,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991\",\"name\":\"How is the Applitools Storybook Addon different from Chromatic visual tests?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Applitools' Visual AI detects signficant visual differences instead of only pixel-to-pixel comparisons. This means you see fewer false positives and spend less time on maintenance.<br\/><br\/>Appitools also lets you auto-maintain hundreds of tests at once (when you do need to perform test maintenance), run them across multiple browsers and devices instantly, and manage everything in the same platform that's also running your Playwright and Cypress end-to-end test flows. See our <a href=\\\"\/compare\/chromatic\/\\\">Applitools vs. Chromatic comparison page<\/a> for a deeper breakdown.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403\",\"position\":4,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403\",\"name\":\"What about performance and CI stability?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Validate locally in Storybook to prevent CI failures. When you\u2019re ready, run the same tests in CI and render broadly with Ultrafast Grid \u2013 fast and consistent.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708\",\"position\":5,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708\",\"name\":\"Do I need an Applitools account to use the Storybook Addon?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. You\u2019ll need an active <a href=\\\"https:\/\/auth.applitools.com\/users\/register?app=eyes\\\">Applitools Eyes account<\/a> and an API key to use the Applitools Storybook Addon.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visual Component Testing with the Applitools Storybook Addon","description":"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/","og_locale":"en_US","og_type":"article","og_title":"Test Your Components Where You Build with the Applitools Storybook Addon","og_description":"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2025-10-17T11:07:00+00:00","article_modified_time":"2025-10-23T12:54:04+00:00","og_image":[{"width":1915,"height":1077,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png","type":"image\/png"}],"author":"Applitools Team","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Applitools Team","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/"},"author":{"name":"Applitools Team","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000"},"headline":"Test Your Components Where You Build with the Applitools Storybook Addon","datePublished":"2025-10-17T11:07:00+00:00","dateModified":"2025-10-23T12:54:04+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/"},"wordCount":1080,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png","keywords":["Applitools Eyes","component testing","Developers","Eyes","Product","StoryBook","Visual Testing Tools"],"articleSection":["Product"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/","name":"Visual Component Testing with the Applitools Storybook Addon","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png","datePublished":"2025-10-17T11:07:00+00:00","dateModified":"2025-10-23T12:54:04+00:00","description":"Test Storybook components with Visual AI inside Storybook. Catch UI bugs early, bulk-maintain baselines, and scale cross-browser coverage.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/10\/storybook-addon-sidebar.png","width":1915,"height":1077},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Product","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/"},{"@type":"ListItem","position":3,"name":"Test Your Components Where You Build with the Applitools Storybook Addon"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000","name":"Applitools Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g","caption":"Applitools Team"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/itay\/"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682","position":1,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1731025092682","name":"What does the Applitools Storybook Addon do?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"It runs Applitools visual tests from inside Storybook. You can trigger tests per story or component, then review results and diffs inline with automatic grouping that mirrors your Storybook tree.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457","position":2,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365302457","name":"Do I need to write tests with the Applitools Storybook Addon?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"With the Applitools Storybook Addon, you existing stories become the tests. ","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991","position":3,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365328991","name":"How is the Applitools Storybook Addon different from Chromatic visual tests?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Applitools' Visual AI detects signficant visual differences instead of only pixel-to-pixel comparisons. This means you see fewer false positives and spend less time on maintenance.<br\/><br\/>Appitools also lets you auto-maintain hundreds of tests at once (when you do need to perform test maintenance), run them across multiple browsers and devices instantly, and manage everything in the same platform that's also running your Playwright and Cypress end-to-end test flows. See our <a href=\"\/compare\/chromatic\/\">Applitools vs. Chromatic comparison page<\/a> for a deeper breakdown.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403","position":4,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365351403","name":"What about performance and CI stability?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Validate locally in Storybook to prevent CI failures. When you\u2019re ready, run the same tests in CI and render broadly with Ultrafast Grid \u2013 fast and consistent.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708","position":5,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/test-your-components-where-you-build-with-the-applitools-storybook-addon\/#faq-question-1760365363708","name":"Do I need an Applitools account to use the Storybook Addon?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes. You\u2019ll need an active <a href=\"https:\/\/auth.applitools.com\/users\/register?app=eyes\">Applitools Eyes account<\/a> and an API key to use the Applitools Storybook Addon.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/61542"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=61542"}],"version-history":[{"count":17,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/61542\/revisions"}],"predecessor-version":[{"id":61599,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/61542\/revisions\/61599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/61474"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=61542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=61542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=61542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}