How to Find Elements in Selenium WebDriver
Introduction
Web Elements are the components of a web page, for instance, a button or a checkbox. The following article will walk you through how you can find these web elements in Selenium Web Driver.
The numerous methods by which we can find a web element inside a web page are discussed in detail.
Using CSS Selectors
A CSS Selector is a unique string pattern meant for the purpose of identifying an element by using its properties. It is one of the widest spread methods for locating web elements as it can even locate elements with no ID and name. Though CSS Selectors have multiple formats, they mainly comprise of the common ones like tag, ID, class, attribute, text, etc.
Syntax:
tagName[attributename = value]
Locating CSS selector: Tag and ID
Syntax:
CSS=tag#id
tag = HTML tag of element being accessed.
# = The Hash sign. When we use CSS selector we should use this sign.
Id = The id of the element being accessed.
Locating CSS selector: Tag and ID
Syntax:
CSS=tag.class
tag = HTML tag of element being accessed.
. = The dot sign. When we use CSS selector we should use this sign.
Class = The class of the element being accessed.
Locating CSS selector: Tag and attribute
Syntax:
CSS=tag[attribute = value]
tag = HTML tag of element being accessed.
[] = The square brackets within which a specific attribute and its corresponding value.Value = corresponding attribute value.
Locating CSS selector: Tag, class, and attribute
Syntax:
CSS=tag.class[attribute = value]
Locating CSS selector: inner text
Syntax:
CSS=tag.contains[“inner text”]
Inner text = the inner text of the element.
Using XPath Selector
The Xpath Selector has a more easily understandable format as they mainly use XML. Also, documentation and performance-wise they are way far better when compared to CSS Selectors. Open a browser, type the URL of the page, inspect the element and get its ID. Later execute the following piece of code.
Findelement(By.xpath(“//*[id=’id’]”))
Using ID
Each element in a webpage has a distinct ID and thus using the ID locators is helpful in locating the elements. It is the easiest way to spot an element. Only when certain websites lack unique Ids and have dynamically created Ids, this method cannot be implemented.
driver.findElement(By.id(“<id>”));
Using Name
Very much similar to the previous method, the only difference here is that instead of using ID, we detect an element in a webpage by their name. The selenium web driver will now try to find out an element by the name property instead of ID property.
driver.findElement(By.name(“<name>”));
Using class name
The class attribute is used to locate an ID on a webpage by classifying the attributes via the class property. This method is most suitable for cases where multiple/bulk elements need to be identified at one go in a single instance.
driver.findElement(By.className(“<classname>”));
Using Tag name
The tag name of the element is used to identify and locate the element on a webpage. Most people do not opt for this method and keep this as the least preferred option amidst the other choices.
driver.findElement(By.tagName(“<tagname>”));
I hope this article helped in gaining knowledge about locating elements in a webpage using the Selenium web driver.
Example:
package pom;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
public class WebElements
{
public static WebElement uname(WebDriver driver)
{
return driver.findElement(Loctaers.uname_xpath);
}
public static WebElement pwd(WebDriver driver)
{
return driver.findElement(Loctaers.pwd_xpath);
}
public static WebElement fname(WebDriver driver)
{
return driver.findElement(Loctaers.female_x);
}
public static WebElement sname(WebDriver driver)
{
return driver.findElement(Loctaers.sname_x);
}
public static WebElement mobile(WebDriver driver)
{
return driver.findElement(Loctaers.mobile_x);
}
public static WebElement new_pwd(WebDriver driver)
{
return driver.findElement(Loctaers.new_pwd_x);
}
public static WebElement day(WebDriver driver)
{
return driver.findElement(Loctaers.day_x);
}
public static WebElement year(WebDriver driver)
{
return driver.findElement(Loctaers.year_x);
}
public static WebElement female(WebDriver driver)
{
return driver.findElement(Loctaers.female_x);
}
public static WebElement link(WebDriver driver)
{
return driver.findElement(Loctaers.link_messanger_x);
}
}
