Selenium-5 || Locating web elements using various type of Locators.

Locators are the unique identity of the web elements, using which Selenium can identify and search the element on a web page to perform some specific action.

As we all know a web page is a structured code of Html. So, these locators are actually properties of the HTML TAGS and its attributes.



Types of Locators

  • id
  • className
  • linkText
  • partialLinkText
  • tagName
  • cssSelector
  • xpath
Steps for Locators
Steps for Locators
Get HTML Code and Tags of a web page using Console Panel of Browser

To get the HTML Code of a web page, most simple way is to just right-click on a web page and click on “Inspect Element” in the right-click menu. It will open Console panel of the browser, where we could see entire HTML code for the current web page.

The same way we could get the HTML Tag of an individual web element. Just right-click on a specific web-element and click on “Inspect element”.

WebBrowser Console
web browser Console

Selenium Tutorials:

Window Handling: 

Test Frameworks: 

Related Links: 


Steps to locate HTML tag and properties

  1. Launch the Chrome Browser and URL “https://www.gmail.com”
  2. Right click on the web element “Email or phone” text field and click on “Inspect Element” option from the right-click menu.
  3. We can see the HTML tag of above web element as <input > type
  4. We can use these property values like id, name, class present in this particular tag for coding.

In the Selenium, these locators have been used to locate the element and perform the actions. As mentioned in the first image on this page, it is a three-step process. A simple example is given below:

  1. Step #1, Launch Chrome Browser and URL using WebDriver
  2. Step #2, Locate the web element using findElement method of WebDriver instance.
  3. findElement method uses By.locator() as an argument.
  4. Word locator in the above statement can be replaced with id, name, class etc.
  5. The user can store a reference to the above elements in a variable of WebElement.
  6. Step #3, Now we can perform multiple actions like click(), clear(), sendKeys() etc using WebElement variable.

Code Example

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author ashok.kumar
 *
 */
public class Sample {
	public static void main(String[] args) throws InterruptedException {
		
		// Step #1 Lanuch the Web Browser and respective URL
		System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		driver.get("https://www.gmail.com");
		
		// Step #2 Locate the webelement using findElemnt method via ID locator
		// Also, the reference of the element get stored in WebElement object
		
		System.out.println("Access 'UserName' text field using ID locator");
		WebElement userNameElement=driver.findElement(By.id("identifierId"));
		
		// Step #3 Perform action on specific webelement
		// Click the text field and enter email id
		userNameElement.click();
		userNameElement.sendKeys("ashu.kumar940@gmail.com");
		
		// Step #4 Locate the 'pagecontent' text using CLASS locator
		WebElement contentElement= driver.findElement(By.className("jXeDnc"));
		System.out.println("\nGetting on screen text using CLASS locator ");
		System.out.println(contentElement.getText());
		
		
		// Step #5 Locate the 'pagecontent' text using LINKTEXT locator
		
		System.out.println("\nGetting link text using LINKTEXT locator");
		WebElement helpElement= driver.findElement(By.linkText("Help"));
		System.out.println("Link Name: "+helpElement.getText());
		helpElement.click();
		}
	}
}

Note:

  1. Make sure that the string value of an HTML tag property which we are using while coding should be identical on that web page either it is id, name or class name.
  2. LinkText locator can be used only for the text enclosed by anchor tag <a> Help </a>.
  3. In some cases, the spacing between the string value not allowed.
  4. linkText and partialLinkText are the similar types of locators. Both methods use link text as an argument. In partialLinkText we could use some part of the link text.
Using TagName as a locator

TagName locator can be used where a unique tag is present on the HTML code. Another use of this locator is to extract the count of the similar type of elements on a web page. We can iterate through multiple elements of the same type.

For example, if you need to extract a total number of links present on the page which is appearing inside anchor tag <a> </a>.

