How to Perform Storybook Visual Testing?

Visual testing is an important aspect of user interface testing. It ensures that UI elements like fonts, colors, and size contrasts appear as intended and helps place visual bug that may affect user experience and availableness.

This guide explores Storybook visual testing, its benefits, and how to perform it step by step.

What is Storybook Visual Testing?

Storybook validates the appearing of the UI components in isolation to ensure that they maintain their intended design and functionality. It takes snapshots of ingredient and compares them to baseline images, permit teams to detect still minor visual regressions.

This testing process helps developers ensure that their UI components render aright and maintain optic consistency across different browsers and device.

It help to get unintended design modification early, foreclose issues from attain product and streamlining the.

How execute Storybook Visual Testing Work?

To understand the operation of Storybook ocular testing, it & # 8217; s important to separate down the key steps imply in it.

• Component Isolation: Storybook allows developers to establish and test UI components in an isolated environment, insure they interpret aright without external dependence.
• Snapshot Comparison: Ocular examination puppet like Percy seizure icon of components and compare them to antecedently sanction variant to detect regression.
• : Integrated into, Storybook optic testing ensures consistent UI across different browsers and devices before deployment.

How to Perform Storybook Visual Testing with Percy?

Pre-Requisite

• React App with Storybook Integration
• Let ’ s use the sample React To-Do application created from the Github codebase.
• Let ’ s see how to integrate Storybook with Percy to run Optic Tests

Step 1:Install required node packages

Install required Percy Node Packages employ the bid below.

npm install -- save-dev @ percy/cli @ percy/storybook

Step 2:Get the PERCY_TOKEN

• Login to Percy (If you don ’ t have an history, create one by)
• Create a New Project
• Navigate to Project Settings
• Copy the PERCY_TOKEN

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

Step 3:Set the PERCY_TOKEN environment variable

Based on the command-line tool you are using you can set the environment variable as below

# Unix $ export PERCY_TOKEN= '' & lt; your-project-token & gt; '' # Windows $ set PERCY_TOKEN= '' & lt; your-project-token & gt; '' # Powershell $ $ Env: PERCY_TOKEN= '' & lt; your-project-token & gt; ''

Step 4:Execute the PERCY test

To execute Percy tryout use the below command

npx percy storybook: start

Alternatively, if you feature already configured the package.json test dictation you can use the command

npm run test

Step 5:View the Results

Wait until the executing completes and you will see the results with the build URL then you can easily sail to the URL and see the visual differences.

If there is a difference then it will show the difference in Percy Dashboard.

If there is no difference you can see the message & # 8220; No Changes & # 8221;

Percy Storybook also cater an option to take additional snapshot, using additionalsnapshots options. additonalSnapshot alternative helps to take a snapshot of diverse states of your portion.

For instance, you receive * * * .stories.js file like below.

import React, {useState, useRef} from 'react '; signification TodoApp from './TodoApp '; exportation default {title: 'TodoApp ', portion: TodoApp,}; export const App = args = & gt; & lt; TodoApp {... args} / & gt;; // match component name for single tale hoisting App.storyName = 'TodoApp '; App.args = {showTodos: 'all ', todos: [{title: 'Foo ', completed: true}, {rubric: 'Bar ', completed: true}, {title: 'Baz '}, {title: 'Qux '}, {title: 'Xyzzy '}]};

Now, if you won & # 8217; t take the additional snapshots for the different province you can add the App.parameters sections like below.

