In this chapter, you will learn the basics of UI Identifiers and learn how to create UI Identifiers for the sample test explained in Testsigma Sample Application.


So first let’s look at the UI identifiers that we will need to capture. The steps of our test case look like below, we are going to mention the UI identifiers for each step:

Step description

UI identifiers

1. Navigate to Simply Travel website(Simply Travel)

None

2. Enter username - admin

Username

3. Enter password - 12345

Password

4. Click on Login button

Login

5. Verify the URL is http://travel.testsigma.com/?name=admin&password=12345&action=

None

6. Check the checkbox - Non-Stop

Non-Stopcheckbox

7. Click on the Departure Date picker

Departure Date picker 

8. Click on today's date

Departure date

9. Click on OK

Ok button

10. Click on Search Flights

Search Flights Button 

11. Verify the arrival locationNone

 

Create UI Identifiers

1. Navigate to Test Development > UI Identifiers


2. Click on the ‘Record’ button on the top right of the UI identifiers page.


3. A pop-up should appear with a button “start recording” similar to the screenshot below:


4. Click on the “Start Recording” button. When the recording starts, the “Start Recording” button will change to a red “stop recording” button as below: 


5. Open a new tab in Chrome and type the URL you want to capture UI identifiers for. In our case, we will open the Simply Travel - Login Website.


6. When you open a new tab with the above URL, the new page should look like this:


7. On clicking on any element, the corresponding elements should appear in the “Record UI Identifiers” widget as can also be seen in the screenshot below:


8. Now you can record all the elements that you will be interacting within your Test-Case:

 

Now that we have captured all the UI identifiers we will go about renaming them that will help us to use them better. For this you will have to click on the edit icon that appears on the right side of a captured UI identifier when a mouse has hovered over them as shown in the screenshot below:


The edit window appears as below:


Any changes can be saved by click on the update button. We changed all the names as can be seen here:


9. On click on save, the captured UI identifiers will be saved under the UI identifiers section that was opened originally in your Testsigma project. Similar to as can be seen in the screenshot below:


Above, we covered the approach where UI identifiers were captured before the test case creation activity. If you’d rather capture the UI identifiers while creating the test case, that can be easily done too and is explained in this document:

Creating ui-identifier 


To know more about chrome extension controls for capturing special gestures like mouse-overs, scroll the page, keypresses, select options from dropdowns, etc., check the article Chrome Extension


If you face any challenges while recording the desired elements please let us know via the inbuilt chat. You will find the chat window on the bottom right of the web pages on Testsigma. Alternatively, you may also write to us at Testsigma Support.


In the next chapter Create Test Case, we will use the created UI identifiers to create the test case explained in the “Testsigma Sample Application” chapter.


<< Chapter 4: Create a ProjectChapter 6: Create Test Case >>