To automate tests, we need some details of elements/objects on the Web page that we need to interact with. We will use these details to pinpoint those elements.

For Example, if you want to automate a Username input box, you would need some details to uniquely identify and locate this Username field on the web page and perform any actions on it.

<input type="text" class="inputtext" id="username" name="username" placeholder="Username/email-id" autocomplete="off">

These details could be id, name, class, XPath, or any other unique attribute it has. These details are created by developers at the time of developing the Web page.

What are UI Identifiers in Testsigma?

In Testsigma, we call the above-mentioned page elements, UI Identifiers. We will be creating UI Identifiers for each of the page elements we need to use in our tests.

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.

Testsigma Recorder Chrome Extension

We use the Testsigma Chrome extension to capture the details of the page elements and store them in a shared repository of these elements so that the same element details can be reused in other tests.

Why Testsigma’s Chrome Extension?

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

If you are new to Automation Testing tools or 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 "FirstName" details easily.

Another reason we recommend the Chrome extension is since the Auto-healing feature in Testsigma works only with elements recorded using Testsigma Chrome Extension. Therefore, the auto-healing feature won't work if you use other methods to create UI Identifiers.

Install Testsigma Chrome extension

You can install Testsigma Chrome extension from Chrome web store.

Go to the chrome extension page in Chrome Web Store and 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.

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

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 to use the Chrome Extension.

Now let's take a look into the Sample Mobile Web App we will be automating as a part of this guide.

<< Chapter 1: PreconditionsChapter 3: Sample Mobile Web App >>