TESTEROPS

A pragmatic approach to QA and OPS

Locating WebElements On A Webpage

Now, since we have found out how we are going to check the web elements from a web source, it’s time to find out how our test scripts are going to locate and find out these web elements.

Selenium provides seven different ways in which we can recognize a specific element on a web page. These seven ways are the way of telling a Selenium program to go find a specific web element, on a web page and then perform some operation like click or drag and drop on them.

These methods are :

  1. Finding Element by Name
  2. Finding Element by ID
  3. Finding Element by Link Text
  4. Finding Element by Partial Link Text
  5. Finding Element by Xpath
  6. Finding Element by CSS Selector
  7. Finding Element by Tagname
  8. Finding Element by Classname

Locating Elements Using Name

Generally elements are given unique ids in an HTML document. If ids are not present and we only have names, then we can also use them to select a webelement.


<form name="loginForm">
Login Username: <input id="username" name="login" type="text">
Password: <input id="password" name="password" type="password">
<input name="login" type="submit" value="Login">
</form>

Now I can select the username webelement using the name login given in the HTML.

//if I am using a Java implementation then I would use this method

driver.findElement(By.name("login")); //this is the Java version


#if I am using a Python implementation then I would use this method

driver.find_element_by_name(‘login’) #this is python version


The difference between name and id is that we don’t always unique names in a webpage. As such if there is another username field with the name “login“, using the above code for locating will return only the first available element in the webpage.

Locating Elements Using ID

Every element must have a unique id on a HTML page. As such they make a unique and reliable way to locate a specific element on a HTML page.  Plus all browsers have the methods to get objects on the page using their ids. As such locating by ids is the fastest method available.


<form name="loginForm">
Login Username: <input id="username" name="login" type="text">
Password: <input id="password" name="password" type="password">
<input name="login" type="submit" value="Login">
</form>

Suppose you want to select the username or password field, you can do it be using their ids like


//this is how I would do if I am using Java&lt;/pre&gt;
driver.findElement(By.id("username"));

driver.findElement(By.id("password"));

Same would look like this in Python


#this is how I would do if I am using Python implementation

driver.find_element_by_id('username')

driver.find_element_by_id('password')

Locating Elements Using Link Text

This locating mechanism is useful for selecting hyperlinks from a page.


 <a href="signin.html">Sign In</a> to modify your account details.

Now we can use the link text for this hyperlink by using the By.linkText() locator- like this


//this is the Java implementation

driver.findElement(By.linkText("Sign In"));

If we using the Python implementation that would look like this

#this is how I would do this in Python

driver.find_element_by_link_text("Sign In")


Locating Elements Using Partial Link Text

The above mentioned link can also be selected by using the partialLinkText() method.  This method allows us to select a hyperlink by only using a fraction of the linktext mentioned.


//this is how we do it in Java

driver.findElement(By.partialLinkText("Sign"));


Same in python would look like


driver.find_element_by_partial_link_text('Sign')

Next, we can use Xpath to find element.

Locating Elements Using Xpath

Xpath are a useful mechanism for locating web elements. If used wisely, Xpath produces very reliable and low maintenance, but if used incorrectly, it can cause a lot of headache. Consider this html block-


<table name="cart">
 <tr id="item1">
 <td class="name item">Mp3 Download: foobar.mp3</td>
 <td class="name item"><input name="qty" class="name item formfield disabled"></td>
 </tr>
 <tr id="item2">
 <td class="name item">Mp3 Player</td>
 <td class="name item"><input id="item2_quantity" name="qty" class="name item formfield required" type="text"></td>
 </tr>
 ...
</table>

We can use various xpath expressions to select elements. For example //input[@name=’qty’]  can be used to determine the name item from the first table row.

We can use this while trying to find the element


//this is how we use By.Xpath method in Java

driver.findElement(By.xpath("//input[@name='qty']"));

While, if you do this in python, you would write something like this


#this is how we would use the Xpath in python

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

We can also use the CSS of the web element to locate it. Let’s see how

Locating Elements Using CSS Selector

We can also select elements on a webpage using the CSS attributes using the By.cssSelector() method- in Java or by using find_element_by_css_selector('#cssattribute')method

Consider this block of HTML code


<table name="cart">
<tr id="item1">
<td class="label">Mp3 Download: foobar.mp3</td>
<td class="item"><input name="qty" class="formfield disabled"></td>
</tr>
<tr id="item2">
<td class="label">Mp3 Player</td>
<td class="item"><input id="item2_quantity" name="qty" class="formfield required" type="text"></td>
</tr>
...
</table>

We can use the following css selector attributes to select the item with id “item2_quantity“,

input.required
input[class~=’required’]
input.required[type=’text’]
#item2_quantity
input#item2_quantity


//using the By.cssSelector method in Java

driver.findElement(By.cssSelector("input#item2_quantity"));

driver.findElement(By.cssSelector("#item2_quantity"));

Similar, in Python, we would achieve this as


driver.find_element_by_css_selector("input#item2_quantity")

driver.find_element_by_css_selector("#item2_quantity")

Locating Elements Using Tagname

HTML is just a play of tags. If you want to return an element by tag name, then use this method. While searching for element, using this method, it is important to note that the first element will be returned by the method, untill you explicitly define it to do otherwise ( like using findElements( ) method)

Suppose we have a block of html like this


<html>
<body>
<h1>Welcome</h1>
<p>Site content goes here.</p>
</body>
</html>

Now suppose you want the header element (<h1>)to be located and returned, then we would do this


//this is how we do it in Java

driver.findElement(By.tagName("h1"));

Similarly, we have this done in Python


#this is how we would do in Python

driver.find_element_by_tag_name('h1')

Locating Elements By Class Name

We can also use class name in locating the elements. This is not a preferred method of finding elements and is more of a convenience mechanism. In the above HTML snippet, we can use the class name to locate the element


//this is how we would do it in Java

driver.findElement(By.class("required"));

Now, in Python, we would do this as


driver.find_element_by_class_name('required')

Now let us write a simple script in Python to check how we use the locating mechanisms,


import unittest
from selenium import webdriver

class logintest(unittest.TestCase):
def setUp(self):
self.driver=webdriver.Firefox()
def test_filldetails(self):
driver=self.driver
driver.maximize_window()
driver.get('http://www.toolsqa.com/automation-practice-form/')

driver.implicitly_wait(30)

tt1=driver.find_element_by_name('firstname')
tt1.send_keys("rahul")

tt2=driver.find_element_by_name('lastname')
tt1.send_keys("yadav")

btn1=driver.find_element_by_id('submit')
btn1.click()

tt1=driver.find_element_by_partial_link_text('Partial')

tt2=driver.find_element_by_tag_name('button')
print(str(tt2))

tt3=driver.find_element_by_link_text("Link Test")
tt3.click()

def tearDown(self):
self.driver.quit()
if __name__ == '__main__':
unittest.main()

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: