In Testsigma, one of the easiest way to create a UI Identifier is to define it while creating a Test Step.

If you are new to Testsigma, please check this article for more details on creating Test Steps - How to add/edit/delete automated Test Step?

Creating empty UI Identifier during Test Step creation

While creating a Test Step, we can create an empty UI Identifier as shown below:

testbutton1 is the name we are using for the UI Identifier to be created in this case. After entering the Test Step, click on Create button to create the Test Step. Along with the Test Step, an empty UI Identifier named testbutton1 is also created in this process. We can update the empty UI identifier with the locator value now.

Click on the Update button beside the Test Step on the far right side near the Edit button

The Test Step will show the UI identifier details now. Click on the UI identifier name to update it.

The Edit UI Identifier page opens up. We can:

  • Either select the Identifier Type and enter the locator string manually
  • Or use the Testsigma Chrome Recorder to find the locator string automatically

For the first option, you can check the following guide - Web Application - How to create UI Identifiers manually?

Here, we are going to use the Testsigma Chrome Recorder to fetch the locator string.

Using the Testsigma UI Identifier chrome plugin

In the Edit UI Identifiers page, click the Click here link in the notification text below the checkbox to install Testsigma Chrome Recorder extension.

We will be taken to Chrome extension page. Install the extension and click on the Click here to retry now link to refresh the page and load the plugin.

The notification would disappear and the Edit UI Identifiers page will look similar to the below image if the extension is installed successfully.

Check the Enable this... checkbox at the top of the page to start capturing UI Identifier locator string.

Navigate to the page from which you want to fetch the UI Identifier locator string and hover over(Mouse-over) the element with the mouse 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.

As you can see, the UI Identifier field has been filled automatically.

Click on the Update button in the bottom right corner to save changes. That's all we need to do in order to update the UI Identifiers in the Test Step.

Happy Automation Testing!