How to test UI components?

Designing a good exploiter interface is a key to the success of any application. Consider any web application which is dominating the software world, they feature a rich and user-friendly interface. Whether it is the dashboard, graphs, complicated statistical data, or simple application, user design is study to be one of the important parts of any software production.

This article will assist in learning why UI component testing thing, the methods available, and better practices to see authentic user experience.

What is the User Interface?

The User Interface or UI is the point of man and computer interaction in a gimmick or application. In simple terms, when you navigate to a specific URL, what you see is the User Interface. With User Interface, one can perform a set of actions such as look text, filtering the data, chatter on buttons, taking a picture, view the data, etc.

What is UI Component?

When you build the wall for your firm, you want to stage the blocks and make a wall. Similar way, the UI components are blocks of the User Interface. The components are often telephone sections or elements. The UI components are integrated to build the User Interface for any application.

Nowadays, the UI components are typically rendered from libraries; the UI library provide a ready-made set of UI element and no motive to design from scratch. Some representative of UI libraries are angular material, Webix, Material UI, and VMware Clarity. Standard UI components experience minimum features such as accessibility, responsiveness, easiness of use, rich look, etc.

What is UI Component Testing?

UI Component Testing is the technique of try a subset of UI elements. As discourse earlier, the UI component together builds the complete user interface. Modern rapid package development expects that quiz and development should be execute in a little cycle. When you build the UI component, and if you have to await for the UI components to incorporate and test, testing will be delayed. The modern application fabric and tool allow the UI components to be test in isolation. The UI Component testing helps to identify the bug at an early stage of ontogeny and deliver a quality product.

Why is UI Component Testing Important?

takes care of functionality and workflow examination, but that doesn & # 8217; t give a guarantee on the User Interface or optical aspect of the product, so is crucial. The modern application architecture follows a component-driven User Interface design, where the User Interface is built as an individual component firstly, then incorporate to create a consummate UI. The UI ingredient testing has a lot of benefit:

1. Former testing:Bugs exposed at the posterior stage of development are costlier to fix, the UI Component examine helps uncover the UI bugs at an early stage of maturation.
2. Validates the visual aspect of the product:The UI Component testing ensures that the visual aspect of the product such as typeface, styles, and bounds are correct and as expected.
3. Protects from inadvertent changes:The ingredient quiz helps to protect from any accidental changes such as regressions etc.
4. Faster evolution:Component-level examination facilitate in faster growing, one need have to wait until components are integrated fully. The mod tool allows testing the UI element in an isolation.
5. Ensures cross-browser compatibility:The most common scenario while testing the UI is the way the browser renders the web element. Sometimes UI might seem different on different browsers if the cross browser logic is not applied efficiently. The individual portion can be tested expend a visual testing tool such as, which helps to control the cross-browser compatibility of UI components.

The best and easier way to test the UI component is using the technique, The Visual Testing tool verifies the UI components visually and provides the result. It works by compare the two screenshots, one is the base screenshot and another is the real one. If the genuine screenshot has a difference in equivalence with the base screenshot then something is wrong and so the test is tag as failed, if there is none so you are full.

The component-level Visual Testing can be done using multiple tools such as Cypress with Percy, etc.

This clause uses React fabric, tool, and Percy to execute UI component testing.

The Cypress tool helps to render the UI components and do a set of action on the UI component. On the other hand, the Percy creature guide a screenshot at the expected point and compare it against the groundwork screenshot.

How to Test UI Components utilize Percy and Cypress?

Prerequisites:

Install NodeJS

• Download the NodeJS version
• Click on downloaded installer
• Follow the on-screen instructions

Setup ReactDevelopment Framework

• Ensure that you get the ontogenesis framework setup ready. This clause excuse the testing part of the UI component.

Step 1: Install Cypress

Install Cypress node packages to your project

npm install cypress -D

The above dictation installs the Cypress automation framework packages and their dependencies.

Step 2: Setup Cypress

The Cypress is a framework-ready covering, the Cypress open command sets up all the required folder structures for your task.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

npx cypress exposed

After execution of the above dictation, the Cypress window opens up. Based on your scheme configuration, the open command can occupy some clip.

Step 3: Set up component testing

The Cypress indorse both end-to-end and component examination. In our case, you require to set up component testing.

• Exposed Cypress window using the above bid.
• Choose the component test pick.
• Use the on-screen instruction and generate default cypress folders/files

Step 4: Install Percy for Cypress

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

The above command installs two different packages, namely@ percy/cli and @ percy/cypress. Percy is required for visual validation of screenshots.

Step 5: Configure the cypress/support folder for Percy

Navigate to cypress/support/component.js file and add the import statement.

import ' @ percy/cypress ';

Step 6: Add a new react component

For the purpose of this example, we will be creating a canonical react component here, In your case, you might already have components you can use the like.

//DemoComponent.jsx import {useState} from 'react' import {Button, Alert} from 'react-bootstrap '; import './App.css' import 'bootstrap/dist/css/bootstrap.min.css '; export nonpayment function DemoComponent () {//style= {{background: `` red ''}} return (& lt; div & gt; & lt; div & gt; & lt; Button variant= '' primary '' size= '' lg '' & gt; Demo Component Button & lt; /Button & gt; & lt; p & gt; & lt; /p & gt; & lt; /div & gt; & lt; div & gt; & lt; Alert key= '' info '' variant= '' information '' & gt; This is a test Alert! & lt; /Alert & gt; & lt; /div & gt; & lt; /div & gt;)}

