Locators for selenium | xpath locator example | gmail login automation example in java-selenium

XPath

• XPath = XML Path
• It is a type of query language to identify any element on the web page. 
• Syntax
  

  //tagname[@attribute='value']
  

• Writing XPath for complex applications sometimes cumbersome task.
• There are plenty of plug-ins available for chrome to find Xpaths and one such tool is  "Chropath" pulg-in. 
• Take a look at the below image to find relative XPath for "Email or Phone" text input.
  Tap on the image to get better visibility of  content
  

Let's understand with an example, Identify gmail's  "Email or phone" text input with xpath

Tap on the image to get better visibility:

HTML

<input type="email" class="whsOnd zHQkBf" jsname="YPqjbf" autocomplete="username" spellcheck="false" tabindex="0" aria-label="Email or phone" name="identifier" value="" autocapitalize="none" id="identifierId" dir="ltr" data-initial-dir="ltr" data-initial-value="">

from the above HTML,  tagname is input  | type is an attribute  | value is email

Xpath to locate the "Email or phone" is

//input[@type='email']

Java-selenium identifies the element with the following xpath locator

driver.findElement(By.xpath("//input[@id='identifierId']"))

Watch this ~4 min video tutorial example for automating gmail login process in which use xpath locators for "Email or Phone" or "Password"  or "Next" buttons. 

java-selenium code to identify gmail login using xpath locators
xpathLocatorGmailLoginDemo.java

//x-path locator example

package selenium.locators.examples;
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;

public class xpathLocatorGmailLoginDemo {

 public static void main(String[] args) {
  
  WebDriver driver;
  
  System.setProperty("webdriver.chrome.driver", "D:\\006_trainings\\chromedriver.exe");
  System.setProperty("webdriver.chrome.silentOutput", "true");
  
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  
  driver.navigate().to("https://mail.google.com/");
  
  //locate "Email or Phone" text box input using "xpath" and enter email 
  driver.findElement(By.xpath("//input[@id='identifierId']")).sendKeys("java.selenium2021@gmail.com");
  
  // locate "Next" button and click 
  driver.findElement(By.xpath("//span[@class='RveJvd snByac']")).click();
  
  driver.manage().timeouts().implicitlyWait(3000, TimeUnit.SECONDS);
  
  //locate "Enter your password" text box input using "xpath" and enter password
  WebElement elePassword=driver.findElement(By.xpath("//input[@name='password']"));
  elePassword.sendKeys("JavaSelenium2021");
  
  elePassword.sendKeys(Keys.TAB); 
  elePassword.sendKeys(Keys.TAB);
  
  // locate "Next" button and click 
  driver.findElement(By.xpath("//span[contains(text(),'Next')]")).click();
  
  //driver.close();
 }
}

Locators for selenium | tagName locator example | display anchor tag "a" texts and images alternative texts for amazon india website using java-selenium

Hi,

In this post, you will see demonstration of "tagName" locator usage. 

"tagName"  is one of the 8 locators supported by selenium.

For instance, display all the anchors "a" or "images" alternative texts on amazaon india page   @ https://www.amazon.in/

selenium identifies the "a" and "image" tags with the following java statements.

List<WebElement> links = driver.findElements(By.tagName("a"));

List<WebElement> images = driver.findElements(By.tagName("img"));

tagNameLocatorDemo.java

package selenium.locators.examples;
import java.util.List;

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

public class tagNameLocatorDemo {

 public static void main(String[] args) {
  
  WebDriver driver;
  
  System.setProperty("webdriver.chrome.driver", "D:\\006_trainings\\chromedriver.exe");
  System.setProperty("webdriver.chrome.silentOutput", "true");
  
  driver = new ChromeDriver();
  
  driver.navigate().to("https://www.amazon.in/");
  driver.manage().window().maximize();
  
  // storing anchor - a tags in links List<WebElement> variable
  List<WebElement> links = driver.findElements(By.tagName("a"));
  
  // printing the size of list
  System.out.println("Size of list="+links.size());
  
  // print the top 5 Text of anchors 
  System.out.println("-- Printing top 5 anchors text--");
  for(int i=0;i<links.size();i++) {
   System.out.println(links.get(i).getText());
   if(i==4)
    break;
  }
  System.out.println("------------------------------------");
  
  // storing images - img tags in images List<WebElement> variable
  List<WebElement> images = driver.findElements(By.tagName("img"));
  
  // foreach loop with WebElements 
  // if wants to break the loop on a particular index go with regular loop
  System.out.println("-- Printing images alternative texts --");
  for(WebElement w2 : images) {
   System.out.println(w2.getAttribute("alt"));
  }
  
 }
}

