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


For getting the XPath of any Element using Chrome Inspector, you can do the following steps:


1. Visit a page and right click the Element that you want to fetch Xpath for. Select 'Inspect' from the drop down menu to open the Elements tab of Chrome Developer tools with the HTML tag for the right clicked item highlighted there.



2. Right Click on highlighted web element and Select Copy > Copy XPath option from the drop-down menu.



3. Use the copied X-path "//*[@id="leftcontainer"]/table/tbody/tr[1]/td[1]/a" to locate the element.


Advanced Scenarios

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 inside the first row in our table. Therefore, formulating the XPaths is fairly easy here.


//table/tbody/tr[1]/td[1]/a


In the above XPath, we can make it even shorter by omitting the tbody Element since there can be only one tr[1] i.e the first row and we don't need tbody Element to reach there.


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