Detailed Overview of Selenium Locators

Selenium uses locators to access the HTML elements from a web page. Locators can find and match any elements inside the page DOM. We can use locators to perform actions on any GUI elements (Textbox, Checkbox, Buttons, Radio buttons, dropdowns, links etc.).


Using the locators to identify the correct elements is the basic pre-requisite to create a successful Selenium script. Selenium WebDriver provides advanced techniques to locate elements on web pages. They are as discussed below by one of the selenium test automation services providers:

By is the locating mechanism used in findElement and findElements methods to fetch the respective webElement(s).

Name Locator (By.name(String name))


Every element in the webpage has many attribute and Name being one among them. It is very efficient strategy to locate an element by name.

If we want to use the name as a locator and identify a WebElement the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.google.com"); WebElement srcBox = driver.findElement(By.name("q")); srcBox.sendKeys("hi google");

ID Locator (By.id(String id))

ID is the most common and easiest way to locate an element in a webpage. The very idea of ID being unique in a given webpage make it’s much easier to locate that element. An ID can be manually assigned by the web developer or generated by the server dynamically.

If we want to use ID as a locator and identify a WebElement the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.google.com"); WebElement srcBox = driver.findElement(By.id("lst-ib")); srcBox.sendKeys("hi google");

TagName Locator (By.tagName(String name))

Locating element(s) by TagName is different from above 2 techniques as it can return zero or more elements. Same tag will be present multiple times in a web page so its advisable to use findElements() method when using TagName locator.


If we want to use TagName as a locator and identify a WebElement(s) the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.gmail.com/"); List<WebElement> elm = driver.findElements(By.tagName("input")); System.out.println(elm.size());

LinkText Locator (By.linkText(String linkText))


This locator can only be used to identify HTML links. The HTML Link are represented in a webpage using the tag.

If we want to use LinkText as a locator and identify a WebElement the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo Mishra/Desktop/selenium files//geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.google.com/"); WebElement elm = driver.findElement(By.linkText("Images")); elm.click();

PartialLinkText Locator (By.partialLinkText(String linkText))

This locator is an extension to LinkText locator mechanism. If we want to use only part of a text to locate a webElement which should be an anchor tag then we can use this technique.


If we want to use PartialLinkText as a locator and identify a WebElement the code will look as below Here we are clicking the HOMESTAYS link in MakeMyTrip application with partial text.


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo Mishra/Desktop/selenium files//geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement elm = driver.findElement(By.partialLinkText("home")); elm.click();

ClassName Locator (By.className(String className))

Almost all elements in a webpage are styled using CSS. These styles are declared directly in the element tag or kept in a CSS file and is referenced using a class attribute.


<style> .location { background-color: green; color: white; padding: 15px; } </style>

Now this style can be applied on a WebElement using class attribute


<h2 class="location">Hyderabad</h2> <p>Hyderabad is in Telengana</p>

If we want to use ClassName as a locator and identify a WebElement the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.google.com"); WebElement srcBox = driver.findElement(By.className("gsfi")); srcBox.sendKeys("hi google");

XPATH Locator (By.xpath(String xpathExpression))

XPath uses path expressions to select nodes in HTML DOM. The node is selected by following a path or steps. XPath can be used to find the location of any element on a webpage


Selecting Nodes in XPath:


Expression

Description

/

Selects from the root node

//

Selects elements relative to reference node that match the selection anywhere inside the HTML DOM

@

Selects attributes

Syntax for XPath:

Let’s create the XPath syntax for google search box and learn about types of XPath.


1 > Absolute XPath

It starts from the root element within the web page and goes till the target element


html/body/div[1]/div[3]/form/div[2]/div[2]/div[1]/div[1]/div[2]/div/div/div[2]


2 > Relative XPath

We can reach the target by referencing a element anywhere in the webpage. They are more convenient than absolute path as we dont have to transverse the DOM structure from root to the target element


//*[@id='lst-ib']


If we want to use XPath as a locator and identify a WebElement the code will look as below


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.google.com"); WebElement srcBox = driver.findElement(By.xpath("//*[@id='lst-ib']")); srcBox.sendKeys("hi google");

Various Xpath techniques to handle complex elements


1 > Text()

We can use the Text method to identify the a WebElement with the inner text

System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.xpath("//label[text()='one way']")); srcBox.click();

2 > Contains()

The contains() function take two string arguments, and returns true if first argument contains second argument

System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.xpath("//label[contains(text(),'one way')]")); srcBox.click();

3 > And, OR

In AND expression, two conditions are used and both the conditions should be true to find the element.


//input[@id='hp-widget__sfrom' and @type='text']


The above expression will return 1 matching node in MakeMyTrip applications In OR expression one of the two condition should be true to find the element


//input[@id='hp-widget__sfrom' or @type='text']


The above expression will return 33 matching node in MakeMyTrip applications


4 > Using Starts-With

Start-with function finds the element whose attribute value changes constantly due to any operation on webpage. Here we match the starting text of the attribute to find the element whose attribute changes dynamically.


//label[starts-with(@class,'my_nameClass’)]


5 > Parent, Following and Preceding


CSS Locator (By.cssSelector (String selector))

Selectors are patterns that match against elements in a DOM, and is one of several techniques that can be used to select elements in webpage


1 > ID


input[id='hp-widget__sfrom'] (or) #hp-widget__sfrom


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.cssSelector("input[id='hp-widget__sfrom']")); srcBox.sendKeys("New Delhi, India"); srcBox.sendKeys(Keys.TAB);

2 > Class

input[class=' label_text’] (or) .label_text


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.cssSelector("img[class='mmt_header_logo']")); srcBox.click();

3 > Substring Matchers-Starts-With, Ends-With, Contains

• Starts-With(^)

'^' symbol, represents the starting text in a string


label[class^=label_text]

System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.cssSelector("input[class^='mmt_header_logo']")); srcBox.click();

Ends-With($)

'$' symbol represents the ending text in a string


label[class$=label_text]

System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.goal.com/"); WebElement srcBox = driver.findElement(By.cssSelector("a[class$='btn--outline']")); srcBox.click();Contains(*)

'*' symbol represents contains text in a string


label[class*=label_text]


System.setProperty("webdriver.gecko.driver", "C:/Users/Rambo/Desktop/selenium files/geckodriver.exe"); WebDriver driver = new FirefoxDriver(); driver.get("https://www.makemytrip.com/"); WebElement srcBox = driver.findElement(By.cssSelector("img[class*='mmt_header_logo']")); srcBox.click();

What do you think about this post? Is it useful or not? Share this to all testers you know!


  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img