24 – Element Locators for Selenium
Selenium Class 24: Element Locators for Selenium
Note:
1) Important task in Function Test Automation is Object Identification or Locating Element.
2) No Front-end object/element reference is required for Database Testing.
What is Element Locator?
- It is an address that identifies a web element uniquely within the web page
- Selenium supports 8 locators to identify elements in web pages.
id,
name,
className,
tagName,
linkText,
partialLinkText
cssSelector,
xpath
Why we need to use different locators for elements?
- Developers may not provide all Locators for every element
- Some Locators are not applicable for every element
Ex: linkText, partialLinkText are only for Link Elements
- Some locators may be duplicated
How to inspect Elements?
Element Locators are same for all browsers, so we can use any browser to inspect elements,
1) Mozilla Firefox:
Developer Tools – Built-in Feature
Firebug and FirePath Plug-in (need to download and install)
2) Google Chrome
Developer Tools (F12) – Built-in Feature
3) Microsoft Edge
Developer Tools (F12) – Built-in Feature
Element Locators for Selenium
1) id
1st Syntax:
driverObject.WebDriverCommand(By.ElementLocator(“Value”)).WebDriverCommand(Paramer optional);
Example:
System.setProperty(“webdriver.chrome.driver”, “E:/chromedriver.exe”);
WebDriver driver = new ChromeDriver();
driver.get(“https://www.gmail.com/”);
driver.manage().window().maximize();
driver.findElement(By.id(“identifierId”)).sendKeys(“India123@gmail.com”);
2nd Syntax:
WebElement elementName = driverObject.WebDriverCommand(By.ElementLocator(“Value”));
elementName.WebDriverCommand(Paramer optional);
Example:
WebElement EmailBox = driver.findElement(By.id(“identifierId”));
EmailBox.sendKeys(“India123@gmail.com”);
Thread.sleep(3000);
String val = EmailBox.getAttribute(“value”);
System.out.println(val);
Thread.sleep(3000);
EmailBox.clear();
Note: Whenever we want to perform a sngle operation then choose 1st syntax, for multiple operations on the same element choose 2nd syntax, but no restriction to use those syntaxes.
Example:
driver.findElement(By.id(“identifierId”)).sendKeys(“India123@gmail.com”);
Or
WebElement EmailBox = driver.findElement(By.id(“identifierId”));
EmailBox.sendKeys(“India123@gmail.com”);
2) name
1st Syntax:
//Identifying an Element and conducting operation on the element
driverObject.WebDriverCommand/findElement(By.ElementLocator/name(“locator value”)).WebDriverCommand(parameter optional);
2nd Syntax:
//Identify an Element
WebElement elementName = driverObject.WebDriverCommand/findElement(By.ElementLocator/name(“locator value”));
//Perform Operation on the Element
elementName.WebDriverCommand(parameter optional);
Example1:
driver.findElement(By.name(“identifier”)).sendKeys(“India123@gmail.com”);
Example2:
WebElement abcd = driver.findElement(By.name(“identifier”));
abcd.sendKeys(“India123@gmail.com”);
3) className
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/className(“locator value”)).WebDriverCommand(parameter optional);
Example:
driver.findElement(By.className(“gb_P”)).click();
4) tagName
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/tagName(“locator value”)).WebDriverCommand(parameter optional);
Example:
driver.findElement(By.tagName(“input”)).sendKeys(“India123@gmail.com”);
5) linkText
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/linkText(“locator value”)).WebDriverCommand(parameter optional);
Example:
driver.findElement(By.linkText(“Gmail”)).click();
6) partialLinkText
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/partialLinkText(“locator value”)).WebDriverCommand(parameter optional);
Example:
driver.findElement(By.partialLinkText(“mag”)).click();
7) cssSelector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/cssSelector(“locator value”)).WebDriverCommand(parameter optional);
Example:
driver.findElement(By.cssSelector(“#gbw > div > div > div.gb_pe.gb_R.gb_Rg.gb_Ig > div:nth-child(1) > a”)).click();
8) xpath
XPath is defined as XML path. It is a syntax or language for finding any element on the web page using XML path expression.
Syntax:
driverObject.WebDriverCommand/findElement(By.ElementLocator/xpath(“locator value”)).WebDriverCommand(parameter optional);
xpath:
//[@id=”gbw”]/div/div/div[1]/div[1]/a
//[@id=’gbw’]/div/div/div[1]/div[1]/a
xpath = //tagName[@attribute=’value’]
Ex: driver.findElement(By.xpath(“//a[@id=’gb_70′]”)).click();
Example:
driver.findElement(By.xpath(“//*[@id=’gbw’]/div/div/div[1]/div[1]/a”)).click();