{"id":36060,"date":"2022-03-31T13:28:00","date_gmt":"2022-03-31T20:28:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=36060"},"modified":"2022-03-31T13:28:00","modified_gmt":"2022-03-31T20:28:00","slug":"storybook-components-cross-browser-testing","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/","title":{"rendered":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!"},"content":{"rendered":"\n

Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.<\/em><\/p>\n\n\n\n

Let\u2019s face it: modern web apps are complex. If a team wants to provide a seamless user experience on a deadline, they need to squeeze the most out of the development resources they have. Component libraries help tremendously. Developers can build individual components for small things like buttons and big things like headers to be used anywhere in the frontend with a consistent look and feel.<\/p>\n\n\n\n

Storybook<\/a> is one of the most popular tools for building web components. It works with all the popular frameworks, like React, Angular, and Vue. With Storybook, you can view tweaks to components as you develop their \u201cstories.\u201d It\u2019s awesome! However, manually inspecting components only works small-scale when you, as the developer, are actively working on any given component. How can a team test their Storybook components at scale? And how does that fit into a broader web app testing strategy?<\/p>\n\n\n\n

What if I told you that you could automatically do cross-browser testing for Storybook components without<\/em> needing to define any new tests or write any new automation code? And what if I told you that it could fit seamlessly into your existing development workflow? You can do this with the power of Applitools and your favorite CI tool! Let\u2019s see how.<\/p>\n\n\n\n

Adding Visual Component Testing to Your Strategy<\/h2>\n\n\n\n

Historically, web app testing strategies divide functional testing into three main levels:<\/p>\n\n\n\n

  1. Unit testing<\/li>
  2. Integration testing for APIs<\/li>
  3. End-to-end testing for UIs and APIs<\/li><\/ol>\n\n\n\n

    These three levels make up the classic Testing Pyramid<\/a>. Each level of testing mitigates a unique type of risk. Unit tests pinpoint problems in code, integration tests catch problems where entities meet, and end-to-end tests exercise behaviors like a user.<\/p>\n\n\n\n

    The rise of frontend component libraries raises an interesting question: Where do components belong among these levels?<\/em> Components are essentially units of the UI. In that sense, they should be tested individually as \u201cUI units\u201d to catch problems before they become widespread across multiple app views. One buggy component could unexpectedly break several pages. However, to test them properly, they should be rendered in a browser as if they were \u201clive.\u201d They might even call APIs indirectly. Thus, arguably, component testing should be sandwiched between traditional integration and end-to-end testing.<\/p>\n\n\n\n

    \"\"
    Web app testing levels, showing where component testing belongs in relation to other levels.<\/figcaption><\/figure>\n\n\n\n

    Wait, another level of testing? Nobody has time for that! It\u2019s hard enough to test adequate coverage at the three other levels, let alone automate those tests. Believe me, I understand the frustration. Unfortunately, component libraries bring new risks that ought to be mitigated.<\/p>\n\n\n\n

    Thankfully, Applitools provides a way to visually test all the components in a Storybook library with the Applitools Eyes SDK for Storybook<\/a>. All you need to do is install the @applitools\/eyes-storybook<\/code> package into your web app project, configure a few settings, and run a short command to launch the tests. Applitools Eyes will turn each story for each component into a visual test case. On the first run, it will capture a visual snapshot for each story as a \u201cbaseline\u201d image. Then, subsequent runs will capture \u201ccheckpoint\u201d snapshots and use Visual AI<\/a> to detect any changes. You don\u2019t need to write any new test code \u2013 tests become a side effect of creating new components and stories!<\/p>\n\n\n\n

    In this sense, visual component testing with Applitools is like autonomous testing<\/a>. Test generation and execution is completely automated, and humans review the results. Since testing can be done autonomously, component testing is easy to add to an existing testing strategy. It mitigates lots of risk for low effort. Since it covers components very well, it can also reduce the number of tests at other layers. Remember, the goal of a testing strategy is not to cover all the things but rather to use available resources to mitigate as much risk as possible. Covering a whole component library with an autonomous test run frees up folks to focus on other areas.<\/p>\n\n\n\n

    Adding Applitools Eyes to Your Web App<\/h2>\n\n\n\n

    Let\u2019s walk through how to set up visual component tests for a Storybook library. You can follow the steps below to add visual component tests to any web app that has a Storybook library. Give it a try on one of your own apps, or use my example React app<\/a> that I\u2019ll use as an example below. You\u2019ll also need Node.js<\/a> installed as a prerequisite.<\/p>\n\n\n\n

    To get started, you\u2019ll need an Applitools account to run visual tests. If you don\u2019t already have an Applitools account, you can register for free<\/a> using your email or GitHub account. That will let you run visual tests with basic features.<\/p>\n\n\n\n

    Once you get your account, store your API key as an environment variable. On macOS or Linux, use this command:<\/p>\n\n\n\n

    export APPLITOOLS_API_KEY=<your-api-key><\/code><\/pre>\n\n\n\n
    On Windows:<\/p>\n\n\n\n
    set APPLITOOLS_API_KEY=<your-api-key><\/code><\/pre>\n\n\n\n
    Next, you need to add the eyes-storybook<\/a> package to your project. To install this package into a new project, run:<\/p>\n\n\n\n
    npm install --save-dev @applitools\/eyes-storybook<\/code><\/pre>\n\n\n\n
    Finally, you\u2019ll need to add a little configuration for the visual tests. Add a file named applitools.config.js<\/code> to the project\u2019s root directory, and add the following contents:<\/p>\n\n\n\n
    module.exports = {\n    concurrency: 1,\n    batchName: \"Visually Testing Storybook Components\"\n}\n<\/code><\/pre>\n\n\n\n
    The concurrency<\/code> setting defines how many visual snapshot comparisons the Applitools Ultrafast Test Cloud will perform in parallel. (With a free account, you are limited to 1.) The batchName<\/code> setting defines a name for the batch of tests that will appear in the Applitools dashboard. You can learn about these settings and more under Advanced Configuration<\/a> in the docs.<\/p>\n\n\n\n
    That\u2019s it! Now, we\u2019re ready to run some tests. Launch them with this command:<\/p>\n\n\n\n
    npx eyes-storybook<\/code><\/pre>\n\n\n\n
    Note:<\/em> If your components use static assets like image files, then you will need to append the -s<\/code> option with the path to the directory for static files. In my example React app, this would be -s public<\/code>.<\/p><\/blockquote>\n\n\n\n
    The command line will print progress as it tests each story. Once testing is done, you can see all the results in the Applitools dashboard:<\/p>\n\n\n\n
    \"\"
    Results for visual component tests establishing baseline snapshots.<\/em><\/figcaption><\/figure>\n\n\n\n
    Run the tests a second time for checkpoint comparisons:<\/p>\n\n\n\n
    \"\"
    Results for visual component tests comparing checkpoints to baselines.<\/em><\/figcaption><\/figure>\n\n\n\n
    If you change any of your components, then tests should identify the changes and report them as \u201cUnresolved.\u201d You can then visually compare differences side-by-side in the Applitools dashboard. Applitools Eyes will highlight the differences for you. Below is the result when I changed a button\u2019s color in my React app:<\/p>\n\n\n\n
    \"\"
    Comparing visual differences between two buttons after changing the color.<\/figcaption><\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    You can give the changes a thumbs-up if they are \u201cright\u201d or a thumbs-down if they are due to a regression. Applitools makes it easy to pinpoint changes. It also provides auto-maintenance features to minimize the number of times you need to accept or reject changes.<\/p>\n\n\n\n
    Adding Cross-Browser Tests for All Components<\/h2>\n\n\n\n
    When Applitools performs visual testing, it captures snapshots from tests running on your local machine, but it does everything else in the Ultrafast Test Cloud<\/a>. It rerenders those snapshots \u2013 which contain everything on the page \u2013 against different browser configurations and uses Visual AI to detect any changes relative to baselines.<\/p>\n\n\n\n
    If no browsers are specified for Storybook components, Applitools will run visual component tests against Google Chrome running on Linux. However, you can explicitly tell Applitools to run your tests against any<\/em> browser or mobile device.<\/p>\n\n\n\n
    You might not think you need to do cross-browser testing for components at first. They\u2019re just small \u201cUI units,\u201d right? Well, however big or small, different browsers render components differently. For example, a button may have rectangular edges instead of round ones. Bigger components are more susceptible to cross-browser inconsistencies. Think about a navbar with responsive rendering based on viewport size. Cross-browser testing is just as applicable for components as it is for full pages.<\/p>\n\n\n\n
    Configuring cross-browser testing for Storybook components is easy. All you need to do is add a list of browser configs to your applitools.config.js<\/code> file like this:<\/p>\n\n\n\n
    module.exports = {\n  concurrency: 1,\n  batchName: \"Visually Testing Storybook Components\",\n  browser: [\n    \/\/ Desktop\n    {width: 800, height: 600, name: 'chrome'},\n    {width: 700, height: 500, name: 'firefox'},\n    {width: 1600, height: 1200, name: 'ie11'},\n    {width: 1024, height: 768, name: 'edgechromium'},\n    {width: 800, height: 600, name: 'safari'},\n    \/\/ Mobile\n    {deviceName: 'iPhone X', screenOrientation: 'portrait'},\n    {deviceName: 'Pixel 2', screenOrientation: 'portrait'},\n    {deviceName: 'Galaxy S5', screenOrientation: 'portrait'},\n    {deviceName: 'Nexus 10', screenOrientation: 'portrait'},\n    {deviceName: 'iPad Pro', screenOrientation: 'landscape'},\n  ]\n}\n<\/code><\/pre>\n\n\n\n
    This declaration includes ten unique browser configurations: five desktop browsers with different viewport sizes, and five mobile devices with both portrait and landscape orientations. Every story will run against every specified browser. If you run the test suite again, there will be ten times as many results!<\/p>\n\n\n\n
    \"\"
    Results from running visual component tests across multiple browsers.<\/figcaption><\/figure>\n\n\n\n
    As shown above, my batch included 90 unique test instances. Even though that\u2019s a high number of tests, Applitools Ultrafast Test Cloud ran them in only 32 seconds! That really is ultrafast for UI tests.<\/p>\n\n\n\n
    Running Visual Component Tests Autonomously<\/h2>\n\n\n\n
    Applitools Eyes makes it easy to run visual component tests, but to become truly autonomous, these tests should be triggered automatically as part of regular development workflows. Any time someone makes a change to these components, tests should run, and the team should receive feedback.<\/p>\n\n\n\n
    We can configure Continuous Integration (CI) tools like Jenkins, CircleCI, and others for this purpose. Personally, I like to use GitHub Actions<\/a> because they work right within your GitHub repository. Here\u2019s a GitHub Action I created to run visual component tests against my example app every time a change is pushed or a pull request is opened for the main<\/code> branch:<\/p>\n\n\n\n
    name: Run Visual Component Tests\n\non:\n  push:\n  pull_request:\n    branches:\n      - main\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout\n        uses: actions\/checkout@v2\n      \n      - name: Set up Node.js\n        uses: actions\/setup-node@v2\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Run visual component tests\n        run: npx eyes-storybook -s public\n        env:\n          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}\n<\/code><\/pre>\n\n\n\n
    The only extra configuration needed was to add my Applitools API key as a repository secret<\/a>. <\/p>\n\n\n\n
    Maximizing Your Testing Value<\/h2>\n\n\n\n
    Components are just one layer of complex modern web apps. A robust testing strategy should include adequate testing at all levels. Thankfully, visual testing with Applitools can take care of the component layer with minimal effort. Unit tests can cover how the code works, such as a component\u2019s play<\/code> method. Integration tests can cover API requests, and end-to-end tests can cover user-centric behaviors. Tests at all these levels together provide great protection for your app. Don\u2019t neglect any one of them!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.<\/p>\n","protected":false},"author":89,"featured_media":36077,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[16691,10027,10050,10268,12690,16702,12686],"acf":[],"yoast_head":"\nTesting Storybook Components in Any Browser \u2013 Without Writing Any New Tests! - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.\" \/>\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\/storybook-components-cross-browser-testing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!\" \/>\n<meta property=\"og:description\" content=\"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-31T20:28:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Knight\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Knight\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\"},\"author\":{\"name\":\"Andrew Knight\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\"},\"headline\":\"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!\",\"datePublished\":\"2022-03-31T20:28:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\"},\"wordCount\":1640,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg\",\"keywords\":[\"automated testing\",\"Automated Visual Testing\",\"Cross-browser Testing\",\"StoryBook\",\"Test Engineers\",\"Ultrafast Test Cloud\",\"Visual Testing Strategies\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\",\"name\":\"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests! - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg\",\"datePublished\":\"2022-03-31T20:28:00+00:00\",\"description\":\"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Topics\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!\"}]},{\"@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\/a8038d2c9ccd3531090422b6172b125b\",\"name\":\"Andrew Knight\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"caption\":\"Andrew Knight\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests! - AI-Powered End-to-End Testing | Applitools","description":"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.","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\/storybook-components-cross-browser-testing\/","og_locale":"en_US","og_type":"article","og_title":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!","og_description":"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2022-03-31T20:28:00+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg","type":"image\/jpeg"}],"author":"Andrew Knight","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andrew Knight","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/"},"author":{"name":"Andrew Knight","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b"},"headline":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!","datePublished":"2022-03-31T20:28:00+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/"},"wordCount":1640,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg","keywords":["automated testing","Automated Visual Testing","Cross-browser Testing","StoryBook","Test Engineers","Ultrafast Test Cloud","Visual Testing Strategies"],"articleSection":["Advanced Topics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/","name":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests! - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg","datePublished":"2022-03-31T20:28:00+00:00","description":"Learn how to automatically do ultrafast cross-browser testing for Storybook components without needing to write any new test automation code.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Testing-Storybook-Components-in-Any-Browser_831x542.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/storybook-components-cross-browser-testing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Advanced Topics","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/"},{"@type":"ListItem","position":3,"name":"Testing Storybook Components in Any Browser \u2013 Without Writing Any New Tests!"}]},{"@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\/a8038d2c9ccd3531090422b6172b125b","name":"Andrew Knight","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","caption":"Andrew Knight"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/36060"}],"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\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=36060"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/36060\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/36077"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=36060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=36060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=36060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}