Sunday, 13 March 2016

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:

  1. 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.
  2. 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.
  3. 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><FONT COLOR="#D000D0" SIZE="4"><B>NUMBERS 1-5 in VARIOUS LANGUAGES</B></FONT></CAPTION>
<TH WIDTH="5%"></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"><U>English</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Español</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Français</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Italiano</U></FONT></TH>
<TH WIDTH="19%" BGCOLOR="#FFA0FF"><FONT SIZE="4"> <U>Deutsch</U></FONT></TH>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF"><FONT SIZE="4">1</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>one</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>uno</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>un</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>uno</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>eins</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF"><FONT SIZE="4">2</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>two</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>dos</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>deux</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>due</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>zwei</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF"><FONT SIZE="4">3</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>three</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>tres</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>trois</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>tre</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>drei</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF"><FONT SIZE="4">4</FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>four</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>cuatro</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>quatre</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>quattro</B></I></FONT></TD>
<TD><FONT COLOR="#4080FF" SIZE="4"><I><B>vier</B></I></FONT></TD>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#00FFFF"><FONT SIZE="4">5</FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>five</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinco</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinq</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>cinque</B></I></FONT></TD>
<TD><FONT COLOR="#AADDFF" SIZE="4"><I><B>fünf</B></I></FONT></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("=======================================");
            }

        }

    }

OutPut of above scripts:



 Download Code from Here

 

 

 

No comments:

Post a Comment