Locators in Selenium | Locating Element in Selenium by Identifier

In Selenium a web element on the page should be uniquely identified by the script to perform some actions on it. Actions like Click, Select, Check, Drag Drop etc,

To Locate Element in Selenium, we can use following locators:

• Id
• Name
• Class Name
• CSS Selector
• linkText
• Xpath
• tagName
• partialLinkText

Locate Element by ID

Finding element by ID is the most common and fasted way of locating an element. ID's are mostly unique for each elements. If no element has a matching ID attribute, a NoSuchElementException will be raised.

How to find element by ID

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'email' field by its ID attribute as shown below:

Command in Selenium to find Element by ID

driver.findElement(By.id("login-username"));

Locate Element by Name

Finding element by Name is almost same as finding element by ID. Name of elements are not unique all the time. If more than one elements are present on the page with same name then the first element on the web page is selected. If no element has a matching name attribute, a NoSuchElementException will be thrown.

How to Element by Name

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'email' field by its Name attribute as shown below:

Command in Selenium to find Element by Name

driver.findElement(By.name("username"));

Locate Element by Class Name

Use this whenever you want to find element by class attribute. More than one element can have same Class Name on a Page. Probability of Class Name change is high as UI changes.  If no element has a matching Class Name attribute, a NoSuchElementException will be thrown.

How to find Element by Class Name

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'email' field by its Class Name of element as shown below:

Command in Selenium to find Element by Class Name

driver.findElement(By.className("phone-no"));

Locate Element by LinkText

This selector will locate link with specified text on the page no matter where it’s located.

How to find Element by LinkText

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'Privacy' link by its Text as shown below:

Command in Selenium to find Element by LinkText

driver.findElement(By.linkText("Privacy"));

Locate Element by partial Link Text

This selector will locate link with specified partial text on the page no matter where it’s located.

How to find Element by Partial Link Text

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'Privacy' link by its  Partial Text as shown below:

Command in Selenium to find Element by Partial Link Text

driver.findElement(By.partialLinkText("Priva"));

Locate Element by Xpath

When we don't have specific ID, Name attribute of an element, we can use Xpath to find that element. We can either use Relative Xpath or Absolute Xpath(from the root of HTML) of an element.

Script can fail on using Absolute Xpath as any minor changes in position of elements can break it.

How to find Element by Xpath

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'email' field as shown below: Right Click and Copy Xpath

//*[@id="login-username"]

Command in Selenium to find Element by Xpath

driver.findElement(By.xpath("//*[@id="login-username"]"));

Locate Element by Tag Name

A web page can contain multiple Tag of same type. So either use it when any Tag is specifically used on a web page or to get List of web elements of same type.

How to find Element by Tag Name

Open Developers tool (F12) > Select an element to inspect on the page, we are inspecting 'email' input field by its tag Input as shown below:

Command in Selenium to find Element by Tag Name

driver.findElement(By.tagName("input"));

Locate Element by CSS Selectors

A CSS Selector is a combination of an element selector and a value which identifies the web element within a web page. If no element has a matching CSS Seelctor attribute, a NoSuchElementException will be thrown.

Types of CSS Selectors : 

• ID
• Class
• Attribute
• Sub String
• Inner Text

How to find Element by CSS Selector

Open Developers tools(F12) > Select an element to inspect on the page as shown below:

We will use this screenshot to explain all types of CSS selectors

How to find Element by CSS Selector by ID

An element’s id in CSS is defined using: “#” - ID's must be unique within the DOM

Example from above screenshot.

#login-username

How to find Element by CSS Selector by Class

An element’s class in CSS is defined using: “.” 

Example from above screenshot.

.phone-no

How to find Element by CSS Selector by Attribute

We can use an attribute selector in selenium to choose elements based on any attribute value.

Example from above screenshot.

input[name='username']
input[id='login-username']

How to find Element by CSS Selector by Sub String

Selenium allows sub string matches using ^=, $=, or *=

•  ^= Match a prefix
•  $= Match a suffix
•  *= Match a substring

Examples from above screenshot.

input[id^='login-']
input element with an “id” that starts with the text “login-”

input[id$='login-username']
input element with an “id” that ends with the text “-username”

input[id*='login']
input element with an “id” that contains the text “login”

How to find Element by CSS Selector by Inner Text

This selector will find link 'Terms' and 'Privacy' on the web page irrespective of its location.

Example from above screenshot.

 a:contains('Terms')

 a:contains('Privacy')

Command in Selenium to find Element by CSS Selector

driver.findElement(By.cssSelector("#login-username"));

driver.findElement(By.cssSelector(".phone-no"));