While automating modern Web pages with a lot of dynamic content, it becomes imperative to learn the usage of Advanced XPath expressions. Since teaching you the usage of XPaths from the very beginning is out of scope of this article, you can get acquainted with XPath basics using the following article from W3Schools - XPath Tutorial.
Getting the XPath of any Element using Chrome Inspector
To get the XPath of any Element using Google Chrome Inspector, you can do the following steps:
1. Visit the page and right click on the Element that you want to fetch XPath for. Select 'Inspect' from the drop down menu as shown in below image:
This will open the Elements tab of Chrome Developer tools with the HTML code for the right clicked item highlighted there.
2. Right Click on highlighted web element in the HTML Code and Select Copy > Copy XPath option from the drop-down menu as shown in below image:
3. Use the copied X-path "//*[@id="leftcontainer"]/table/tbody/tr[1]/td[1]/a" to locate the element.
Advanced Scenarios - Dynamic XPath for HTML Table Elements
For getting into more advanced usage of XPaths, let us take some example scenarios and see how XPaths are formulated for the same.
Let us take the example of Top gainers table on Rediff Money website in our case.
Please take this primer on HTML Tables so as to get familiar with their structure - HTML Tables
Here's the HTML Code for the first 5 rows of the above table:
<table class="dataTable"> <thead><tr><th>Company</th><th>Group</th><th>Prev Close (Rs)</th><th>Current Price (Rs)</th><th>% Change</th></tr></thead> <tbody> <tr> <td> <a href="//money.rediff.com/companies/jet-airways/16600015"> Jet Airways </a> </td> <td>A</td> <td>177.50</td> <td>197.10</td> <td><font class="green">+ 11.04</font></td> </tr> <tr> <td> <a href="//money.rediff.com/companies/spicejet-ltd/16600005"> Spicejet Ltd. </a> </td> <td>A</td> <td>62.70</td> <td>68.25</td> <td><font class="green">+ 8.85</font></td> </tr> <tr> <td> <a href="//money.rediff.com/companies/nlc-india-l/15110006"> NLC India L </a> </td> <td>A</td> <td>68.60</td> <td>73.25</td> <td><font class="green">+ 6.78</font></td> </tr> <tr> <td> <a href="//money.rediff.com/companies/phoenix-mills/16490110"> Phoenix Mills </a> </td> <td>A</td> <td>520.35</td> <td>548.90</td> <td><font class="green">+ 5.49</font></td> </tr> <tr> <td> <a href="//money.rediff.com/companies/interglobe-aviation/16690529"> InterGlobe Aviation </a> </td> <td>A</td> <td>777.60</td> <td>816.35</td> <td><font class="green">+ 4.98</font></td> </tr> </tbody> </table>
Let us take 3 example scenarios where we need to find the XPaths for the dynamic table:
1. Fetch the name of the 'Company' that comes first in the 'Top gainers' table
2. Fetch the 'Prev Close' value of Company named 'NHPC'
3. Fetch the name of the Company whose 'Current Price' is 73.25 and '% Change' is +6.78
Advanced Example 1: Fetch the name of the Company that comes first in the Top gainers table
Assuming you are already familiar with HTML Table structure, an HTML table consists of rows(<tr> element) and columns(<td> element). The name of the company falls in the first column(td[1]) inside the first row(tr[1]) in our table. Therefore, formulating the XPaths is fairly easy here.
//table/tbody/tr[1]/td[1]/a
Advanced Example 2: Fetch the 'Prev Close (Rs)' value of Company named 'NHPC'
In this case, the constraint that is provided to us is that the name of the Company should be 'NHPC'. So, let us start from there.
1. Get the XPath for the Company name HTML Element first. We know that the name of the Company is the very first column on each row(as in previous example). And we already have the XPath for getting the first column of the first row. We just need to remove the first row constraint from that i.e remove the [1] part as follows:
//table//tr/td[1]/a
Now this will give us the List of all Company names.
2. Add the constraint that was provided to us i.e we only need the Element with Company name 'NHPC'.
//table//tr/td[1]/a[contains(text(),'NHPC')]
We are using the contains() function here since the anchor tag(<a>) contains the text 'NHPC' and some extra whitespaces.
3. Now we need to backtrack to the row containing this Element. We will use the 'ancestor' XPath axe to get to the row(<tr>) that is the ancestor on our current node.
//table//tr/td[1]/a[contains(text(),'NHPC')]/ancestor::tr
4. By inspecting the table, we know that 'Prev Close (Rs)' is the third column in every row. We will get to that using the index/position function
//table//tr/td[1]/a[contains(text(),'NHPC')]/ancestor::tr/td[3]
And thus, we have reached our destination.
Advanced Example 3: Fetch the name of the Company whose 'Current Price' is 73.25 and '% Change' is +6.78
To be added soon