What is UI identifier, why is it needed, how to capture the details, and why Chrome Recorder?

Every Functional Test is composed of a number of steps interacting with the page elements and performing some actions on the page elements to verify that the functionality of the Application is as intended by the user.

In order to interact with the page elements during the test, we would require some information to identify the element to interact with. This is what element locators are used for. Some of the most common locators used are XPath, CSS locators, Id, name, class, link text e.t.c

What is UI Identifier and why is it needed?

UI Identifier is nothing but Testsigma specific element identifier used to locate page elements in your Application Under Test(AUT). A UI Identifier typically contains all the required details regarding a page element along with its locator.

Generally, the same page element will be reused multiple times in all of the Test Cases written for the same page/scenario. Therefore, it would be a good idea to make the locators reusable. This is the gist of Page Object Model approach in Selenium Test Frameworks.

Understanding this, Testsigma too uses a Shared Repository for the UI Identifiers. Once the UI Identifier is created, it can be reused in all of your Test Cases seamlessly. This also makes the maintenance of the Test a lot easier since you only have the make the change at one place. Whenever an application layout changes a little, you only need to update the UI identifier for that element rather than updating the all of the tests.

How to capture the UI Identifier details?

There are three main methods for creating UI Identifiers apart from importing them from an Excel file.

  1. Manually
  2. Using Chrome Recorder
  3. Using Multiple Attributes

1. Manually

If you are knowledgeable and comfortable with Web Element locator mechanisms such as XPath, CSS locators e.t.c, you can use the Manual creation option to create UI Identifiers.

However, it is recommended to always use the Chrome Recorder method as much as possible since that enables the Self-healing or Auto-healing of UI Identifiers. Also, creating UI Identifiers using Chrome Recorder is proven to speed-up the Test Creation speed by at least 3x.

2. Using Chrome Recorder

This is the recommended method for creating UI Identifiers. It captures all the relevant details regarding the page element with a single click. There are multiple methods for capturing UI Identifiers using the Chrome Recorder although recording the UI Identifier during the Test Creation is the most popular one.

3. Using Multiple Attributes

If you would like to leverage the power of XPath or CSS locators for locating dynamic page elements, you can use the Multiple Attributes option for creating UI Identifiers.

Here is an article explaining the different methods of creating UI Identifiers in detail:

Different methods to create UI Identifiers

Why Chrome Recorder

Testsigma Recorder Chrome Extension helps you obtain the UI Identifier of an element from a web page that you need to perform actions on.

It is especially useful for users who are new to Test Automation concepts such as dynamic locators and XPath. Even if you are an experienced automation tester and you are comfortable with XPath and other element locators, it is always recommended to use Chrome Recorder since it enables auto-heal for your tests automatically while recording.