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"));
