Selenium uses locators to find and match the elements of your webpages that it needs to interact with. There are eight locators included in selenium:
ID
Name
Link Text
Partial Link Text
Tag Name
CSS Class
CSS Selector
XPath
“id” is used to select the element with a specified @id Attribute.
It is a unique reference to a web object that the developer sets while writing the code.
< input id=”user” class=”required” type=”text” />
WebElement item = driver.findElement (By.id (“user”));
Pros:
It is preferable to have a unique id in order to avoid meeting similar values.
Cons:
Feasible for elements with fixed ids but not for the generated ones.
“name” is used to select the first element with the specified @name attribute
Every form has input fields with unique “name” most of the time, but it’s not a restriction.
< input id=”user” name=”admin” class=”required” type=”text” />
WebElement locator = driver.findElement(By.name(“admin”));
Pros:
It is more appropriate to use it when you have a list of similar types of elements.
Cons:
Using it with a dynamically generated list is tough.
“linkText’ is used to select the link element which contains the Matching Text.
It is a perfect way to find the links on a page.
< a href=”http://www.techbeamers.com”>How to use locators?< /a>
WebElement item = driver.findElement (By.linkText(“How to use locators?”));
Pros:
It’ll only work for anchor tags (< >).
It can be used for checking navigation flows.
Cons:
You need to provide the link text for it to work.
“partialLinkText” is used to select link (Anchor Tag) element which contains text matching the specified “partialLinkText”.
It is almost similar to the previous locator. It differs in the way you use it to find the element.
< a href=”http://www.techbeamers.com”>How to use locators?< /a>
WebElement item = driver.findElement(By.PartialLinkText(“How “));
Pros:
It is proves to be beneficial if link name is very long.
Cons:
As we do not write complete link, it may conflict with other links and it might result into duplication.
These are tag names of html.
If we want to know list of all tags and their size, then it becomes easy to get by this locator.
“findElements” needs to be used as there may be many tags of the same name.
This method will return a list of WebElements and later on we can iterate that list and do operations over every single element.
< input id=”email” class=”form-control” type=”text” placeholder=”Email”>
List< WebElement > listOfTags=driver.findElements(By.tagName(“input”));
System.out.println(listOfTags.size()); // this will print 2
“cssClassName” is used to access the element
The “cssClass” locator uses a specific class attribute to get the first element on a web page. It is useful for items that have a unique style.
< input id=”email” class=”form-control” type=”text” placeholder=”Email”>
//locate email element
WebElement userEle = driver.findElement(By.className(“form-control”));
//enter uname into text box
userEle.sendKeys(“kiran@gmail.com”);
“cssSelector” is used to access the elements
“cssSelectors” are no different than the Xpath, but they are resilient and powerful.
Unlike the Xpath, they aren’t dependent on the DOM structure.
They can help you perform actions which are difficult to do with Xpath.
< input id=”email” class=”form-control” type=”text” placeholder=”Email”>
WebElement userEle= driver.findElement(By.cssSelector(“input[id=email]”));
input -- tag name
id – attribute name
email – value of attribute
Pros:
Relatively speedier than using the Xpath.
Its usage is growing as the web pages are getting more style-centric.
It’s easy to define a unique “cssLocator” as you can combine multiple CSS attributes.
Cons:
It’s not easy to form a “cssSelector” and requires a deeper understanding of the CSS/JavaScript.
“Xpath” is used to track an element using the “Xpath” Expression.
“Xpath” is a perfect technique for walking through the DOM structure of the web page.
“Xpath” locators are robust and reliable.
It is this method which guarantees to locate any element on the page using the “Xpath” expression. But you should be very careful while forming an “Xpath” as it may not work if there are changes in the web application.
We can classify “Xpath” into the following two groups:
Absolute XPATH
Relative XPATH
Relative Xpath
It starts from the root element within the web page or part of the page and goes to identify the target element.
Absolute XPath Example: HTML/head/body/table/tr/td
To use locators like the Xpath is easy as you give the direct element path. but the Xpath would break when the element structure changes.
The key characteristic of Xpath is that it begins with the single forward slash(/), which means you can select the element from the root node.
Absolute Xpath
The “relative XPath” is easy to manage as they are short and concise.
It is also better than the previous XPath style as it may survive the changes in the HTML page to a certain degree.
Though, building a “relative XPath” is time-consuming and quite difficult as you need to check all the nodes to form the path.
Xpath = //tagname[@attribute='value']
// : Select current node.
Tagname: Tagname of the particular node.
@: Select attribute.
Attribute: Attribute name of the node.
Value: Value of the attribute
It starts with the double forward slash (//), which means it can search the element anywhere at the webpage.
If we don’t want to specify tagname i.e div tag or input tag etc. then we can write Xpath as below:
//*[@attribute='value']