App.parameters = {// take additional snapshots of various states percy: {additionalSnapshots: [{postfix: ' - Active ', args: {showTodos: 'active '}}, {suffix: ' - Completed ', args: {showTodos: 'completed '}}, {suffix: ' - None ', args: {todos: []}}]}};

In the above code we experience append additional snapshots option to capture various states of the component. Once you accomplish the Percy test, then the screenshot will be captured, and the screenshot name will be suffixed with the value given in the suffix parameter as above (EX: Active, None etc).

Talk to an Expert

Benefits of Storybook Visual Testing

Here are some of the key benefits of Storybook visual testing:

• Early Detection of: Visual testing helps catch unintended design changes before they make it to production.
• Improved UI Consistency: This characteristic ensures that UI constituent look the same across multiple browsers and device, helping users get a coherent look across different platforms.
• Faster Development and: Automating ocular tests reduces manual chit, speeding up the development process. It also check that the UI remains stable throughout the ontogenesis procedure, allow the team to focus on creating new features.
• Collaboration Between Teams: Storybook optic examination bridges the gap between developers, designers, and QA. Visual snapshots allow all team appendage to easily review and approve UI changes, streamlining the communication and decision-making process.
• Seamless Integration with: Visual testing integrates easy with CI/CD pipelines, making it easy to catch regressions with every code push. This helps ensure that UI issues are detected and addressed continuously, not just at the end of the ontogeny rhythm.
• Enhanced : Storybook visual testing, paired with creature like Percy, ensure that component look and function as intended across various browsers and devices. This assure a flawless user experience for all exploiter, disregardless of their choice of browser or device.
• Reduced Effort: Storybook visual testing reduces manual visual check requirements with automated snapshot comparability. This race up the entire examination process and minimizes the risk of human error.
• Easier Debugging and Tracking of Changes: With optical snapshots stored over clip, it & # 8217; s easier to trace the history of changes. This get it unproblematic to identify when and where a fixation pass, rush up the debugging process and improving codification quality.

Why Use BrowserStack Percy

When it comes to optic testing for Storybook, by BrowserStack stand out as a purpose-built solution that transforms how teams catch UI bugs before they reach product.

is an AI-powered optical testing program that automates visual regression testing for web applications, seamlessly desegregate into CI/CD pipelines to detect meaningful layout shifts, styling issues, and content changes while significantly reducing false positives.

Key advantages of use Percy for Storybook optical testing:

• Effortless Integration: Percy integrates with Storybook with a individual line of code, enabling true shift-left examination by catch visual issues at the component level before they & # 8217; re tack into full pages.
• AI-Powered Accuracy: The uses supercharge algorithms to automatically cut visual interference from dynamical standard, vivification, and anti-aliasing, focusing only on meaningful change that affect user experience. Features like & # 8220; Intelli ignore & # 8221; and OCR secernate important ocular transformation from minor pixel-level differences, greatly reducing mistaken positive alarm.
• Accelerated Reviews: The highlights impactful change with bounding boxes and human-readable summaries, accelerating review workflow by up to 3x.
• Comprehensive Coverage: Percy endorse monitoring across 3500+ browser and devices, with pliable scheduling option and the ability to compare any environment, critical for ensuring your Storybook components provide correctly everyplace.
• Scalable Testing: With support for all major frameworks and CI puppet, Percy offers SDKs for quick onboarding and frictionless scalability as your component library grows.

Percy offers a free plan with up to 5,000 screenshots per month for getting started, with paid plans starting at $ 199 for advanced features and usage go-ahead pricing available.

Best Practices for Storybook Visual Testing with Percy

Implementing Storybook visual testing with Percy ensures UI consistency and helps detect regressions early. Following best practices can enhance the efficiency and reliability of optic tests, improving the overall development process.

• Use One File Per Component: Organizing each element in a freestanding file get the codebase leisurely to maintain and navigate. This structure help to deal test cases efficiently and ensures that each component is tested in isolation, trim complexity.
• Integrate Visual Testing at an Early Stage: Consider optical examination at an former stage of the growing process. Visual testing is often an afterthought when developing the UI application; having the integrate with the storybook at an early stage makes the application more stable.
• Make Visual Testing Mandatory: Enforcing optic testing as a needed step in the ontogeny workflow help preclude costly UI issues later. Running Percy visual tests at the component grade allows teams to catch early, reducing rework and ensure a smoother development round.
• Automate Visual Testing in CI/CD Pipelines: Integrating Percy into pipelines allows automate optical regression prove with every commit. This practice helps place unintended UI changes early, preventing them from being merged into production.
• Schedule Regular Visual Test Builds: Just like, optical test should be regard an crucial part of a uninterrupted prove scheme. Running scheduled Percy builds aid find unexpected UI changes caused by update to dependence, browser variations, or other external element.
• Review and Approve Visual Changes Proactively: Percy provides a splasher for survey visual changes in the plan. Teams should actively monitor test answer, approve designed updates, and inquire unexpected differences to maintain UI body.
• Optimize Storybook Stories for Testing: Ensure that Storybook stories represent real-world use cases and cover different component states. Testing edge cases and interactive elements prevents regressions in dynamic UI components.

Conclusion

Storybook optical testing is essential for maintaining UI consistency and notice regressions betimes in the maturation process. By desegregate tools like Percy, teams can automate optic testing, streamline collaboration, and ensure components render correctly across browsers and devices.

Implementing Storybook visual testing enhances development efficiency and contributes to delivering a stable and visually polish user experience.

Useful Resources for Storybook

Related Guides