Watch this ~ 1.5 min video for end-to-end example execution

Locators for selenium | className locator example | gmail login automation example in java-selenium

Hi,

In this post, you will see demonstration of "className" locator usage. 

"classname" is one of the 8 locators supported by selenium, using it one can navigate to target page by performing click action(s).

For instance, Login to gmail  @ https://mail.google.com/
Let's see how to identify the name locators of login elements for gmail web application.

Email or Phone input text input HTML with "name" locator 

<input type="email" class="whsOnd zHQkBf" jsname="YPqjbf" autocomplete="username" spellcheck="false" tabindex="0" aria-label="Email or phone" name="identifier" value="" autocapitalize="none" id="identifierId" dir="ltr" data-initial-dir="ltr" data-initial-value="" badinput="false" aria-invalid="false" xpath="1">

selenium identifies the above input element(Email or Phone) using "className" locator with the following java statement. 

driver.findElement(By.className("whsOnd")).sendKeys("java.selenium2021@gmail.com");

Tap on the image to get better visibility: 

To avoid StaleElementReferenceException for other elements locators having the same class name ,  I am taking xpaths to find them, for instance , password has the same className i.e., class="whsOnd zHQkBf"  so instead of having className for password taking xpath //input[@name='password']

classNameLocatorDemo.java

package selenium.locators.examples;

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;

public class classNameLocatorDemo {

 public static void main(String[] args) {
  
  WebDriver driver;
  
  System.setProperty("webdriver.chrome.driver", "D:\\006_trainings\\chromedriver.exe");
  System.setProperty("webdriver.chrome.silentOutput","true" );
  
  driver = new ChromeDriver();
  
  driver.navigate().to("https://mail.google.com/");
  driver.manage().window().maximize();
  
  //finding "Email or Phone" input text by clasName locator and enter value
  driver.findElement(By.className("whsOnd")).sendKeys("java.selenium2021@gmail.com");
  
  // click on "Next" button - This is an xpath example that will be covered in later sessions
  driver.findElement(By.xpath("//span[@class='RveJvd snByac']")).click();
    
  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
  
  // locate "Enter your password" text input with xpath locator and enter password say --> JavaSelenium2021
  // If we take className for this input we will end up with 
  // Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: 
  // stale element reference: element is not attached to the page document
  
  WebElement elePassword=driver.findElement(By.xpath("//input[@name='password']"));
  elePassword.sendKeys("JavaSelenium2021");
  
  elePassword.sendKeys(Keys.TAB); 
  elePassword.sendKeys(Keys.TAB); 
   
  // click on "Next" button - This is again an xpath example. 
  driver.findElement(By.xpath("//span[contains(text(),'Next')]")).click();
  
  //close the driver
  //driver.close();
 }
}

Locators for selenium | name locator example | gmail login automation example in java-selenium

Hi,

In this post, you will see the demonstration of "name" locator usage. 

"name" is one of the 8 locators supported by selenium, using it one can navigate to target page by performing click action(s).

For instance, Login to gmail  @ https://mail.google.com/
Let's see how to identify the name locators of login elements for gmail web application.

Email or Phone input text input HTML with "name" locator 

<input type="email" class="whsOnd zHQkBf" jsname="YPqjbf" 

       autocomplete="username" spellcheck="false" tabindex="0" 

       aria-label="Email or phone" name="identifier" value="" autocapitalize="none" 

       id="identifierId" dir="ltr" data-initial-dir="ltr" data-initial-value="">

Enter your password text input HTML with "name" locator

<input type="password" class="whsOnd zHQkBf" jsname="YPqjbf" 

       autocomplete="current-password" spellcheck="false" tabindex="0" 

       aria-label="Enter your password" name="password" autocapitalize="off" 

       dir="ltr" data-initial-dir="ltr" data-initial-value="">

