Before performing any operation on any web element or any web component we need to tell the web driver where exactly that element resides on the web page. We can see the web element with our eyes but webdriver can’t. We need to tell it, that go to this particular location and perform this particular operation. To do so we make use of XPath. XPath is the XML path of a web element in the DOM. When you visit a website in google chrome and right click on the web page and select “view source”, you’ll see an HTML page with huge chunks of HTML, CSS, javascript code. You’ll find that the web page is developed with huge chunks of HTML tags
Some common HTML tags are:
div=division
span=span
p=paragraph
a=anchor tag
tr=table row
td=table data
ul=unordered list
li=list item
ol=ordered list
h=heading
label
input
and so on.
These elements also have some attribute and their corresponding attribute values.
For e.g. a div tag also has a ‘class’ attribute, or ‘id’ attribute, etc. An anchor tag ‘a’ must have an ‘href’ attribute. These attributes must have some values like class name, or id name.
So we can make use of these elements to find the xpath of our web component. You can find xpath without using any additional addon like firebug or firepath. Open the website in google chrome and right click on the element for which you want to find the xpath and click inspect element.
Now on the inspect element window press ctrl+s.
The basic format of xpath is
//tag[@attribute name="attribute value"]
Suppose there is a division in html whose class attribute value is “abcd”, so we’ll write like this: //div[@class="abcd"]
It means, find a division tag in the html whose class attribute value is “abcd”.
If we write like this //*[@class="abcd"] i.e. putting an asterisk in place of tag, this means, find any tag in the html whose class attribute value is “abcd”.
If we write with a dot operator like .//*[@class="abcd"] here the dot represents the child node. It means the processing starts from the current node. To be more precise find any tag in the html whose class attribute value is “abcd” and start processing from current node. If we do not use dot and simply write //*[@class="abcd"] then it will search class with value “abcd” in the entire document.
If you further want to go inside a parent tag, then you can use a single slash in the middle of the xpath //div[@class="abcd"]/ul/li/a this means under the parent division whose class value is “abcd” find an achor tag which is under ul and li tags. All these xpaths represents either an element or a list of elements on the web page.
XPATH AXES
Axes are the methods used to find dynamic elements. There are instances when you’ll find that the attribute of an html tag gets changed. Due to this your previously written xpath won’t work if the attribute value of any of the tag gets changed. To overcome this, xpath axes have been introduced. These are nothing but the functions which can be used inside our xpath to fetch the correct location even if the attribute is dynamic. The first such function is
1. contains().
suppose there is an attribute value “btn123″, and the numeric figure keeps changing, the numeric part is not constant it keeps changing. so you can write .//*[contains(@name, 'btn')] this means find any tag starting from the current node whose name contains “btn”. OR and AND: You can use ‘or’ or ‘and’ inside your xpath. For e.g. //*[@type='submit' or @name='abcd'], this means select any tag whose type is submit or name is “abcd”. //*[@type='submit' and @name='abcd'], this means select any tag whose type is submit and name is “abcd”. The satisfaction of both conditions is necessary.
2. starts-with()
//label[starts-with(@id,'abcd')]
It means find a label whose id starts with “abcd”.
3. text()
.//td[text()='abcd']
4. following:
Find all elements in the DOM starting after a particular node For. e.g.
//*[@class='post-content']//following::a This means find all the anchor tags after ‘post-content’ class.
You can see, it is giving 18 anchor tags after ‘post-content’ class.
But what if you want a particular tag? For this you can specify the index as below.
5. ancestor:
Find all elements in the DOM starting before a particular node For. e.g.
//*[@class='logoCotainer']//ancestor::div
This means find all the div before ‘logoCotainer’ class.
6. descendant
All elements after current node
//*[@class='uppermenubar']//descendant::div
This means find all div after ‘uppermenubar’ class.
7. preceding
//*[@class='navigation']//preceding::div
This means find all div before class “navigation”
8. child
//*[@class='uppermenubar']//child::div
This means find all child divisions (div) of class ‘uppermenubar’
9. parent
//*[@class='navigation']//parent::div
This means find parent div of ‘navigation’ class
Now that xpaths are being found, you can now use them in your selenium script as below
driver.findElement(By.xpath(“//*[@class='navigation']//parent::div”));
Here By.xpath(“//*[@class='navigation']//parent::div”) will return a By class object. So ultimately we are passing a By class object in findElement method.
SUMMARY
In this lecture, we’ve learned that before performing any operation on the web elements, first, we need to find the exact location or path of that web element and instruct the web driver to go to this path and perform a particular operation. Unless we find the location or path of the web elements how can we instruct our web driver to perform a particular operation on that particular element? For e.g you want to click a button on the web page, or you need to input some text in the text field. First, you need to find where exactly that element is present on the web page. To do so, we can find the tags, attributes, values of those web elements from the page view source and write our xpath