Before going through this chapter, please ensure that you have already gone through chapters “Testsigma Sample Application”, “Create a Project” already. These chapters will help you understand this chapter better and the project that you create while going through the “Create a Project” chapter can be used here.


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”. If you are someone with prior knowledge of Selenium then these are equivalent to Locators there. For others, the UI identifier is the name of the elements that you wish to automate/interact with on a web page. These UI Identifiers contain the necessary technical details of the objects/elements to use during the automation process.


These technical details include XPath and CSS related information like id, name, height, width, etc. To know more about UI identifiers, check the section What is ui-identifier 


In Testsigma, UI Identifiers can be created in 3 different ways. In this chapter, we will cover the recommended approach, which is coincidentally, also the simplest approach - Using Testsigma Chrome Extension.


To know how to install the Testsigma chrome extension, check the chapter Installing Chrome Extension 


Using Testsigma’s Chrome extension, all UI Identifiers needed for automating a test case can also be captured while executing the test case. In Testsigma’s terminology, it is called recording.


In this chapter, we will be creating UI identifiers for the sample test case described in the “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


  1. Enter username - admin


  2. Enter password - 12345


  3. Click on Login button


None



Username


Password

Login

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


                   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 location





  1. Login to Testsigma with your account.
  2. On the Dashboard page, go to the “Test Development” section.
  3. Make sure the project you created is already selected under the project on the top left corner.
  4. Now, click on the “UI identifiers” from the menu on the left:



    5. The UI identifier page opens up which should look like the screenshot below (without any entries):



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


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



8. Click on the “Start Recording” button.


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



10. Open a new tab in Chrome and type the URL you want to capture UI identifiers for. For e.g. We will open Simply Travel - Login


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



12. 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:



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


 

14. 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:



15. We changed all the names as can be seen here:




16. 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.