Identifying Web Elements – Selenium WebDriver

All web pages consist of elements like textbox, checkbox, radio button, dropdowns, etc. These elements are known as web elements. To interact with these elements or to perform any operation(action) like writing in a text box or selecting a checkbox or selecting an option from a drop-down etc. they need to be identified or located first. To identify these elements, Selenium provides eight Identifier or locators.

It is essential to identify these web elements uniquely. In the upcoming tutorial, we will learn different ways to use these identifiers or locators to determine these elements uniquely.

Locators or Identifiers in Selenium:

There are different strategies for locating elements on a page, and some are certainly better than others. Selenium provides us eight types of locators or Identifiers which are as follows:

• Id
• Name
• Class Name
• Tag Name
• Link Text
• Partial Link Text
• CSS
• XPath

Let us discuss each identifier in detail. Before going ahead have a look at Firebug and Firepath Tutorial. For locating web elements, we use a Firefox add-on called Firebug and for creating XPath we use another add-on called Firepath. It is not necessary to use Firebug and Firepath, all browsers provide a default developer console, which can be accessed by pressing F12 (Function key).

Note: Web Elements identified on one browser can be used directly on other browsers.

By Using Id:

Id is an attribute assigned to a web element, and it uniquely defines the element on the page. So, it is the most preferred locator. Also, Ids are the fast and reliable way as compared to other identifiers.

Let us see the below screenshot. If you look at the html code of the email textbox – it is a tag of input type with an attribute id and its value is email.

WebElement email = Driver.findElement(By.id("email"));

findElement() method:

findElement(By oBy) is a method in Selenium WebDriver which returns a unique Web Element based on the locator (criteria) passed as an Argument.

BY is a class which has the implementation of methods for all locators to locate elements like By.Id() to locate using Id attribute, By.xpath() – to locate using xpath etc.

Similar to findElement() method, there is another method called findElements() which returns a list of WebElements identified on a page based on the criteria passed as an argument. We will learn findElements in detail in future tutorials.

By Using Name:

After ID’s the next most preferred way of locating element is by using Name attribute. But make sure there the name cannot be unique all the times. If there are multiple names, Selenium will always perform an action on the first matching element and this right for all locators.

Just like Id, the name is also an attribute present in the html code.

See the screenshot below:

WebElement password = Driver.findElement(By.name("pass"));

Here, the password field is uniquely identified using a locator called name.

Using Class Name:

Classname locator uses an attribute with name class. It is an attribute just like Id, Name but there can be multiple elements with same Class Name. So if class attribute is giving only one matching element in the developer console or firebug, then it can be used.

One more point to remember that if an html code has more than one class assigned to it (multiple classes have white spaces in the value.)

WebElement password = Driver.findElement(By.className("inputtext"));

Here, password field on the page is identified uniquely by a locator called className.

By Using Tag Name:

Locating Element By Tag Name is not that popular because dynamic pages these days have multiple elements with the same tag. There are scenarios like “Searching all links on a page or searching for all checkbox in a frame or a page” – tag name locator is used.

Locating Element by tag name:

WebElement dropdown = Driver.findElement(By.tagName("select"));

Tag Name can also be used to identify all similar kind of Web Elements on a Page. Say for example you have to search all the links on a page. Links are identified by an anchor tag (“a”).

List<WebElement> allLinks = Driver.findElements(By.tagName("a"));

Using Link Text:

Links on an html page are represented with anchor tag (“a”). Every link on a page has an attribute called “href” which is the address of the navigating page. Every link has a text associated with it which is known as link text.

To Identify a link on a page, there are two Locators (linktext and partialLinktext).

Element located by Link Text Locator:

WebElement forgetElmnt = Driver.findElement(By.linkText("Forgotten account"));

Using Partial Link Text:

Partial Link Text is also used to identify links, unlike Link text where there was an exact match of the word (link text), Partial Link Text matches the link text partially. It can be considered as a contains method. For example, if we look at below image for locating the element by link text, we need to use the full word ‘REGISTER,’ but in the case of locating the element by partial link text, we can locate the element by partial link text like ‘TER’/’REG’, etc. Here point to be noted is that partial link text should uniquely locate the element.

To make it clear suppose there is one text “SIGN-ON,” and another is “SINGLE SIGN ON.” Here using “SIGN” or “ON” as partial link text could lead to more than one matching element on the web page. So, selection of partial text should be made wisely.

Locating Element by Partial Link Text Locator:

WebElement register = Driver.findElement(By.partialLinkText("REG"));

Another one good example for Partial Link Text is – Let us say we want to find all the links on a page which have a common word (like add word is common to add customer and add account).

Using Xpath:

 Xpath is the most important identifier of the list. All the elements can be identified using xpath.

 Xpath is a path written using the html tags(or the XML tags) and their attributes to navigate to a node on an HTML page.

There are two types of xpath:

• Absolute Xpath
• Relative Xpath

Absolute xpath starts from starting of the page. As in an html page, the first tag is HTML. So it always starts from html. Say for example html/body/table/tbody/tr[2]/td/input. 

“/” is used to access an immediate child of the parent tag.

Relative xpath,  on the other hand, starts from anywhere on the page.

“//” is used to access any child of the parent tag.

Syntax: //htmlTagname[@attribute=’value’]

Example: //input[@type=’text’] – It represents xpath of a WebElement which is represented by tagname input and has an attribute type = ‘text’.

XPaths are covered in detail here.

Using CssSelector:

Identifying Web Elements using CSS property of an element is done by using cssSelector. CSS stands for Cascading Style Sheets; it is a language which describes the style of an HTML page. It describes the style and structure of the page.

Identifying a WebElement using cssSelector is faster than all other options.

Example:

WebElement username = Driver.findElement(By.cssSelector("input[id='email']"));

We will learn cssSelector in detail in upcoming tutorials.

If I have to summarize what all we have studied above – Id, Name, and Classname are available as attributes in html code. If they are unique, they can be used directly. For Link web elements we have two identifiers – LinkText() and Partial LinkText(). In some of the scenarios, we can also use tag name when tags are unique. When there is no other option left to identify elements – XPath and CSS Selectors are used. CssSelector is fast as compared to xpath.

For any questions, queries, suggestions, and feedback feel free to write us at saurabh@qatechhub.com or support@qatechhub.com.  Happy Learning 🙂