Web or Mobile applications depends mostly on HTML or XML documents for defining UI structure. Document Object Model(DOM) in Browsers provides a bunch of location mechanism to search and locate Element on the page for interacting with it. The most prominent ones are XPath and CSS Selectors.

  • XPath - XPath is a query language used to navigate through elements and attributes in an XML document.
  • CSS Selectors - CSS selectors such as type, class, id, name e.t.c also allows us to select particular elements in the XML document.


In Testsigma Terminology, UI Identifiers are locator phrases that use any of the methods to locate or select the page elements and use it to select and perform actions on Web page Elements during tests using Testsigma.


Navigation

We can navigate to the UI Identifiers page by going through:


Test Development > UI Identifiers


Locators supported by Testsigma

The following is a complete list of Element identifiers or locators supported by Testsigma:

  • XPath
  • CSS Selector
  • ID
  • Name
  • Link Text and Partial Link Text
  • Class Name
  • Tag Name




1. XPath:


XPath is a query language used to navigate through elements and attributes in an XML document. XPath locators are very powerful and flexible.

Any element on the page can be located using multiple XPath definitions and most other locators can be expressed as an XPath.


Example:

XPath for the Email field in the below image is //input[@id="email"]



Check the below article to know how to create Dynamic Xpath and CSS Locators in Testsigma using UI Identifier Advanced Options:

Web Application - How to create UI Identifier with Advanced Options?


2. CSS Selector:


CSS Selector is a string pattern used to identify an element based on a combination of HTML tag, id, class, and/or attributes.


Example:

CSS Selector for the Email field using ID is input#email

CSS Selector for the Email field using Class name is input.inputtext

                                               


Check the below article to know how to create Dynamic Xpath and CSS Locators in Testsigma using UI Identifier Advanced Options:

Web Application - How to create UI Identifier with Advanced Options?


3. ID:


ID is the most common way of locating elements since IDs are supposed to be unique for each element as per the W3C standard. If ID tags are available for an Element and they are unique, it is the most preferred option.


Example:

ID of the element is ”email”

              


4. Name:


    Locating elements by Name is very similar to locating by ID, except that we use the "name="attribute instead. And moreover, name attributes are not strictly unique.


Example: 

Name of the element is ”userName”

                                                           


5. Link Text & Partial Link Text:


Finding an element with Link Text/Partial Link Text is very simple. But make sure that the link text is unique on the 

web page. If there are multiple links with the same link text (such as repeated header and footer menu links), in such 

cases action will be performed on the first matching element with link.


Example:

link text of the element is ”Forgot password?”

 


6. Class name:


Class name locator selects the element which matches the values specified in the attribute name “class”.


Example:

Class name of the element is ”inputtext”



7. Tag name:


Tag Name locator is used to find the elements matching the specified Tag/Type Name. It is very helpful when we want to extract the content within a Tag.


Example:

Tag name of the element is ”input”