Handling web tables in Selenium Webdriver

Handling WebTables:

Handling Web tables is much more complex than any other element or control. Web Table is a collection of Rows and Columns. Information / Data is Stored in Rows and Columns combinations called as Cells.

Web Tables:

A HTML Table contains following tags normally (case in-sensitive).

Table - Which indicates a table.
tbody - Table body which contains TR and TDS / TH
Tr - Table Rows indicates Rows in table.
Td / Th - Table data / Table Header Indicates columns in respective Table rows.

Steps To Iterate over Table:

Either find out the first web element (i.e. element1) to table tag or tbody tag by using either tagname, css selector or Xpath locator.
Next by using that previous found element (in our case element1) we can find the number of rows under that table as a list of web element.
Iterate over the list of rows and considering each row one by one we can find the number of columns(Td / Th) under each Table rows.

Example:

We will consider below table example to read each value from it's rows and columns.

HTML Code for Web Table:

<html>
<Head>
<title> I Am Title Tag </title>
</head>
<body>

<TABLE BORDER="3" BORDERCOLOR="#C000C0" BGCOLOR="#FFDDFF" WIDTH="500" CELLSPACING="1" CELLPADDING="3">
<CAPTION>NUMBERS 1-5 in VARIOUS LANGUAGES</CAPTION>
<TH WIDTH="5%"></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF">English</TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"> Español</TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"> Français</TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"> Italiano</TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"> Deutsch</TH>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF">1</TD>
<TD>one</TD>
<TD>uno</TD>
<TD>un</TD>
<TD>uno</TD>
<TD>eins</TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF">2</TD>
<TD>two</TD>
<TD>dos</TD>
<TD>deux</TD>
<TD>due</TD>
<TD>zwei</TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF">3</TD>
<TD>three</TD>
<TD>tres</TD>
<TD>trois</TD>
<TD>tre</TD>
<TD>drei</TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF">4</TD>
<TD>four</TD>
<TD>cuatro</TD>
<TD>quatre</TD>
<TD>quattro</TD>
<TD>vier</TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF">5</TD>
<TD>five</TD>
<TD>cinco</TD>
<TD>cinq</TD>
<TD>cinque</TD>
<TD>fünf</TD>
</TR>
</TABLE>
</body>
</html>

WebDriver Scripts to Handle above table:

package table;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class HandlingTable
{
 public static void main(String[] args) //avinash
 {
 WebDriver driver = new FirefoxDriver();
 driver.manage().timeouts().pageLoadTimeout(1, TimeUnit.MINUTES);
 driver.manage().timeouts().setScriptTimeout(1, TimeUnit.MINUTES);

 driver.get("G:\\Avinash\\HTML\\Table.html"); // Saved above Html file at this location

 WebElement table = driver.findElement(By.tagName("table")); // Find Table Tag
 java.util.List<WebElement> tr = table.findElements(By.tagName("tr")); // Find no. of Rows.

 System.out.println("Size:"+tr.size()); // No. of Rows in a Table


 for (WebElement trs : tr)
 {
 java.util.List<WebElement> tds = trs.findElements(By.tagName("td")); // Find no. of Columns
 System.out.println("Size of tds:"+tds.size());

 for (WebElement td : tds)
 {
 System.out.println(td.getText()); // Read the value froom Each cell.
 }
 System.out.println("=======================================");
 }