Overview

In this post we will discuss more about how to find elements on a web page using Selenium webdriver.By is the locating mechanism to find element / s  on a web page using locators.

We can classify them into two categories:

1.Structure-based ( rely on the structure of the page DOM example By.xpath , CSS
2.Attributes-based( locators that relies on the attributes of elements to locate them example By.id , By.name etc)

We will look at close some of the locators supported by selenium.

Id : By.id()

Consider the sample html snippet for collecting email address :

<input type=”text” name=”signup” id=”form_signup” placeholder=”Email Address” class=”form-control gem-required” data-label=”Email” />

we can use the below code to locate with id:

WebElement element = driver.findElement(By.id(“form_signup”));

Name : By.name()

We can identify the same element also by using name as shown below:

WebElement element = driver.findElement(By.name(“signup”));

The most easiest way is to use View source of the web page . However we can use Firebug , DOM Explorer or in built developer tools  of the browser to find out the different attributes of the element on the page. DOM stands for Document Object Model. DOM is convention for representing objects in HTML documents.

Please note that ID would be unique on the webpage .

TagName : By.tagName()

We can also use tag name for locating element on page.For example

WebElement inputTagElement = driver.findElement(By.tagName(“input”));

Using tagname is very generic and you may result in one or more web elements for a particular tag .In such a case we can use findElements() as shown below:

List<WebElement>  inputTagElements  = driver.findElements(By.tagName(“input”));

In the above example we may get 0 or more elements to the List.

LinkText : By.linkText()

The html elements on a webpage are represented using anchor tags .Lets us consider a simple anchor tag as shown below:

<a href=”/find?FORM=LH4″ h=”ID=SERP,5025.1″>TestingDocs</a>

The linktext here is “TestingDocs” and we can use the By.linkText() to identify the web element as shown below:

WebElement element = driver.findElement(By.linktext(“TestingDocs”));

Partial LinkText : By.partialLinkText()

Partial link text helps to locate element with hyperlink texts which matches partially. If we specify a partial link text that has multiple matches, only the first match will be accessed.We can use this if we are not sure about the exact full link text.We have changed the anchor sightly for this example to make it clear.

<a href=”/find?FORM=LH4″ h=”ID=SERP,5025.1″>Testing Docs</a>

WebElement element = driver.findElement(By.linktext(“Testing”));

note that if there are multiple matches then web driver will return only the first match if we use findElement().

ClassName : By.className()

Lets get some visual thing here. We will open Bing search page and get the class name for the search box in the DOM explorer as shown in the picture.

 

Code :

WebElement element = findElement(By.className(“b_searchbox”));

cssSelector : By.cssSelector()

CSS locator mechanism can be used to identify web elements. CSS executes faster than XPath. CSS locator uses CSS selectors to find the elements in the webpage.

For example, the following statement first locates a web element satisfying the selector pattern

div#searchBox {text-align: center;}

WebElement search = driver.findElement(By.cssSelector(“div#searchBox”));

XPath : By.xpath()

We all know what SQL is for database. Same way Xpath is for XML .XPath is the standard navigation tool for XML.  It is a very powerful language to express which element to target.

The root element is identified by // . We can find elements with XPath by using Absolute Path  or  Relative Path.

For example to find all links on a webpage using xpath:

List<WebElement> elements =  driver.findElements((By.xpath(“//a”)));