Kick Starting UI Automation

What is UI Automation ?

UI Automation is mimicking the user interactions on the browser with the help of an Automation tools like Selenium, QTP, TestComplete, SoapUI etc.

In order to mimic the user interaction on a webpage, first we need to identify the elements present in the webpage using the ‘Identification Techniques’ available in the automation tool.

Note : In my articles I’ll be using Selenium WebDriver to demonstrate UI Automation.

So, What is Selenium WebDriver?

WebDriver is a bunch of programs written in Java available as a JAR, can be attached to your Java project and utilised as a Library. Selenium WebDriver is available for other language binding as well. In my examples we’ll be using Java + WebDriver.

Identification Techniques:

Elements present in a web page like Text Box, Check Box, Button, and Label can be broadly addressed as ‘WebElements’. The most common techniques to identify them are as follows,

1. By the attributes directly associated with the elements like ID, ClassName,TagName etc.
2. By its Position on the webpage : XPath
3. By its Appearance on the webpage : CSS

Let’s look at the fundamentals of these techniques one by one,

By Direct attributes :

Take a simple html tag definition,

<input type=“text” id =“f_1” name=“fname”>

<input type=“text” id =“f_2” name=“fage”>

in the above example, the tag name is input and there are 3 attributes associated with this element, namely type, id and name. You can choose an attribute that holds a unique value to identify it.

By XPath :

There is something called DOM behind every webpage that is rendered into a User Interface. The elements that we see in the UI are all organised in the form of a tree. XPath is the path either from the Root or somewhere from the branch that would take us to a specific element in the tree.

Types of XPath :

1. XPath defined from the Root of the DOM tree is called Absolute XPath.

2. XPath defined somewhere from the Branch of the DOM tree is called Relative XPath.

By CSS Selector :

As I mentioned earlier, this is a technique that identifies an element based on its appearance like color, size and other physical attributes defined by its CSS. If you are wondering what CSS is here is a short note :

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.

Let’s dive deep into the sample codes for identification techniques in the next article.

Comments and suggestions are most welcome. Thank you 🙏

<< Previous Article | Next Article>>