How to Perform Visual Regression Testing of UI Components in Storybook

User Interface of the web coating helps users form the first impression of your web application. It is one of the major success component that can lead to best. The modern web covering architecture postdate a component-based user interface to ensure that each of the components is well-designed and good try.

The component-based architecture not only helps develop the application faster but too helps to ship the product in a shorter software development life rhythm. It has many advantages such as faster development, ease of testing, and most significantly multiple developers can work on different parts (components) of the user interface simultaneously.

What is a Component in User Interface?

UI Component is a subdivision or elements of the user interface. These are integrated to build the User Interface for any application. User interface is divided into smaller chunks which are called components, and they are developed either parallelly or sequentially, which assist to render a set of characteristic in an reiterative access.

Typically, the user interface is built from library. Without UI libraries, one has to build the component from scratch, which is time-consuming. There are several expectation from the components such as,, ease to use, rich aesthetics, etc. Achieving these characteristics from kale want effort and cost. So most organizations choose pre-built UI model such as Angular material, Webix, Material UI, VMware Clarity, etc. for build UI element.

What is Component Testing of User Interface?

Testing the single or subset of UI sections/components is calledUI component examine. The modern such as the Agile poser expects code to be liberate in a shorter span. Hence, QAs can & # 8217; t wait until the complete user interface has been progress; hence, as soon as the component is developed the constituent needs to be tested and delivered. Then the component can be integrated to get the complete exploiter interface. This ideology helps in the faster delivery of high-quality applications.

Why is UI Component Testing Important?

There are several eccentric of examine such as an, API examination, and integrating prove but none of the above tests assures the quality of optical aspects of the application such as fashion, fonts, place, etc. To validate the UI constituent individually, you need UI component examine that helps to test the UI element element by ingredient rather than UI as a whole.

It is mainly useful in cases when adding new UI components, and hence they demand to be tested individually.

Advantages of UI ingredient testing

1. Test Early:Any bugs which are exposed at a later phase of development are costly. UI component testing assist discover the bugs at an early stage, which can save clip and cost.
2. Quality User Interface:UI Component testing validates that all the visual aspects of the product such as font, styles, and bound are correct and as expect. The glitch-free exploiter interface also insure a smoother user experience (UX).
3. No more accidental modification:Frequent execution of UI test suites help to protect from inadvertent changes, which are mutual when multiple developers are working on the same set of tasks.
4. Faster Delivery:Component-level examination helps in faster development thus resulting in faster bringing of the ware. A modern tool like a Storybook countenance testing the UI element in isolation.
5. Cross-browser UI compatibility:The most common scenario while testing the UI is the way different browser furnish the web element. Sometimes UI might be rendered differently from browser to browser if the developers have not cover cross-browser logic expeditiously. The item-by-item component can be tested using a such asPercy, which helps to control the of UI constituent.

What is Visual Regression Testing in UI Components?

is a testing technique, where two screenshots are compared, and the results are driven found on the comparison of screenshots. There will be two images: baseline and literal. The baseline image is like the expected image, and the actual persona is an image after changing or fixing any UI issues.

What is a Storybook?

Storybook provides an environment where one can develop, test, and debug the UI component in isolation. It support all modern UI frameworks such as React, Angular, Vue, etc. Storybook is a Javascript-based open source framework and is most widely used. is habituate to check UI components.

is a Visual Testing tool, which allows performing for UI part both manually and automatize. Percy can be integrated with the Storybook to get the most out of UI testing.

How to execute Visual Regression Testing for part in Storybook?

Percy is the most widely apply and most popular optic essay puppet; some of the best features of Percy are:

• Support for multiple,
• Dedicated dashboard for each build,
• Easy-to-execute tests, easy-to-schedule builds,
• Support for both manual and automation of visual testing.

Percy can be easily integrated with Storybook. This article uses React, Storybook, and Percy tools.

As a prerequisite, you need to integrate theintegrate Storybook with React Appto start with Visual Testing apply Percy.

Using the To-Do app cloned from thisGithubcode base in this guidebook as an example. However, you can use your application to configure Percy Visual Testing for React.

Step 1: Install Percy packages

Two Percy package you postulate to install are:

• @ percy/cliIt help to run Percy storybook on the command line,
• @ percy/storybookIt helps to integrate or use Percy commands in your storybook files.

Use the below bid to install these packet

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

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

Step 2: Copy the PERCY_TOKEN

