Interview Questions & Answers Selenium Webdriver Tutorials

How to read data from a Web Table using Selenium

Tables are one of the primary design tools for HTML documents. Tables allow for greater control over page layout, allowing creation of more visually interesting pages. Table has rows and columns to store the data. I guess 50% IT industry will come to a halt if Microsoft Excel stops working 😉 that’s the importance of tables in organizing data. Search results on many websites are often displayed in the form of table. E.g. try searching for a flight between X and Y on a travel website, what you get is a table of results. There are times when we need to access elements (usually texts) that are within HTML tables. In this article let’s see how to read data from a Web Table using Selenium. There are two types of HTML tables published on the web,

  • Static table: Data is static i.e. Number of rows and columns are fixed.
  • Dynamic table: Data is dynamic i.e. Number of rows and columns are NOT fixed.

As you might have guessed, handling static table is easy. But reading from a dynamic table is a bit tricky. What do you think should be the approach to read data from a Web table? Simple, identify the table >> Go to row-2 >> then column-3 >> and then read data 😉 For dynamic tables its bit different – just that before all this we need to know the no of rows & columns rendered. Post that, steps will be same to fetch specific data.

Example structure of a Web Table from money.rediff.com web page,

<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=”http://money.rediff.com/companies/future-consumer/17028141″>Future Consumer</a

   </td>

   <td>A</td>

   <td>55.30</td>

   <td>64.55</td>

   <td><font class=”green”>+  16.73</font></td>

</tr></tbody></table>

Below tags are generally defined in a Web Table:

  • <table></table> Defines the Web HTML table.
  • <thead></thead> Defines Table header section.
  • <th></th> Defines column heading
    <tbody></tbody> Defines the container for table rows & columns.
  • <tr></tr> Define rows.
  • <td></td> Define columns, i.e. the actual data containers.

Navigate to the Web page

Below code initializes the Webdriver instance to open a Chrome browser with rediff.com URL. Invest in stock markets? Yeah? Then you must be aware about the BSC gainers & losers – this web page contains a web table for all the gainers…

Read data from a Web Table using Selenium

Identify the Web Table

The first step after opening the web page is to locate the web table. How? Generally developers don’t use ID or Name attributes for web tables – hence we use xpath or some other available attribute to identify the table. In below code, we use Class Name to identify the gainers web table.

Identify the Web Table

Read specific cell value

Instead of locating the table & then iterating through it, if the web table is static, i.e. the number of rows & columns are fixed – we can directly read a specific cell value. How? Just locate the specific cell and use getText() method. Caution: This approach is applicable when we already know the number of rows & columns. If the table is rendered dynamically, best approach is to go in sequence.

Read specific Cell value

Fetch # of rows in a table

Once we have located the table, the next obvious step is to count the number of rows & columns. In a dynamic table (rendered at run time) – rows & columns might vary with every page load. Hence it is recommended to first count the rows & columns, then iterate through it. Below code identifies all the rows & store it in the ‘rows’ list. Next we calculate the number of rows using size() method & store it in the ‘rows_count’ variable.

Fetch # of columns in a row

Below code identifies all the columns in a row & store it in the ‘columns’ list. Next we calculate the number of columns using size() method & store it in the ‘col_count’ variable.

Iterate through the Web Table

How will you iterate through a web table? Simple! Outer loop iterates through all the rows one at a time and inner loop through all the columns (cells) within each row. getText() method is used to fetch a cell’s value.

Complete Code

By the way this was one of the interview question at a recent interview that I attended. The next for practice would be ‘How to select last checkbox value from the options available in a web-table cell?’. This article can be used as a kick-off. Faced any similar Selenium questions in an interview? Please comment and let’s learn together, practically!

Leave a Reply

Your email address will not be published. Required fields are marked *