public static void main(String[] args) throws InterruptedException {
  
  // Step #1 Lanuch the Web Browser and respective URL
  System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
  WebDriver driver=new ChromeDriver();
  driver.get("https://www.gmail.com");

System.out.println("\nGetting the count of all anchor tags  using TAGNAME locator");
  List linkTags=driver.findElements(By.tagName("a"));
  System.out.println("Total Links: "+linkTags.size());
  
  System.out.println("Name of all links:");
  for (WebElement webElement : linkTags) {
   System.out.println(webElement.getText());
  }



cssSelector

As we know that the above examples are very simple to use and can be used directly on a web page having unique string values of the web elements. But can be applicable only on few specific attributes of HTML Tags like id, class, tag name, link text etc. There are many situations where we have to use other attributes to identify a web element.

<input type=”email” class=”whsOnd zHQkBf” aria-label=”Email or phone” id=”identifierId”>

driver.findElement(By.cssSelector(“input[type=’email’“));

Sometimes we can’t use a single value to identify a web element. We have to check multiple conditions or multiple attributes of the same HTML Tag. In that case, we need a CSS Selector method.

Code Example
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author ashok.kumar
 *
 */
public class cssSelector {
	public static void main(String[] args) throws InterruptedException {
		
		System.out.println("Step #1 Lanuch the Web Browser and respective URL");
		System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		driver.get("https://www.gmail.com");
		
		System.out.println("\nStep #2 Locate the webelement via 'type' attribute using cssSelector");
		WebElement userNameElement=driver.findElement(By.cssSelector("input[type='email'"));
		userNameElement.click();
		userNameElement.sendKeys("allinoneblogs@gmail.com");
		
		System.out.println("\nStep #3 Locate same webelement via 'aria-label' attribute for same action");
		WebElement nameElement=driver.findElement(By.cssSelector("input[aria-label='Email or phone'"));
		System.out.println("Clear the text field.");
		nameElement.clear();
		System.out.println("Again type email ID.");
		userNameElement.sendKeys("selenium@gmail.com");
	}
}
More on cssSelector

There are two special characters used while using cssSelector method.

#(hash) – To locate web element by ID

. (dot) –  To locate web element by class

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author ashok.kumar
 *
 */
public class cssSelector2 {
	public static void main(String[] args) throws InterruptedException {
		
		System.out.println("Step #1 Lanuch the Web Browser and respective URL");
		System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		driver.get("https://www.gmail.com");
		
		System.out.println("\nStep #2 Locate the webelement via '#' symbol using ID attribute");
		WebElement userNameElement=driver.findElement(By.cssSelector("#identifierId"));
		userNameElement.click();
		userNameElement.sendKeys("allinoneblogs@gmail.com");
		
		System.out.println("\nStep #3 Locate webelement via '.' symbol using class attribute");
		WebElement nextElement=driver.findElement(By.cssSelector(".qhFLie"));
		nextElement.click();
	}
}
Applying cssSelector on multiple attributes

Sometimes we come across the situation where we observe that multiple web elements contain same class/id/type or tag name. In that case, we have to use multiple attribute value to locate a single web element. In below example, we can see that there are two buttons having the same HTML tag and type.

If we write below code, the compiler will always click on the first instance of the web element.

driver.findElement(By.cssSelector(“input[type=’submit’]”));

But, what if a user has to access second instance or some specific instance of web element? So we have to use value and type attribute as mentioned in below example:

driver.findElement(By.cssSelector(“input[type=’submit’][value*=’Feeling Lucky’]”));

Note: We can see that we have used * (asterisk) symbol. It behaves like contains the keyword. In the above code compile will locate an element which has below properties:

  1. HTML tag name should be input;
  2. Value of ‘type’ attribute should be submit;
  3. And, the value of ‘value’ attribute should contain the text “Feeling Lucky
Code Example
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author ashok.kumar
 *
 */
public class cssSelector3 {
	public static void main(String[] args) throws InterruptedException {
		
		System.out.println("Step #1 Lanuch the Web Browser and respective URL");
		System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
		WebDriver driver=new ChromeDriver();
		driver.get("https://www.google.com/");
		
		System.out.println("\nStep #2 Try to Locate the webelement based on 'type' attribute");
		WebElement buttonElement=driver.findElement(By.cssSelector("input[type='submit']"));
		buttonElement.click();
		System.out.println("First instance of button get clicked.");
		
		System.out.println("\nStep #3 Now Try to Locate the webelement based on 'type' and 'value' attributes");
		WebElement buttonElement2=driver.findElement(By.cssSelector("input[type='submit'][value*='Feeling Lucky']"));
		buttonElement2.click();
		System.out.println("This time second instance of button get clicked.");
	}
}






1663total visits,3visits today

Leave a Reply

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