If you are not familiar with the terminology UI Identifier, please check the following article: What is UI Identifier?

In this article, we are going to learn how to create UI Identifier using Testsigma Chrome Recorder

To learn the other options available, refer to Different methods to create UI Identifiers

Note: UI Identifiers recorded with Testsigma Recorder are highly robust and resilient to failures. However, in case of test failure for recorded UI Identifiers (due to dynamic page structure), please check the last section - Troubleshooting UI Identifier failure for tips on rectifying the failure.

Navigation:  Test Development > UI Identifiers

The landing page looks as given below:

Please check the below article to know more about managing UI Identifiers:
How to manage(create/edit/delete) UI Identifiers?

Getting UI Identifier

Clicking on the Create button on the top right corner of UI Identifiers page opens the Create UI Identifier page with the input fields mentioned below:

1. In the Create UI Identifiers page, click the Click here to Install now link in the notification text below the checkbox to go to Chrome Web store and install the Extension.

2. Install the extension and click on the Click here to retry now link to refresh the page and load the plug-in. The notification would disappear if the extension is installed successfully.

We will see how we can use Testsigma Chrome Recorder to get the UI Identifier for the page elements below.

Note: Refer Testsigma Recorder for Google Chrome - Keyboard Controls and Gestures to know the keyboard controls to capture actions such as recording Select boxes, Mouse over e.t.c

3. Check the Enable this checkbox at the top of the page to start capturing UI Identifier locator string as shown below:

4. Now, open a new tab and navigate to the Application page from which you want to fetch the UI Identifier locator value.

Note: If the tab is open already, close it and reopen once after the installation of the extension.

5. Hover(Mouse-over) on the element to be recorded. You will see a green border on the currently selected Element as shown below:

Here, we are trying to fetch the locator string for the LOGIN button. You can see the green border for the currently selected element. Left click with the mouse and the locator string will be updated in Testsigma Edit UI Identifiers page automatically.

6. Switch back to the Testsigma Create UI Identifier page. As you can see, the UI Identifier field has been filled automatically.

7. Click on the Create button in the bottom right corner to save changes. That's all we need to do in order to Create UI Identifiers using the Testsigma Chrome Extension.

Here's a short video depicting the process in detail:

Troubleshooting UI Identifier failures

1. If your steps are failing, please check the below guide for common failure reasons:

Most common issues caused when using UI Identifiers - Click, Wait for, Verify, or Scroll to Element

2. If your steps are continuously failing because of the UI Identifier from Testsigma Recorder, refer this document to identify dynamic classes and attributes and exclude them:

How to exclude/blacklist dynamic attributes/classes from Testsigma Recorder

3. If your steps are failing even after that, we would recommend you to try creating UI Identifiers manually by referring to the below document:

Web Application - How to create UI Identifiers manually?

4. If you are not familiar or comfortable with creating UI Identifiers manually, please contact Testsigma support team via chat and email for a free workshop/training.

Happy Automation Testing!