Handling web table in Selenium 3.0 v2

Handling a web table in Selenium 3.0

Handling a web table in Selenium 3.0

In this tutorial, we are going to learn about handling a web table in Selenium 3.0.  Web tables are an important element in web pages. During the development of automation script for a web page, we may also need to write scripts to handle web table and data.

This tutorial is chapter 20 of complete Selenium 3.0 Tutorials for beginners, being developed by Techcanvass. These tutorials are categorized into Java, Selenium, TestNG, Automation Framework and Grid chapters.

Objective of this tutorial is to demonstrate:

  • What is a web table?
  • What are the ways in which we can handle static and dynamic web tables
  • A complete example to access values in we table

What is a web table?

Web tables are basically tabular structures in web pages arranged in a row and column format.

Web Table is an HTML element which is displayed with the help of <table> tag in conjunction with the <tr> and <td> tags. <tr> tag represents a row whereas <td> represents a column. <th> tag is used to represent the heading row.

We have created a web page having a web table for this tutorial. The web page URL is:

https://techcanvass.com/examples/webtable.html

Our web page looks as below:

WebTable page for tutorial

Writing selenium script for a Web Table

We will use the above web page throughout this tutorial. The code for writing test cases is as explained below.

 

Case I: When the web table is static

When the dimensions of the table are fixed, we can locate the cells using row and column numbers.

The company name in the web table is the first column in the header row.  We can get the locator (lets use XPATH) by inspecting the element as shown below:

Webtable Automation Script

Webtable Automation Script II

The Xpath for this is:

.//*[@id=’t01′]/tbody/tr[1]/th[1]
Where, tr[1] defines first row and th[1] defines first column. This XPATH represents the first cell in the table

To print the value of this element, we can use the following statement:

System.out.println(driver.findElement(By.xpath(“//*[@id=’t01′]/tbody/tr[1]/th[1]”)).getText());

Please note that the above syntax is applicable only for header row. For the other rows, we need to use the following syntax:

System.out.println(driver.findElement(By.xpath(“//*[@id=’t01′]/tbody/tr[1]/td[1]”)).getText());

Using the above syntax, we can access/print any of the values. In case, you need to print all the values, we can use for loop.

Download the script

 

Limitation of this approach

This approach works pretty well for a static table i.e. cases where we know the rows and columns in advance and it does not change. However, if the table size changes based on business cases, we can’t use this approach.

 

 

 

Case II: When the web table is dynamic

Web tables can be dynamic also, where rows and even columns are variable in number. The size of the table will change on use cases or input data.

In these cases, we are not aware of the rows and columns size in advance. Below is a step by step approach to access cells of a dynamic web table

Step 1: First get the entire html table and store this in a variable ‘webtable’ of type web element.

WebElement webtable=driver.findElement(By.xpath(“html/body”));

Step 2: Get all the rows with tag name ‘tr’ and store all the elements in a list of web elements. Now all the elements with tag ‘tr’ are stored in ‘rows’ list.

//Finding & Printing number of rows

List<WebElement>rows=webtable.findElements(By.tagName(“tr”));

System.out.println(“Number of Rows including headings:”+ rows.size());

Step 3: Get the number of columns. Here we have used “tagName” of columns – “th”. Please note that this represents the heading row only.

//Finding and printing number of columns
List<WebElement>columns = rows.get(0).findElements(By.tagName(“th”));
System.out.println(“Number of columns:”+ columns.size());

Step 4: Now, we can write the code to access all the rows and columns and its values. Please note that we have used if and else to print header row and other rows.

for(int rnum=1;rnum<=rows.size();rnum++)
{
         for (int colnum=1;colnum<=columns.size();colnum++)
        {
            if (rnum==1)
             {
                  System.out.println(driver.findElement(By.xpath( “.//*[@id=’t01′]/tbody/tr[” + rnum + “]/th[”  + colnum + “]”)).getText());
            }
         else
           {
               System.out.println(driver.findElement(By.xpath( “.//*[@id=’t01′]/tbody/tr[” + rnum + “]/td[” + colnum + “]”)).getText());
          }
   }
}

Note: Please note that the XPATH for the table heading is different and you have “th” instead of “td”. “th” represents row heading.

Download the automation code for handling dynamic web table.

 

 

CP-SAT certification Training

About Techcanvass

Techcanvass offers IT certification courses for professionals. We are an IIBA endorsed education provider (EEP), iSQI ATP (for Certified Agile Business Analyst Training) as well as Agile Testing alliance partner for CP-SAT certification training in Selenium.

CP-SAT Certification Offer

 

 

 

Leave a Reply

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