Click on the image to get best view

selenium identifies the above input elements(username and password for gmail) using "name" locator with the following java statements. 

driver.findElement(By.name("identifier")).sendKeys("java.selenium2021@gmail.com");

WebElement elePassword=driver.findElement(By.name("password"));
elePassword.sendKeys("JavaSelenium2021");
Take a look at the following example or watch this 1 min no voice video tutorial for end-to-end demo understanding and execution. 

nameLocatorDemo.java

//name locator demo
package selenium.locators.examples;

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;

public class nameLocatorDemo {

 public static void main(String[] args) {
  
  WebDriver driver;
  
  System.setProperty("webdriver.chrome.driver", "D:\\006_trainings\\chromedriver.exe");
  System.setProperty("webdriver.chrome.silentOutput", "true");
  
  driver = new ChromeDriver();
  driver.navigate().to("https://mail.google.com/");
  
  driver.manage().window().maximize();
  
  // locate "Email or Phone" text input with "name" locator and enter email say --> java.selenium2021@gmail.com

  driver.findElement(By.name("identifier")).sendKeys("java.selenium2021@gmail.com");
  
  // click on "Next" button - This is an xpath example that will be covered in later sessions
  driver.findElement(By.xpath("//span[@class='RveJvd snByac']")).click();
  
  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

  //locate "Enter your password" text input with "password" locator and enter password say --> JavaSelenium2021
  WebElement elePassword=driver.findElement(By.name("password"));
  elePassword.sendKeys("JavaSelenium2021");
  
  elePassword.sendKeys(Keys.TAB); 
  elePassword.sendKeys(Keys.TAB); 
   
  // click on "Next" button - This is again an xpath example. 
  driver.findElement(By.xpath("//span[contains(text(),'Next')]")).click();
  
  //close the driver
  //driver.close();
 }
}

- Sadakar Pochampalli

Locators for selenium | id locator example | facebook login automation example in java-selenium

Hi,

In this post, you will see the demonstration of "id" locator usage. 

"id" is one of the 8 locators supported by selenium, using it one can navigate to target page by performing click action.

For instance, Login to facebook site @ http://www.facebook.com
Let's see how to identify the ids of login elements for facebook web application.

"Email or Phone" text input HTML

<input type="email" class="inputtext login_form_input_box" name="email" id="email" data-testid="royal_email">

"Password" text input HTML

<input type="password" class="inputtext login_form_input_box" name="pass" id="pass" data-testid="royal_pass">

"Log In" button HTML

<input value="Log In" aria-label="Log In" data-testid="royal_login_button" type="submit" id="u_0_b">

The following statements identifies the above 3 elements using id attribute on the page.

 driver.findElement(By.id("email")).sendKeys("test123@gmail.com");

 driver.findElement(By.id("pass")).sendKeys("testPassword");
  driver.findElement(By.id("u_0_b")).click();.

Take a look at the following example or watch this ~2 min no voice video tutorial for end-to-end execution. 

idDemo.java

package selenium.locators.examples;

import java.util.concurrent.TimeUnit;

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

//id demo
public class idDemo {

 public static void main(String[] args) {
  
  WebDriver driver;
  
  System.setProperty("webdriver.chrome.driver", "D:\\006_trainings\\chromedriver.exe");
  System.setProperty("webdriver.chrome.silentOutput", "true");
  
  //chrome driver object
  driver=new ChromeDriver();
  
  driver.get("https://www.facebook.com");
  
  //maximizing the URL
  driver.manage().window().maximize();
  
  //finding email element by "id" locator and entering email
  driver.findElement(By.id("email")).sendKeys("test123@gmail.com");
  
  //finding pass element by "id" locator and entering password
  driver.findElement(By.id("pass")).sendKeys("testPassword");
  
  //finding "Login" element by "id" locator and performing click action
  driver.findElement(By.id("u_0_b")).click();
  
  //driver.manage().timeouts().implicitlyWait(20000, TimeUnit.SECONDS);
  
  //driver.quit();
  
 }
}

- Sadakar Pochampalli