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:

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

Our web page looks as below:

WebTable page for tutorial

Writing test cases 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 (Header of first column) can be represented as shown below:

.//*[@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

In this example, we would like to access the Ex-Showroom price for each car make. You will need to access the cells to use in your test cases.

For example, if we want to read the Ex-showroom price from the second row, the code will be as shown below:

//Declaration of variable
String Price=””;
Price=driver.findElement(By.xpath(“.//*[@id=’t01′]/tbody/tr[2]/td[3]”)).getAttribute(“innerHTML”);

getAttribute(“innerHTML”) method/command is used to get the value from the specific cell of a Web Table.

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 can change based on data and certain conditions.

In these cases, we need to use a different algorithm as explained below:

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 get to individual cells. But, first of all, we will print the headings.

//Finding & Printing the column headings

for(int cnum=0;cnum<columns.size();cnum++)
{
System.out.println(columns.get(cnum).getText());
}

As the heading is the first row, we have simply used the printing of column names by not looping through the rows, but only the columns in the table.

Output of this code will be as shown below:

Number of columns:3
Company Name
Make
Ex-showroom Price(INR)

We can use XPATH locators to access cell values comprising of tag <td>.

For example, the XPATH for column 3 and row 2 is:

.//*[@id=’t01′]/tbody/tr[2]/td[3]

XPATH for a cell in web table

The XPATH has row and column values and we can use this XPATH locator pattern to access all the cell values dynamically.

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

The code to print the cell values dynamically is long and needs an explanation. First have a look at the XPATH pattern for accessing the cell dynamically:

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

Now, let us understand –  how is this formed. Let’s start by looking at the XPATH for row number 3 and column number 3 is:

.//*[@id=’t01′]/tbody/tr[2]/td[3]

In the code, we need to generate the row number and column number dynamically. So, for the row number, we create a FOR LOOP starting with 0 and up to maximum row size:

for(int rnum=0;rnum<rows.size();rnum++)

This loop is run from the first row (rnum=0) and is run till it reaches the row size. However, one important piece of code must be added to this to get to the right row.

The XPATH does not use 0 for the first row, instead it uses 1. So, we need to use another variable for doing this. This is explained below.

So Row 1 and column 1 will be .//*[@id=’t01′]/tbody/tr[1]/td[1].

Let’s recap and understand the XPATH for various cells. The XPATH for heading row would be

  • For Column 1

.//*[@id=’t01′]/tbody/tr[1]/th[1]

  • For Column 2

.//*[@id=’t01′]/tbody/tr[1]/th[2]

  • For column 3

.//*[@id=’t01′]/tbody/tr[1]/th[3]

The XPATH for the other cells would be

  • For row 2 and column 2

.//*[@id=’t01′]/tbody/tr[2]/td[2]

Please note use of “td” instead of “th”

The column number will also come from a FOR LOOP, which will be run from 0 to max column size.

for(int cnum1=0;cnum1<columns.size();cnum1++)

The last step is to create the XPATH dynamicallt. To do so, we have formed the XPATH as follows:

“.//*[@id=’t01′]/tbody/tr[” + row number + “]/td[” + Column Number + “]”

The row number and column number come from the two loops. As discussed above, XPATH uses 1 instead of 0 to refer to the first value, we have introduced two additional variables, as shown below:

int rownum;
int colnum;

These two variables have also been incremented by 1.

for(int rnum=0;rnum<rows.size();rnum++)
{
System.out.println(“Row number: “+rnum);
rownum = rnum+1;
for(int cnum1=0;cnum1<columns.size();cnum1++)
{

colnum = cnum1+1;
if (rownum ==1)
{
System.out.println(driver.findElement(By.xpath(“.//*[@id=’t01′]/tbody/tr[” + rownum + “]/th[“+colnum+”]”)).getText());
}
else
{
System.out.println(driver.findElement(By.xpath(“.//*[@id=’t01′]/tbody/tr[” + rownum + “]/td[“+colnum+”]”)).getText());
}

}

}

We have also used an IF and ELSE statement to print heading and other row values.

Complete Code to print values of a dynamic web table

Here is the complete code for this example:

package basicSeleniumScripts;

import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class WebTableScripting {

public static void main(String[] args) {

System.setProperty(“webdriver.chrome.driver”, “E:\\Selenium 3\\chromedriver.exe”);
WebDriver driver;
driver = new ChromeDriver();

driver.get(“http://techcanvass.com/Examples/webtable.html”);

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

//Finding & Printing number of rows

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

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

//Finding and printing number of columns
List<WebElement>columns = rows.get(0).findElements(By.tagName(“th”));

System.out.println(“Number of columns:”+ columns.size());

//Finding & Printing the column headings

for(int cnum=0;cnum<columns.size();cnum++)
{
System.out.println(columns.get(cnum).getText());
}
int rownum;
int colnum;
//Finding and printing all the values in all rows
for(int rnum=0;rnum<rows.size();rnum++)
{
System.out.println(“Row number: “+rnum);
rownum = rnum+1;
for(int cnum1=0;cnum1<columns.size();cnum1++)
{

colnum = cnum1+1;
if (rownum ==1)
{
System.out.println(driver.findElement(By.xpath(“.//*[@id=’t01′]/tbody/tr[” + rownum + “]/th[“+colnum+”]”)).getText());
}
else
{
System.out.println(driver.findElement(By.xpath(“.//*[@id=’t01′]/tbody/tr[” + rownum + “]/td[“+colnum+”]”)).getText());
} } }

driver.close();
driver.quit();
}

}

Do let us know if you have any questions or feedbacks?

About Techcanvass

Techcanvass is a software training organization and offers certification courses in Business Analysis and automation testing. Our courses in selenium are:

Selenium Certification (CP-SAT) Training

Selenium Certification Course

Selenium 3.0 Training with Java

Selenium Training Course

We are going to launch DevOps Certification training very soon, watch out this space

Cheers

Leave a Reply

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