Identify The Web Elements In Selenium Webdriver : Locators

There are several ways to identity the web elements. selenium webdriver provides different methods to identify these elements. most popular way is xpath. we can define or construct the xpath in different ways and for automation tester it is always a challenge to select or construct proper xpath so that it will not broke easily by some changes in the UI. but it has one disadvantage that it makes your execution slow. In this post we will see all method and different ways to identify the web elements.

lets start with the selenium webdriver options. Selenium webdriver provides “By” class which facilitate you to identify or locate the webelement.

Following is list of Methods :

className(java.lang.String className) : Finds elements based on the value of the “class” attribute.
cssSelector(java.lang.String selector) : Finds elements via the driver’s underlying W3 Selector engine.
WebElement findElement(SearchContext context) :Find a single element.
abstract java.util.List<WebElement> findElements(SearchContext context) :Find many elements and stored in the list.
id(java.lang.String id)
linkText(java.lang.String linkText)
name(java.lang.String name)
partialLinkText(java.lang.String linkText)
tagName(java.lang.String name)
xpath(java.lang.String xpathExpression)

before we jump-in to code, we will see what are tools which help you to identify the elements

‹ Firebug: https://addons.mozilla.org/firefox/addon/firebug : This is most popular tool and gives variety of options to identfify the elements.It has a JavaScript REPL. REPL stands for Read-Eval-Print-Loop or interactive shell that allows you to run JavaScript without having to create an entire page.
‹‹ Firefinder: https://addons.mozilla.org/firefox/addon/firefinderfor-firebug : A very good tool for testing out XPath and CSS on the page. It will highlight all elements on the page that match the selector to your element location.

Xpather: https://addons.mozilla.org/en-US/firefox/addon/xpather/ : it well known tool to find the xpath of an element.
‹‹ IE Developer Tools: This is built into IE7, IE8 and IE9 that we can launch by pressing F12. It also has a number of features that Firebug has.
‹‹ Google Chrome Developer Tools: This, like IE, is built into the browser and will also allow you to find the elements on
the page and be able to work out its XPath.

In this post we will cover some of options which are mainly used.

name
ID
textLink
xpath

following are examples where we will locate the elements using mentioned ways.

1) Example for name: lets take an example of login. in code below i want to enter UserName and Password.

Html code:

<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>

Here my unique identifer on the basis of classname is “username”. so here is the selenium code i will write to enter the username.
Selenium code:

driver.findElement(By.name("username")).clear(); // here i have find the element by classname which is a "username" and clear the content in it.
driver.findElement(By.name("username")).sendKeys("qeworker"); // now here i have sent username "qeworker" to the textbox.

Similarly for password:

driver.findElement(By.name("password")).clear(); // here i have find the element by classname which is a "password" and clear the content in it.
driver.findElement(By.name("password")).sendKeys("password123"); // now here i have sent password "password123" to the textbox.

2) Example for id: take the same example. but here i have changed the html code.

Html code:

<html>
<body>
<form id="loginForm">
<input id="userid" type="text" />
<input id="passwordid" type="password" />
<input name="continue" type="submit" value="Login" />
<input name="continue" type="button" value="Clear" />
</form>
</body>
<html>

Here my unique identifer on the basis of id is “userid”. so here is the selenium code i will write to enter the username.

Selenium code:

driver.findElement(By.id("userid")).clear();
driver.findElement(By.id("userid")).sendKeys("qeworker");

Similarly for password:

driver.findElement(By.id("passwordid")).clear();
driver.findElement(By.id("passwordid")).sendKeys("password123");

3) Example for linkText:

consider that we have links on the webpage and we need to click on those link. selenium provides the method to click on the link

lets take an example

HTML code:

<a href="http://www.Qeworks.com/">Visit Qeworks.com</a>

Selenium code:

driver.findElement(By.linkText("Visit Qeworks.com")).click();

So here it will look for text “Visit Qeworks.com” and click on it.

4) Example for xpath:

there are several ways to find the xpath of the web element. lets take an above examples and instead of other methods use xpath.

Html code:

<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>

Xpaths for enter the username and password will be:

option1 : Xpath : attirbutes

//input[@name=’username’]

driver.findElement(By.xpath("//input[@name='username']")).clear();
driver.findElement(By.xpath("//input[@name='username']")).sendKeys("qeworker");

Option 2 : Xpath :Relative

//form[@id=’loginForm’]/input

driver.findElement(By.xpath("//form[@id='loginForm']/input")).clear();
driver.findElement(By.xpath("//form[@id='loginForm']/input")).sendKeys("qeworker");

Option 3 : Xpath :position

//input

driver.findElement(By.xpath("//input")).clear();
driver.findElement(By.xpath("//input")).sendKeys("qeworker");

For Hyperlink:

Hrml code:

<a href="http://www.Qeworks.com/">Visit Qeworks.com</a>

Xpaths :

Option 1 xpath : link

//a[contains(text(),’Visit Qeworks.com’)]

driver.findElement(By.xpath("//a[contains(text(),'Visit Qeworks.com')]")).click();

option 2 xpath : href

//a[@href=’http://www.w3schools.com/’]

driver.findElement(By.xpath("//a[@href='http://www.w3schools.com/']")).click();

option 3 : xpath: position

//a

driver.findElement(By.xpath("//a")).click();

How to handle dynamic elements:
now we will see some examples where we can construct Xpath with dynamically changing web element attributes

Tables:

Many time it happens that new table row gets added and you need to verify it. so on the fly you need to identify the rows and pick up the right one. following code give You total number of “TR” tags within a “TD” tag by giving the xpath of the “TD” element

List<WebElement> ele = driver.findElements(By.xpath("Xpath of the table"));

Now you can use a for each loop to loop through each of the “TR” tags in the above list and then read each value by using getText() method.

List:

sometimes you need to find the elements in the list where ID is changing dynamically. lets take an example

<div class="listclass" id="list-9224880">
            <ul>
                <li ...></li>
                <li ...></li>
                <li ...></li>
            </ul>
        </div>

now here i can use contains and conditional statement to construct my xpath

//div[@class='listclass' and //*[contains(id,'list')]]

I will add few more examples as i explore more….

Tools for Xpaths :

I will strongly recommend Firebug and xpath-checker. Both are Firefox addons.

Search This Blog

BookOfTesting By Shailendra Trivedi

Identify The Web Elements In Selenium Webdriver : Locators

Comments

Post a Comment

Popular posts from this blog

Handling Dynamic Web Tables Using Selenium WebDriver

Verify Specific Position of an Element

Read it out for TESTNG before going for an iterview