How To Perform Storybook Visual Testing

What is a Storybook?

Storybook is an open-source tool that lets you build, organize, and test user interface (UI) components in isolation. It is commonly used in web development, especially for building and testing components in JavaScript and related frameworks like React. Storybook allows testers to visualize, test, and debug the different states of UI components independently from the rest of the application.

In Storybook, each webpage is considered a story. A story represents the state of web elements in different environments. In a Storybook project, the first execution is always stored as-is, and the images from it are considered the base images or baseline. In this case, no screenshots or images are compared, and all are marked as approved. In subsequent runs after this one, you can see passed/failed stories based on the mismatch percentage, as screenshots are compared to this baseline.

The Storybook community is thriving with an impressive milestone. The Storybook Monorepo has surpassed 81,200 GitHub Stars, solidifying its position as one of the most popular repositories ever.

What is a Story?

In Storybook, each webpage is considered a story. A story represents the state of web elements in different environments. It captures the rendered state of a UI component.

What is a component?

Each piece of UI in Storybook is an independent component. With components, we don’t need to load the entire application to test a specific UI. We can render the component in isolation and test it before moving on to the rest of the application.

How does a Storybook compare different components and stories?

In a Storybook project, the first execution is always stored as-is, and the images from it are considered the base images or baseline.

In this case, no screenshots or images are compared, and all are marked as approved.

In subsequent runs after this one, you can see passed/failed stories based on the mismatch percentage, as screenshots are compared to this baseline.

Demonstration: How to perform Storybook Visual Testing?

Having understood and learned the basics about visual testing and Storybook, it is time to move to the demonstration. This section will show how Storybook visual testing can be performed for your application.

As mentioned previously, to perform Storybook visual testing, we will use SmartUI, a tool provided by the cloud-based TestMu AI platform.

TestMu AI is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale with over 3000+ real devices, browsers, and OS combinations.

SmartUI is a TestMu AI tool that combines the robustness of cloud-based platforms with the accuracy of visual testing. It helps automate identifying and tracking visual changes in the user interface (UI) over time, which helps release more consistent applications. SmartUI uses cloud benefits to provide precision, collaboration, and scalability. Using TestMu AI enables you to test your application on a combination of 3000+ OS and browser versions, ideally serving the aim of Storybook visual testing for the visual elements.

Subscribe to the TestMu AI YouTube Channel and stay updated with detailed tutorials on Visual Regression Testing, including Visual Regression Testing with Selenium and Visual Regression Testing with Playwright.

To perform successful visual regression tests, start with SmartUI using Storybook on TestMu AI.

Let’s start with setting up Storybook visual testing on TestMu AI SmartUI.

Pre-requisites

Install Storybook

Install Storybook using the below command. You can check more details on installation on its official website.

npx storybook@latest init

Make sure you install a version higher than 6.4.0 for best results. Refer to Storybook recent releases for more information on Storybook release versions.

Install Node.js

Install Node.js on your system by downloading the installer from the official website. For compatibility reasons, ensure the installed version is higher than 14.15.0. If you need more details on the previous versions, you can check here.

TestMu AI SmartUI credentials

Create your account on the TestMu AI platform to access SmartUI and perform Storybook visual testing.

SmartUI Project Setup on TestMu AI

After completing the prerequisite setup, the first step is to create a SmartUI Project on TestMu AI. In this project, we will combine all your executed builds for our Storybook visual test cases.

Step 1. Login to your TestMu AI account and select Smart UI.

Step 2. Click on the New Project button to create your SmartUI Storybook project.

Step 3. For Storybook tests, select the platform as Web. Add project name, approvers for the changes, and tags for filters or easy navigation.

Step 4. Click on Submit to create your first project. You can see no build and the token is available inside the project.

This token will be used in the next steps to link the project execution results on SmartUI.

Storybook Code Setup and Execution: Creating Baseline

For this blog demonstration on performing Storybook visual testing, we will reference the code from the GitHub repo below. This is a sample project to execute your first Storybook SmartUI project for visual testing.

Step 1. Clone the project from this GitHub repo.

git clone https://github.com/LambdaTest/smartui-storybook-sample.git

Step 2. Install the required NPM dependencies for TestMu AI Smart UI Storybook visual test execution.

npm install @lambdatest/smartui-storybook -g

Step 3. Verify that the .storybook directory is added to your main.js project. It should contain the following code. If not, add the same to it.

module.exports = {
   features: {
     buildStoriesJson: true,
   },
 };

Step 4. Install the Storybook node module inside your project using npm.

npm install

Once this is done, you should see @storybook under your < current-dir >/node_modules folder like below.

Step 5. Configure the SmartUI project token for the demo project that we created initially.

export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

Step 6. As mentioned, TestMu AI SmartUI provides configurations to execute visual tests on several available browser + OS combinations. These configurations are defined inside smartui.json.

Execute the following command to generate this configuration JSON.

smartui config create .smartui.json

Once the smartui.json file is created, you can see the default configurations in the same.

{
 "storybook": {
   "browsers": [
     "chrome",
     "firefox",
     "safari",
     "edge",
     // Add more browser configuration here
   ],
   "viewports": [
     [1920, 1080]        // Add more view ports to capture here
   ],
   "waitForTimeout": 0, // (Optional) Add wait time for the page to load
   "include": [],       // (Optional) Only compare limited stories
   "exclude": []        // (Optional) Don't compare the stories
 }
}

The configurations can be modified as per your requirements by changing the key-values on this JSON.

Step 7. Build your Storybook application, in this case, the repo code, as a static web application. Storybook will create a static web application capable of being served by any web server for your code, which can be previewed locally on any system by sharing the application code.

npm run build-storybook

Executing this command should create an output directory /storybook-static/ from which the code will be built for execution on SmartUI.

Step 8. Finally, we execute the Storybook visual tests on the SmartUI cloud using the storybook static build created in previous steps.

smartui storybook ./storybook-static --config .smartui.json

This command would trigger the run to create a Baseline, as this is the first execution. All stories would be approved automatically for this execution.

You can view the created baseline for Storybook visual tests on SmartUI by navigating to your project on the TestMu AI Dashboard. This build will be created on the master branch.

With this, we have created a baseline for the stories to be executed further to perform Storybook visual tests. Let’s move forward to change any story, re-execute the run, and see results.

Storybook SmartUI Execution: Committed Code Changes

In this section, we see how SmartUI triggers the storybook visual test on changes committed to the existing code.

Step 1. Open src/stories/Page.stories.jsx story file and make some changes to it. For this demonstration, I have updated the value from Log in to Log out.

Step 2. Add the file with changes to GitHub. SmartUI uses the GitHub commitid for the comparison.

git add src/stories/Page.stories.jsx

Step 3. Commit the changes with a proper commit message. This message will be visible on the TestMu AI SmartUI project to identify the execution of a particular commit.

git commit -m "Demo blog changes in Page.stories.mdx"

Step 4. Execute the Storybook visual tests on the SmartUI cloud again as previously done. This time, it will give the comparison results and highlight failures if any mismatches occur.

You can see the output results on the CLI below.

Execution results on the SmartUI dashboard can be viewed for the particular commit.

With this, we have learned how Storybook visual testing works with TestMu AI SmartUI. So, use this powerful integration of tools and platforms to build a robust visual testing architecture for your static web applications.