Basics of Locators Selenium

Basics of locators and its usage in Selenium 3.0

Basics of locators and its usage in Selenium 3.0

In this tutorial, we will discuss the basics of locators and its usage in Selenium 3.0. We would be discussing the following topics in this tutorial:

  •    What are locators?
  •    Different types of Locators
  •    How to use Locators in selenium

This is chapter 16 of the Selenium Tutorials being developed by Techcanvass. These tutorials are categorized into Java, Selenium, TestNG, Automation Framework and Grid.

 

What are locators?

Locators provide a mechanism to access the HTML elements on a web page. Once we locate an element on any web page, we can write test cases to execute on them.

For example, If we would like to test a text box with test data, locators help us in inserting these test data in text boxes. We will see that in details in the subsequent sections of this tutorial.

Types of Locators

We can access the HTML elements of a page in multiple ways as shown below.

Locator : ID

It is a unique reference for a web object that the developer sets while writing the code. The ID is no doubt the easiest way to locate an element on a web page.

Example :  <input id=”techcanvass” class=”required” type=”text”/>

We can check the ID or value of any locator by right clicking on any field on the web page and selecting “Inspect”.

Inspect Element

Please note that sometimes IDs may not be unique on a web page or they might not even be available. In these cases, you have to try other types of locators.

We can use the following element to locate the element using ID:

WebElement element = driver.findElement(By.id(“techcanvass”));

Note: We will explain the code in the last section of this tutorial

Locator: Name

Every form has input fields with unique names and we can use these names to locate elements. Name of an element is provided in the HTML tag for the field.

Example:  <input id=”techcanvass” name=”admin” class=”required”  type=”text”/>

We can locate this element in Selenium using the following code:

WebElement locator = driver.findElement(By.name(“admin”));

Please note that web pages might have names of the fields getting generated dynamically and in that case this technique will not work.

Locator: Link Text

It is a good way to find/locate the links on a page. It is used to select the link element which contains the matching text.

Example: <a href=”http://www.techcanvass.com“>Click Here</a>

We can locate this element in Selenium using the following code:

WebElement link = driver.findElement(By.linkText(“Click Here”));

Locator: Partial Link Text

There is a difference between link text and partial link text. For locating element by link text, we need to use full word ‘Click Here‘. But in case of locating element by partial link text, we can locate element by partial word ‘Click’ too.

We can locate this element in Selenium using the following code:

WebElement plink = driver.findElement(By.PartialLinkText(“Click”));

Locator: Tag Name

We can also locate elements by using Tag names as defined in DOM (Document object Model). Locating Element By Tag Name is not too much popular because in most of cases, we have better alternatives of element locators.

 

Locator: CSS Class

CSS Class locator uses the CSS class of an element on the web page to locate. You can find the CSS class of an element by inspecting an element as shown in the diagram below:

CSS Class

We can locate this element in Selenium using the following code:

WebElement element =driver.findElement(By.className(“techcanvass ”));

Locator: CSS Selector

CSS Selector is one of the most widely used locators. It uses the syntax of CSS style sheets as used in HTML also. You can find out the CSS selector for every element by inspecting the element.

In the inspect panel, point your mouse to the element and you will see the CSS selector in the upper panel as indicated in the image below:

CSS SELECTOR

In the diagram above, the CSS Selector for Text Box for Name is input#txtName.

We can locate this element in Selenium using the following code:

WebElement element = driver.findElement(By.cssSelector(“input#txtName”));

 

Locator: XPATH

XPath is another technique for locating an element. XPath is a W3C recommendation and uses XML document syntax for locating elements. It defines the path to any element using XML path language (that’s why it is known as XPATH).

FirePath is a simple tool to check the XPATH of any element. Firepath can be installed as an extension or add-on to the browsers.

Example:

How does XPATH work? Let’s take an example of a basic HTML block:

<html>
<body>
There is unexpected error. Please wait for 10 seconds to be re-directed automatically or click on<a href=”http://techcanvass.com/index.aspx”>Techcanvass Home Page</a>.</p>
</body>
</html>

We can access the link http://techcanvass.com/index.aspx by using the XPATH as shown below:

/html/body/a

This is an example of absolute XPATH which locates the element from the root. However, the absolute XPATH can be an issue, if the basic structure of the entire page changes.

Relative XPATH can also be used to locate the elements, which will take care of the above problem. Relative XPATH starts from the middle of the document. It starts with // instead of /.

We can see the relative XPath of any element in Firepath as shown below:

Relative XPath in Firepath

We can locate the elements using XPATH as follows:

WebElement element= driver.findElement(By.xpath(“HTML/head/body/table/tr/td”));

Having understood the basics of locators, let’s focus on using them in our automation scripts.

How do we use locators in Selenium scripts?

Using the locators in Selenium scripts, is a two steps process:

  • Locating the elements using a locator type and assigning it to a variable
  • Writing script to test

Locating and referencing the element

We use WebElement object type to store the reference to any element on the web page, which is located using a locator.

<input id=”techcanvass” class=”required” type=”text”/>

In the case of a text box as shown above, the ID of the text box is “techcanvass” (Not a good naming convention, but that’s a subject of some other post). How did we assign it to a variable so that we can write test scripts for the same?

WebElement element = driver.findElement(By.id(“techcanvass”));

driver is the web driver of the browser, we are writing this script for. findElement is the method to find the element on the page based on the locator.

Notice the By.id. This is to be read as locate by ID.

findElement has methods to locate element using all the types of locators as discussed above. For example, to use the CSS class locator, the syntax would be:

WebElement element = driver.findElement(By.className(“techcanvass ”));

//because the class name is also techcanvass.

Example to showcase locator’s use

Let’s now look at an example to understand the use of locators. In this example, I am going to locate the text box on REDIFFMAIL SIGN UP page using two different locators. Once it is located, I will insert some text in the text box.

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.WebDriverWait;

public class LocatorTest {

public static void main(String[] args) throws InterruptedException {

System.setProperty(“webdriver.chrome.driver”, “E:\\Selenium 3\\chromedriver.exe”);
WebDriver driver;
driver = new ChromeDriver();

driver.get(“https://register.rediff.com/register/register.php?FormName=user_details”);

//Finding element using Name locator
//WebElement emailtxtbyname = driver.findElement(By.name(“logine5694a6d”));

//Finding element using XPATH locator
WebElement emailtxtbyXPath = driver.findElement(By.xpath(“.//*[@id=’tblcrtac’]/tbody/tr[3]/td[3]/input”));

//Finding element using CSSSelector locator
WebElement emailtxtbyCSS = driver.findElement(By.cssSelector(“#tblcrtac>tbody>tr>td>input”));

//emailtxtbyname.sendKeys(“michelle.george-by name”);
String UserName = “Michelle george”;

//emailtxtbyname.sendKeys(UserName + “by Name”);

emailtxtbyXPath.sendKeys(UserName + “by Xpath”);
emailtxtbyXPath.clear();
//driver.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS) ;
//emailtxtbyXPath.wait(500);

emailtxtbyCSS.sendKeys(UserName + “by CSS”);

driver.close();

driver.quit();

}

}

Copy and paste this code in your IDE and run it for yourself. Please change the Chromedriver path on your machine.

ALSO READ: Writing your first automation script in SELENIUM 3.0

About Techcanvass

Techcanvass is a software training organization and offers certification courses in Business Analysis and automation testing. Our courses in selenium are:

Selenium Certification (CP-SAT) Training

Selenium Certification Course

 

 

 

 

 

Selenium Training with Java

Selenium Training Course

Leave a Reply

Your email address will not be published. Required fields are marked *