In this post, we will learn all the ways to locate an element on a web page.

We can locate an element on a webpage in 8 different ways, which are:

  1. id
  2. name
  3. linkText
  4. partialLinkText
  5. className
  6. tagName
  7. cssSelector
  8. xpath

The main focus of this post is to understand the difference between all the locator types.


1. Locating element by id:

Each HTML element has its own unique identity and that identity is stored in the id attribute of that tag. Consider the below examples:

Both tags have an associated id attribute. So we can easily locate this element using this attribute.

To locate this element in selenium we write the statement as:

The id attribute is the fastest way to locate any element as it’ll be unique in the entire DOM structure and it internally calls document.getElementById() method of browser.

2. Locating element by name:

Each element will have a name attribute to identify it on a web page. We use the name attribute when there is no id attribute associated with an element. (P.S: if there is no id attribute to an element then please speak with your developers and request them to add one, if possible).

Multiple elements might have the same name in DOM, so we need to be sure that there are no duplicates while using name attribute to locate an element.

To locate an element using name attribute we write the statement as (Example same as #1):

3. Locating element by linkText:

We can locate an element using linkText() only when we know the exact text that is used with the anchor <a> tag. This technique of locating elements will only work on an anchor tag.

Consider eample:

To locate this element in selenium we write a statement as:

Suppose, part of text associated with anchor tag keeps on changing but we still want to locate this element using its text then we need to use partialLinkText instead of linkText.

4. Locating element by partialLinkText:

Consider example:

To locate the above elements in selenium we write a statement as:

In the above examples, the static part of the text is ‘FindElement’. So we use only static part of the text to locate the element with the partialLinkText() method.

Note: If there are multiple elements found using partialLinkText() then selenium will return the first matching element and all the operations will be performed on the first element.

If we want to perform the operation on other matching elements then either we can use the findElements() method provided by selenium and iterate on each and every element to perform operations or we can use other techniques to locate such elements.

5. Locating element by className:

In a well-designed application, almost all elements will have a class attribute. This name can be unique in case of a simple application but most of the time we will find multiple elements with the same class name.

Consider example:

If we have a complex DOM structure like this then we won’t be able to locate a specific element using the className() method. It’ll always return the first matching element from the DOM.

We can use className() method to find all the elements that are linked to a particular class. Suppose, we want to find all elements with class social icons then we can write a statement as:

But, if we have a simple DOM structure like below then it is much easier to locate an element using the class name.

We can locate the above element by writing a statement as:

6. Locating element by tagName:

We can use this technique of locating an element when we want to perform some set of actions on a specific type of element. For example, we want to find how many buttons are present on a web page and if they are in enabled or disabled state OR how many links are present on the page and if they are clickable or not.

To fetch single element from a page we write the statement as:

But we need to use findElements() method to fetch all the elements present on a page:

7. Locating element by cssSelector:

CSS stands for Cascading Style Sheets. It controls how elements are displayed on a web page.

We can use this technique to locate an element when it does not have an id or a name or a class attribute.

We can locate an element by writing a statement as:

In the above examples, # refers to the id attribute of the element and (.) dot refers to the class attribute.

To learn more about writing CSS selectors refer post How to write cssSelector?

8. Locating element by XPath:

What is XPath?

XPath stands for XML Path Language. It is used to navigate in XML documents to find nodes.

XPath takes the most amount of time to locate an element when compared with other techniques as it starts searching for elements right from the root node.

There are two types of XPath:

  • Absolute XPath and
  • Relative XPath

What is Absolute XPath?

It is the simplest way to find an element. It starts from the root node i.e. <html> tag and stops at the destination node.

The absolute path always begins with a single forward slash /.

The drawback of writing the Absolute path is that if there is any minute change in the DOM structure (addition/deletion of HTML elements) then absolute XPath will no longer be valid.

Let us refer below DOM structure to write the xpath’s.

Absolute path examples:

  • Username field: /html/body/form/div[1]/input
  • Password field: /html/body/form/div[2]/input
  • Forgot Password link: /html/body/form/div[3]/div/a

What is Relative XPath?

It is a reliable way to find an element. It can start from anywhere in the DOM structure.

The relative XPath starts with // followed by tagName or * . Example: //* or //a. It will search the entire DOM structure with the given pattern.

The advantage of writing relative XPath is that they won’t fail with a minor change in the path. They will fail only when the written pattern is no longer valid.

Relative path examples:

  • Username field: //input[@id='txtUsername']
  • Password field: //input[@name='txtPassword']
  • Forgot Password link: //div[@id='forgotPasswordLink']/a

To learn more about writing Relative XPath’s refer post Writing Dynamic XPath.