What are UI Identifiers?

To automate tests, we need to interact with the elements/objects on a web page. And to specify these elements in our tests, we need some unique details about them. 


For Example, if you want to automate a "first name" input box, you would need the details to uniquely identity to locate this input "first name" field on the web page and perform any actions on it. These details are created by Web Developers at the time of developing the page. These details could be id, name, class, XPath, or any other unique attribute.

In Testsigma, we call these element details UI Identifiers.

 

How to get UI Identiiers?

There are 3 different ways to create UI identifiers in Testsigma. In this tutorial, we will talk about the simple and recommended approach i.e. using the Testsigma Chrome extension.


The Testsigma Chrome extension enables you to easily capture the details of elements as you interact with your web application in the browser.

 

Why Testsigma’s Chrome Extension?

If you are new to Automation Testing tools or are someone who wants to save time by automatically capturing the CSS Selector and XPath locator details, we strongly recommend you to use the Testsigma Chrome extension for creating UI Identifiers. With this, we can capture/record the UI Identifier "First Name" details easily.


Testsigma uses the chrome extension to capture multiple attributes for an element and stores them. These multiple attributes become useful if there is a change in your web page and if one of the test cases fails. The tool will look at other attributes to uniquely identify the changed element and pass the test. Thus, it also becomes important for the self-heal feature to work as intended.

 

Installing Testsigma Chrome extension

Testsigma Chrome extension is available on the Chrome web store. Go to Chrome Web Store, search for Testsigma, select the Testsigma Chrome Recorder, click on the “Add to Chrome” button in the top-right corner of the page, and confirm the installation by clicking the "Add Extension" in the dialog box that pops up.

Testsigma Extension - Chrome Web Store page



Testsigma Extension - Install Prompt


Once the extension is added to your Chrome browser, it will look like this:



With the extension now properly installed, you are ready to start capturing elements and objects from a web page.

 

Installing while creating a Test Case


If you haven't installed the Testsigma Chrome Extension yet, you will get the following notification asking you to Install it while creating your first Test Case:



If you click on “Continue without installing”, it would mean you want to enter object details related to CSS and XPath manually. To avoid mistakes there, we recommend you use the chrome extension.


When you click on the “+Add to Chrome” button, you will be taken to the Chrome Extension page where it can be installed from. Follow the same steps in the above section "Installing Testsigma Chrome extension"



<< Chapter 1: Pre-conditions