PERCY_TOKENuniquely identifies your project on Percy & # 8217; s infrastructure. Before executing Percy-Storybook components, you need to copy thePERCY_TOKEN.

Steps to get thePERCY_TOKEN

(Note:If you don ’ t have a Percy history, you can create one. Alternatively, if you hold a BrowserStack account you can use the same credential to Percy Login.)

• Create a new Project (If you have Percy Project already created, you can choose to use the same.)
• Navigate to Project Settings in Percy
• Copy the PERCY_TOKEN

Step 3: Set up the PERCY_TOKEN environment variable

As mentioned above, thePERCY_TOKENunambiguously place your project on Percy & # 8217; s infrastructure, when you execute your tests the Percy CLI seem for thePERCY_TOKENenvironment variable so you require to set thePERCY_TOKENenvironment variable.

The Setting up nominal command differs from the command line tool. Use the below command to set up a PERCY_TOKEN environment variable in:

• Powershell

$ Env: PERCY_TOKEN= '' & lt; your-project-token & gt; ''

• Windows Command Line

set PERCY_TOKEN= '' & lt; your-project-token & gt; ''

• Linux/Mac-based Terminal

export PERCY_TOKEN= & lt; your-project-token & gt;

Step 4: Execute Percy Storybook Tests

Percy catch the screenshot of all your components once you fulfill the tryout. There are multiple shipway to execute your Storybook and Percy Visual Tests.

npx percy storybook: start

The above dictation starts the Storybook and lade the Storybook components and captures them. The captured screenshot will be uploaded to Percy & # 8217; s infrastructure.

Alternatively, you can configure the test dictation shortcut inpackage.jsonand use it by running the following command

npm run test

Once the executing is complete, the bidding line output will demonstrate Percy & # 8217; s build URL. You can navigate to the soma and formalize the test issue.

Alternatively, manually log in to Percy, go to Projects, and click on the latest habitus.

Percy & # 8217; s establish splasher shows the side-by-side differences if there are any.

If there are no differences, Percy bespeak that with the message & # 8220; No Changes & # 8221;

How to test the states of Component in Storybook

Assume that the To-Do app has multiple tasks; tasks can have states like active, completed, etc. you can test these states in thestorybook book with Percy integration.

Below is the story fileTodoApp.stories.js, for the to-do task component

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

The above file can be modified to integrate with Percy to take a screenshot of states. The Percy provides an selectionadditionalSnapshots, which facilitate to take a screenshot of various states of the component such as fighting, complete, etc.

The above storyfile can be modified to take screenshots of state, as seen below.

Talk to an Expert

//TodoApp.stories.js significance React, {useState, useRef} from 'react '; importee TodoApp from './TodoApp '; export nonpayment {title: 'TodoApp ', component: TodoApp,}; export const App = args = & gt; & lt; TodoApp {... args} / & gt;; // match part name for individual story hoisting App.storyName = 'TodoApp '; App.args = {showTodos: 'all ', todos: [{title: 'Foo ', completed: true}, {rubric: 'Bar ', completed: true}, {rubric: 'Baz '}, {rubric: 'Qux '}, {rubric: 'Xyzzy '}]}; App.parameters = {// occupy additional shot of assorted states percy: {additionalSnapshots: [{suffix: ' - Active ', args: {showTodos: 'active '}}, {suffix: ' - Completed ', args: {showTodos: 'completed '}}, {postfix: ' - None ', args: {todos: []}}]}};

In the above codification, the subdivisionApp.parametershave some of Percy & # 8217; s parameters likeadditionalSnapshots.

The suffix is used to name the image files in Percy & # 8217; s substructure, which helps to secern the image files.

UI Component Testing Best Practices

Here are some of the good practices to follow during UI Component Testing:

• Mandate Component Testing:There are different methods to test element, however, component testing should be part of a mandatory checklist while acquire any UI factor.
• Visual Testing of Components:Visual Testing is an effortless way to test any UI component. Visual Test helps trim the bugs in the later point of growth. It ensures that the UI components appear consistently.
• Component States Testing:Typically the components such as check-box, drop-downs, etc. can have one or more states. Always ensuring that the UI component tests cover all possible states is a best practice.

Conclusion

BrowserStack ’ s is a new generation creature for Visual Testing; it provides a lot of flexibility for the exploiter; since it is a SaaS application, you can see the Visual Results anywhere. This further bring the flexibility to review, accept and disapprove the builds from anywhere. Percy improves the review process and helps in faster development and testing of UI Components.

Related Guides