Locators in Selenium

Table of content

• WebElement in Selenium
• Locators in Selenium
• The priority of Locators in Selenium
• How to open developer tools to find elements
• Sample HTML for Locators Example
• Id
• Name
• Class Name
• tagName
• Link Text
• Partial Link Text
• CSS Selector in Selenium
• Xpath

Locators in Selenium 

Selenium uses locators to find and match the elements of the page that it needs to interact with. There are 8 locators are present in Selenium:

• Id
• Name
• ClassName
• TagName
• LinkText
• Partial Link text
• CSS
• Xpath

The priority of Locators in Selenium

The automation developer should use the locator in the below order so that the failures will get reduced. If id has more than one match, then the user should try with Name so on...

• Id
• Name
• ClassName
• CSS
• Xpath

Sample HTML for Locators Example

Id 

The Id locator looks for an element in the page having an id attribute.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class ElementLocators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example")
		driver.findElement(By.id("firstButton")).click();
	}
}

Name

The name locator looks for an element on the page that has a name attribute.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example");
		// Below line matches with banana button
		driver.findElement(By.name("Ban")).click();
	}
}

Class Name

The Class name locator looks for an element on the page that has a class attribute.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator_example");
		// Below line matches with banana button
		driver.findElement(By.className(".banana")).click();
	}
}




tagName

The tagname locator looks for an element in the page having an tagname, like <a>, <button>, <p>, <label>, <div> etc

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example");
		// Below line matches with banana button
		driver.findElement(By.className(".banana")).click();
	}
}




Link Text

The link text finds the element based on the text present in tag, text highlighted in the below image.

If there are multiple elements with the same link text, then the first one will be selected. This Link Text locator works only on links (hyperlinks), so it is called as Link Text locator.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
		public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example")
		driver.findElement(By.linkText("Selenium Webdriver")).click();
	}
}




Partial Link Text

In some situations, we may need to find links by a portion of the text in a Link Text element. In such circumstances, we use Partial Link Text to locate elements.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example")
		driver.findElement(By.partialLinkText("Selenium")).click();
	}
}




CSS Selector in Selenium

CSS Selector is the combination of an element selector and a selector value that identifies the web element within a web page. The composite of an element selector and selector value is known as the Selector Pattern.

When we don't have an option to choose Id or Name, we should prefer using CSS locators as the best alternative. Read how to build CSS Selector in Selenium.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example");
		// # means id, so here below locator points
		// to element which have id as firstButton
		driver.findElement(By.cssSelector("#firstButton")).click();
	}
}




Xpath

While DOM is the recognized standard for navigation through an HTML element tree, XPath is the standard navigation tool for XML also we can use it for HTML; and an HTML document is also an XML document (xHTML).

XPath is used everywhere where there is XML. You can read More on Xpath Building; Valid XPath locators can be:

xpath=//button[@name="Ban"] - matches with banana

XPath = //*[@value='Strawberry'] - matches with strawberry

Note: We have explained XPath in great detail in the upcoming section

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Locators {
	public static void main (String [] args){
		WebDriver driver = new FirefoxDriver();
		driver.get("https://chercher.tech/locator-example")
		driver.findElement(By.xpath("//button[@name="Ban"]")).click();
	}
}