The above example when rendered, looks as shown in the below image.

Step 7: Write component exam using Percy Cypress

Using all the above steps, you receive configured Cypress, instal Percy, and created a demo part which means, the setup is complete. Now you need to write the component tests.

Navigate tocypress/componentfolder andcreate a component-test.cy.jsx file.

Create a bare trial as remark below.

import {mount} from 'cypress/react' import DemoComponent from ' .. / .. /src/DemoComponent' const demoButton = ' [data-testid=demoButton] ' describe ('Demo Component Testing Percy ', () = & gt; {it ('Visual Testing Cypress Percy ', () = & gt; {mount (& lt; DemoComponent / & gt;) cy.percySnapshot ('percy-component-test ')})})

In the above component test,

1. meaning DemoComponent from & # 8216; .. / .. /src/DemoComponent& # 8216;: This is the significance statement, we are importing the Demo Component file.
2. mount (& lt; DemoComponent / & gt;): The mount map render the part during the execution of your Cypress scripts inside the cypress sandboxed iFrame.
3. cy.percySnapshot (& # 8216; percy-component-test & # 8217;): The Percy command to take a screenshot.

Step 8: Get the PERCY_TOKEN

The PERCY_TOKEN uniquely identifies your labor on Percy & # 8217; s infrastructure. Before executing your tests you demand to get the PERCY_TOKEN.

Steps to get the PERCY_TOKEN

• Login to

(Note If you don ’ t get a Percy account, you can create one. Alternatively, if you experience a report 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 like.)
• Navigate toProject Settings in Percy
• Copy the PERCY_TOKEN

Step 9: Set up the PERCY_TOKEN environment variable

As mentioned above, the PERCY_TOKEN uniquely identifies your project on Percy & # 8217; s infrastructure when you execute your tests the Percy CLI looks for the PERCY_TOKEN environment variable, so you demand to set the PERCY_TOKEN environment variable.

The Setting up token bid differs for each bid line puppet; based on the bid line tool you are apply, you can choose the below one and execute the same.

• Set up a PERCY_TOKEN environment variable in Powershell

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

• Set up a PERCY_TOKEN environment variable in the window require line

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

• Set up a PERCY_TOKEN environment variable in Linux/Mac-based Terminal

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

Step 10: Execute Percy Cypress constituent tests

The Percy performance command differs from typical Cypress execution command. Using the below command, you can accomplish your Percy Cypress component tests.

npx percy exec -- cypress run –component

Step 11: View the Result

Once the trial executing is complete, the bid line output shows the result with Percy & # 8217; s build URL. Using Percy & # 8217; s progress URL you can navigate to Percy & # 8217; s build dashboard and view the differences.

If there is no departure, found, so the result will be testify as & # 8220;No Changes”

Percy clearly shows the conflict if there are any.

How to Perform Visual validation of Single HTML ingredient utilize Cypress Percy

Percy added a new feature that helps to take a screenshot of a single HTML element. Percy provides an alternative argument name a background that can be used to occupy a screenshot of the particular element.

You might have a testing scenario where you want to visually formalize a single DOM element for example: a button, textbox, particular div tag, etc. The latest version of Percy allows this.

Consider the above code, we have the button with the below HTML tag

HTML Code

& lt; div & gt; & lt; Button variant= '' chief '' size= '' lg '' & gt; Demo Component Button & lt; /Button & gt; & lt; /div & gt;

In the above code, we have Demo Component Button, which has data-testid, If you require to take a screenshot of this button you can modify the test as shown below.

//visual-component-test.cy.jsx import {climb} from 'cypress/react' signification DemoComponent from ' .. / .. /src/DemoComponent' describe ('Demo Component Testing Percy ', () = & gt; {it ('Visual Testing Cypress Percy ', () = & gt; {mount (& lt; DemoComponent / & gt;) // cy.percySnapshot ('percy-component-test '); cy.percySnapshot ('percy-single-element-visual-test ', {scope: 'div [data-testid= '' demoButton ''] '});})})

In the above code, we have bestow

cy.percySnapshot ('percy-single-element-visual-test ', {scope: 'div [data-testid= '' demoButton ''] '});

The scope option is a fresh introduced feature, which facilitate to take a single HTML element screenshot. The range is like a key, and you need to pass the CSS selector as a value. Since in our case the CSS selector isdiv [data-testid= & # 8221; demoButton & # 8221;].

Component Testing Best Practices

• Test Every Component:Ensure that the live and new factor has component-level exam.
• Mandate component testing:Add component testing as a compulsory checklist, this assist to reduce the bugs.
• Schedule component tests:Just like any other tests, component examination can be scheduled in the pipeline or use SaaS tools such as Percy, which helps to name any exposed bugs.
• Add optic essay for UI components:Ocular Testing makes the process more effective and easy. Adding ocular tests to components do UI more bug-free and helps to deliver caliber codification.

The modern package development architecture advocate a component-based development framework. The component framework helps to build the UI portion by part, and it is easy to scale up or add any additional characteristic in the future. Similarly, the UI factor are leisurely to split into, and multiple developers can act together parallelly, which accelerates the growing process. Though hard-and-fast is perform every stride, catching the visual aspect of the element is not easy. The visual regression tests for the component help to catch any visual bug such as font, styles, etc., and improve the product quality.

Related Guides