How To Locate Web Elements In WebDriver

This article will tell you how to locate Html web elements in Selenium WebDriver. There are two methods to locate web elements in Selenium WebDriver as below.

Table of Contents

1. The methods To Locate Html Web Elements In Selenium WebDriver.

findElement(By by): This method return one instance of WebElement class that matches the by condition, you can use the returned object to interact with it. This method returns when the first matched web element has been found. If no one has been found then a NoSuchElementException will be thrown.

findElemets(By by): This method returns a list of WebElement class’s instance that match the by condition. You can iterate the returned list and manipulate the objects in the list. This method returned only after the entire web page has been scanned. If no one match then returns an empty list.

The input parameter( by ) is the locator of how to locate web elements within a webpage. Typical usage of the input parameter( by ) looks like below, you can find the detailed information from the code comments.

 //Initiate a firefox webdriver object first.
 WebDriver fireFoxDriver = new FirefoxDriver();
 
 //Create a By locator to find the webelement using it's id.
 By byId = By.id("password");

 //Find the webpage element using the byId created above.
 WebElement passwordElement = fireFoxDriver.findElement(byId);

2. How To Create The By Locator To Find Web Element In Selenium WebDriver?

The By class in Selenium WebDriver is used to create the web element locator. The By class has 8 static methods that you can use to create the locator as below.

By.id(String id).
By.tagName(String tagName).
By.className(String className).

By.name(String name).
By.xpath(String xpathExpression)
By.linkText(String linkText).

By.partialLinkText(String partialLinkText).
By.cssSelector(String selector).

2.1 By.id(String id).

This can be the best and preferred method to locate a web element because IDs are usually unique.

The string parameter is the web element’s id attribute value.

You can use the returned object to operate the web element whose id equal to the string input parameter.

 //Initiate a firefox webdriver object first.
 WebDriver fireFoxDriver = new FirefoxDriver();
 
 //Create a By locator to locate the webelement using it's id. The webelement's id is "submit".
 By byId = By.id("submit");
 
 //Locate the webelement using the byId created above.
 WebElement submitElement = fireFoxDriver.findElement(byId);

2.2 By.tagName(String name).

Locate the webpage elements whose Html element tag name equals the name parameter’s value.

 //Create a By locator to find the webpage element which DOM tag name is "button"
 By byTagName = By.tagName("button");
 
 //Find the webpage element using the byTagName created above.
 WebElement buttonElement = fireFoxDriver.findElement(byTagName);

2.3 By.className(String className).

This method is used to find Html web elements whose class attribute’s value equals the className parameter value.

 //Create a By locator to find the element whose class attribute's value is "btn btn-info"
 By byClassName = By.className("btn btn-info");
 
 //Find the parent element using className locator above.
 WebElement pElement = fireFoxDriver.findElement(byClassName);
 
 //Use id value to find the child element under the parent element.
 WebElement cElement = pElement.findElement(By.id("submit"));
 
 //Submit the form.
 cElement.submit();

2.4 By.name(String name).

This method is used to find the Html web element whose name attribute’s value equals name parameter value.

 //Create a By locator to find the web element which name attribute's value is "firstname".
 By byName = By.name("firstname");
 
 //Find the web element using the by locator created above.
 WebElement firstNameElement = fireFoxDriver.findElement(byName);
 
 //Input "dev2qa.com" into the found text box.
 firstNameElement.sendKeys("dev2qa.com");

2.5 By.xpath(StringxpathExpression).

This is the most widely used and the easiest method to locate Html web elements in Selenium WebDriver.

The input parameter is a String value of XPath expression.

Below is an example of how to use XPath to locate an Html web element in Selenium WebDriver.

 //Create a By locator to find the web element whose xpath is "//*[@id=\"post-439\"]/div/p[2]/a".
 By byXPath = By.xpath("//*[@id=\"post-439\"]/div/p[2]/a");
 
 //Find the web element using the by locator created above.
 WebElement xpathElement = fireFoxDriver.findElement(byXPath);

If you do not know the web element XPath, you can get the XPath value from a web browser inspector.

I use the google chrome web browser as an example, select the Html web element ( such as a paragraph of text ), click the mouse right button, then click the Inspect menu item in the popup menu list.
It will open the inspector window and focus on the Html web element tag, right-click the Html web element tag, click the Copy —> Copy XPath ( or Copy full XPath ) menu item to copy the Html web element XPath value into the clipboard. You can get a lot of path values ( for example Copy selector, Copy styles ) by clicking other menu items.
You can read the article How To Find Web Element Using Web Browser Inspector to learn more.

2.6 By.linkText(String linkText).

This method is used to create a locator if you know the link text in the HTML anchor(a) tag.

The parameter is a string that is the exact value of link text in the Html anchor(a) tag.

//Create a By locator use the link text in Html anchor(a) tag. This needs an accurate whole string match. 
By byLinkText = By.linkText("Partial Link Test");

2.7 By.partialLinkText(String linkText).

This method is similar to the above method By.linkText(String linkText), the only difference is that it can locate the Html anchor(a) tag by part of the link text in the Html link.
```
 //Create a By locator use part of the link text in html anchor(a) tag. This need only part string match.
 By byPartialLinkText = By.partialLinkText("Link Test");
```