Identification Techniques for UI Automation

Identification of UI elements is the first essential step to start with UI Automation.

UI Automation is all about identifying and performing end user interactions on the UI elements programatically. Let us try to perceive UI identification problem with an analogy which I believe would be familiar to most of us.

Identification Technique 1 : By Direct Unique Attribute

Take a class room full of students, if you want to call a particular student how will you call them? You will call them by their name.

If you have more than one student with the same name, then how will you call ? you can call their name along with their last name or initial.

Suppose if you get more that one student even after calling them along with their Last Name/Initial, what would you do ? You can identify them with their Identification Number. Because no two students will have same Identification Number in a class.

Similarly, if you want to identify an element in a webpage, you can identify it directly by its Unique ID, Name or by any other attributes like LinkText, TagName or Class (will discuss in detail later).

If IDs are available then it is best to choose IDs over any other attribute for identification.

Direct Attribute Technique Example 1:

Let us try to understand it technically with the below sample HTML code.

Syntax: <tag attribute='value'>
<input type='text' id='txt1' name='uname'>

where,

input -> tag
type, id, name -> attribute
text, txt1, uname are values set to the attributes

In the above example we can identify an element for User Name field with unique identifiers such as ID or Name.

Sample code :

What will you do when you don’t have direct attributes to identify an element? or When will you decide to go to other two Identification Techniques ?

When there are no unique attributes directly associated with the UI elements, the other choices available are to go with relative techniques like XPath and CSS which would help to select elements by positions and appearance attributes.

Identification Technique 2 : By XPATH

Let us take the Classroom analogy, You want to call a student who is sitting in the 3rd row, 4th seat near the entrance door of the class room. But you don’t know the ID or Name of that student. How will you address the student in this case?

You can identify him in 2 ways

By the position of his seat in the class room, for example the guy in 3rd row, 4th seat (Absolute reference).

(or)

By referring the things around him like Student who is sitting near the door entrance (Relative reference).

Similarly, you can identify an element in the webpage either by starting from the Root node or by referring some other element and navigating through a path from it. This method of selection is called XPath Identification.

XPath is of 2 types

1. Absolute XPath.
2. Relative XPath.

Sample HTML to understand XPath

Absolute XPath contains the complete path from the Root Element to the desired element.

In the above example, to identify the header class the Absolute XPath can be written in Selenium as follows

driver.FindElement(By.xpath("/html[1]/body[1]/h1"));

Relative XPath is more like starting simply by referencing the element you want and go from that particular location.

Syntax for relative XPath expression :
//tagName[ @attribute='value' ]
Sample :
driver.FindElement(By.xpath("//h1[@class='c-h1-text']"));

Identification Technique 3 : By CSS Selector

It’s time to recap our Classroom analogy, Let us assume you have identified a student called X whose is seated in the 3rd row, 4th seat today.

Next day you want to call the same student X, so you have simply called him like ‘Student in 3rd row 4th seat’ but today some other student is sitting in that place. Though your path is correct due to some changes in the seating arrangement the result is different.

So it is always better to keep the selection method reliable. For instance, Guy with a blue tie, girl in the black shirt, etc. To make these kind of selections with the WebElements you need to know the attribute that sets these properties to those elements. CSS is a language that defines the physical attributes of web UI elements. Now let us take the sample example I used for XPath and see how can we achieve the same identification using CSS selector.

Syntaxes for most commonly used CSS Selectors :
tag#id_value
tag.class_value
tag[attribute=value]
tag#id_value[attribute = 'value']
tab.class_value[attribute = 'value']

**Prefix Pattern match**
 
tag.class[attribute^ = 'value']

**Suffix Pattern match**
tag.class[attribute$ = 'value']
tag.class[attribute* = 'value']

**Inner Text**

tag:contains('text')

Sample Selenium Code for CSS Selector:

driver.findElement(By.cssSelector("h1.c-h1-text");

Let us see more about the differences between the XPath and CSS, Regular Expressions and multiple ways of identifying the elements using XPath and CSS in the next article.

I’ll come up with a cheatsheet for XPath and CSS selection techniques in the way forward. Thank you.

Comments and Suggestions are most welcome ! 🙏

<< Previous Article | Next Article >>