WebElement in Selenium

Anything present on the webpage such as textbox, text, button, link, table, radio button, checkbox, etc., are called webelement.

webelements%20selenium%20webdriver

Before performing any action on webelement (typing, clicking, selecting, etc.), selenium has to identify those elements uniquely.

In order to use this, it uses a few of the characteristics(8 types) that are given by the developer while developing the webpage using HTML.

How to find WebElement?

In order to interact with UI objects with Selenium WebDriver, we need to be able to identify webpage elements fast and in an accurate way(sometimes uniquely). We don’t want to refactor these locators very often so we must choose the right locators from the start.

There are some browser tools that you can use in order to identify web elements in the DOM easier.

1. Firebug for Firefox
2. Google Developer Tools for Chrome
3. Web Inspector for Safari

We will explore the above tools in the following tutorials.

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

Below the image the highlighted the locators present in selenium

locators_in_selenium_webdriver

Apart from these 8 locators, we have another 18 more inbuilt locators; selenium API provides power to the user to create custom locators in selenium.

Read QR Code using Selenium

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

How to open developer tools to find elements

By doing the following operation in the respective browser, we can open the developer tools

  • IE: Developers Tool (Tools –> Developers Tools/ F12)
  • Chrome: Build-in Page analyzing feature (right-click –> Inspect Element / F12)
  • Firefox: Firebug add on. Right-click on any element and select Inspect Element or F12

Sample HTML for Locators Example

<html>
	<body>
		<div id="pancakes">
			<a href="https://chercher.tech" >Selenium Webdriver</a>
			<button id="firstButton" type="button">Blueberry</button>
			<button type="button" name="Ban" class="Banana">Banana</button>
			<button type="button" name="cake" value="Strawberry">Strawberry</button>
		</div>
	</body>
</html>

attributes%20selenium%20webdriver

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.

classname%20selenium%20webdriver

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

tagname%20selenium%20webdriver

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();
	}
}

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.



linktext%20selenium%20webdriver

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();
	}
}

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.

partial_link_text_locator_in_selenium%20selenium%20webdriver

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();
	}
}



Single Inheritance in Selenium and java

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();
	}
}

Good & Reliable Selenium locator

Readability of Locator:

Shorter is better, preferable with a clear, unique name/id which describes this unique element on the page.

Feel free to change the code like classes/names/id's to make the locator and the test-code very understandable and readable.

We should avoid using classes or IDs which has more than one space in its value, if the values have more spaces indirectly means that this locators valus is about to change frequently

Maintainability of locator:

The structure of the locator should be so uniquely good that it does not need to be updated if the location of the element in the page changes.

Unless the functionality changes, you should be able to minimize the updating of locators and or tests.

Speed of locator:

When it comes to locators, speed is also an important aspect; when we design locators, we should give preferences to Id, which are pretty fast compared to other locators.

But we cannot say whether XPath is good or CSS at speed, because of the based on the browser the speed of locating an element in selenium changes.

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions