Detailed Overview of Selenium Locators

Selenium uses locators to access HTML elements from web pages. These locators have the ability to find and match any elements inside the DOM page. We can use it to perform actions on GUI elements such as radio buttons, buttons, text boxes, links, checkboxes, dropdowns, etc. Sing Locator to generate 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:

• Name
• ID
• TagName
• LinkText
• Partial Link Text
• Class
• Xpath
• CSS Selectors

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 attributes, and a Name is one among them. It is a 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))

To locate an element in a webpage, we use ID as it is the most common and easiest way. The very idea of ID is unique in a given webpage make it 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 the above two techniques as it can return zero or more elements. The same tag will be present multiple times on a web page, so it's advisable to use findElements() method when using the 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))

We can use this locator only to identify HTML links. The HTML Link is 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 of the LinkText locator mechanism. We can use this technique to use only one piece of text that should be an anchor tag to locate a web element.

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 the 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 we refer to these by using a class attribute.

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

Now, this style can be applied to a WebElement using the 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. We can use XPath 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 the google search box and learn about types of XPath.

1 > Absolute XPath

It starts from the root element within the web page and goes to 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 an element anywhere on the webpage. These are more convenient than absolute paths as we don't have to transverse the DOM structure from the 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 takes two string arguments and returns true if the first argument contains the 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 the AND expression, We use two conditions, and both the conditions should be true to find the element.

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

The above expression will return one matching node in MakeMyTrip applications. In OR expression, one of the two conditions 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 constantly changes due to any operation on the 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

• The parent tag will be used to select the parent element of the targeted WebElement
• //input[@id='hp-widget__sfrom' and @type='text']//parent::div
• The following sibling method is used to select a sibling tag following a targeted element
• //input[@id='hp-widget__sfrom' and @type='text']//following-sibling::span
• The preceding sibling method is used to select a sibling tag preceding a targeted element
• //input[@id='hp-widget__sfrom' and @type='text']//preceding-sibling::span

CSS Locator (By.cssSelector (String selector))

Selectors are patterns that match against elements in a DOM and are several techniques that we can use to select elements in a 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 with all the testers you know!