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 :
- Finding Element by Name
- Finding Element by ID
- Finding Element by Link Text
- Finding Element by Partial Link Text
- Finding Element by Xpath
- Finding Element by CSS Selector
- Finding Element by Tagname
- 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</pre>
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()
TESTEROPS 