Element Locators in Webdriver

WebElements& Locators

In WebDriver automation everything related with web elements as it is web application automation tool.

WebElement is nothing but, all DOM objects appeared in the web page. To do operations with DOM objects/ web elements we need to locate those elements exactly.

WebElement element=driver.findElement(By.<Locator>);

As we've seen in the above statement we have to specify some locator to identify web element.

'By' is the class, in that class we have different static methods to identify elements. Those are,

    By.className

    By.cssSelector

    By.id

    By.linkText

    By.name

    By.partialLinkText

    By.tagName

    By.xpath

By.className

See below example

Example:1

      <td class=name> </td>

WebElement td=driver.findElement(By.className("name"));

By.cssSelector

CSS selector is the one the best ways to locate some complex elements in the page.

See below some examples for easy understanding

Example:1

     <td class=name> </td>

driver.findElement(By.cssSelector("td.name"));     In css selector we can denote class name with dot (.)

                             (or)

driver.findElement(By.cssSelector("[class=name]"))    We can specify the attribute name and its value.

Example:2

    <input id=create>

driver.findElement(By.cssSelector("#create")).sendKeys("test");    shortcut for denoting id is #

                                  ( or )

driver.findElement(By.cssSelector("[id=create]")).sendKeys("test")

Example:3

    <td value=dynamicValue_13232><td>

driver.findElement(By.cssSelector("[value*=dynamicValue]"))     * is for checking contained value

(here value contains dynamicValue)

Example:4

              <div value=testing name=dynamic_2307></div>

driver.findElement(By.cssSelector("[value=testing][name*=dynamic]")); 

If you want to include more attribute values in locator criteria use css locator as above.

By.id

See below example

Example:1

      <td id=newRecord> </td>

WebElement td=driver.findElement(By.id("newRecord"));

here we can specify the id attribute value directly.

By.linkText

See below example

Example:1

      <a onclick=gotonext()>Setup </a>

WebElement link=driver.findElement(By.linkText("Setup"));

This is the best locator for locating links (anchor tags) in your web page.

By.partialLinkText

See below example

Example:1

      <a onclick=gotonext()>very long link text </a>

WebElement link=driver.findElement(By.partialLinkText("very"));

                               (or)

WebElement link=driver.findElement(By.partialLinkText("long link"));

This is the locator for locating links (anchor tags) using partial text it contains .

By.name

See below example

Example:1

      <td name=WebDriver> </td>

WebElement td=driver.findElement(By.name("WebDriver"));

By.tagName

See below example

Example:1

      <td class=name> </td>

WebElement td=driver.findElement(By.tagName("td"));

If you want to get the entire text of web page use below logic.

driver.findElement(By.tagName("body")).getText()

By. XPath

XPath is the language used for locating nodes in an XML document. As HTML can be an implementation of XML (XHTML), Selenium users can leverage this powerful language to target elements in their web applications. XPath extends beyond (as well as supporting) the simple methods of locating by id or name attributes, and opens up all sorts of new possibilities such as locating the third checkbox on the page.

One of the main reasons for using XPath is when you don’t have a suitable id or name attribute for the element you wish to locate. You can use XPath to either locate the element in absolute terms (not advised), or relative to an element that does have an id or name attribute. XPath locators can also be used to specify elements via attributes other than id and name.

Absolute XPaths contain the location of all elements from the root (html) and as a result are likely to fail with only the slightest adjustment to the application. By finding a nearby element with an id or name attribute (ideally a parent element) you can locate your target element based on the relationship. This is much less likely to change and can make your tests more robust.

For instance, conside this page source:

<html>

 <body>

  <form id="loginForm">

   <input name="username" type="text" />

   <input name="password" type="password" />

   <input name="continue" type="submit" value="Login" />

   <input name="continue" type="button" value="Clear" />

  </form>

</body>

<html>

The form elements can be located like this:

login_form = driver.find_element_by_xpath("/html/body/form[1]")

login_form = driver.find_element_by_xpath("//form[1]")

login_form = driver.find_element_by_xpath("//form[@id='loginForm']")

    Absolute path (would break if the HTML was changed only slightly)

    First form element in the HTML

    The form element with attribute named id and the value loginForm

The username element can be located like this:

username = driver.find_element_by_xpath("//form[input/@name='username']")

username = driver.find_element_by_xpath("//form[@id='loginForm']/input[1]")

username = driver.find_element_by_xpath("//input[@name='username']")

    First form element with an input child element with attribute named name and the value username

    First input child element of the form element with attribute named id and the value loginForm

    First input element with attribute named ‘name’ and the value username

The “Clear” button element can be located like this:

clear_button = driver.find_element_by_xpath("//input[@name='continue'][@type='button']")

clear_button = driver.find_element_by_xpath("//form[@id='loginForm']/input[4]")