Handling Static & Dynamic Tables Using Selenium WebDriver

In the previous article, you have learned about handling different web elements such as iframes, pop up windows, cookies. Here, you will get in detail about handling static & dynamic tables using selenium webdriver along with the examples of fetching specific row or column and getting maximum of all values in dynamic tables.

Web tables are HTML elements represented by <table> tags. These are the most essential parts of any web pages or web application. Web tables are organized in the form of rows and columns to organize similar information in each column for different set of items.

Following is the sample web table, which has four columns and five rows.

S.N.	Subject	Highest Marks	Students Name
1	Networking	95	Ram
2	DBMS	98	Shyam
3	Data Structure	94	Rabina
4	Java	97	Krishna

Following are the types of web tables you may use on web projects.

1. Static Tables: Where the number of rows and columns are always fixed.
2. Dynamic Tables: The number of rows and columns will be changed based on the filter selection or data retrieved from the database.

Handling Static & Dynamic Tables

As discussed above static table have fixed number of rows and columns but not such case for dynamic tables. So, there are different ways of handling static & dynamic tables for each.

Handling Static Tables

Since the static tables have a fixed number of rows and columns, it is much easier to locate cells of a table. There are many ways to locate cells in HTML table, but locating with XPath the best way among them.

You can get XPath location of any web element easily by inspecting the element from the browser. For this, right click on the web element which you want inspect and click on inspect element as shown on the image below.

Now, right click on the highlighted element, select copy and click on copy XPath option. Following is the sample XPath location of a first cell as given on the table above.

//*/table[1]/thead/tr/th[1]

Use the following code in order to extract each cell content from a table and print them on the console. Since the above table has fixed (i.e. 5 rows and 4 columns) number of rows and columns. Each component of XPath remains same for all the cells. So we have iterated using “for loop” below for fetching each row and column.

package selenium_package;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class WebTables {
public static void main(String[] args) {

WebDriver driver = new ChromeDriver();	

// launch Google Chrome and direct it to the provided URL	  
driver.get("https://www.siteforinfotech.com/handling-static-dynamic-tables-selenium-webdriver/");
		
for(int ColNumber=1; ColNumber<=4; ColNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/thead/tr/th["+ColNumber+"]")).getText());
}

for(int RowNumber=1; RowNumber<=4; RowNumber++)
for(int ColNumber=1; ColNumber<=4; ColNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/tbody/tr["+RowNumber+"]/td["+ColNumber+"]")).getText());
		}
	}
}

Handling Dynamic Tables

Since dynamic tables have no fixed number of rows and columns, it’s not easier to locate the cells as static tables. You may use the different approach for locating elements to the dynamically changing web tables.

Following is the sample program code that fetches the total number of rows and columns of web table.

List<WebElement> rows=driver.findElements(By.xpath("//*/table[1]/tbody/tr/td[1]"));
System.out.println("No of Rows are:" +rows.size());
		
List<WebElement> cols=driver.findElements(By.xpath("//*/table[1]/thead/tr/th"));
System.out.println("No of Columns are:" +cols.size());	

In the above code “rows.size()” will return the total number of rows and “cols.size()” will return the total number of columns included within the table.

You may extract the contents of each cells from dynamic web table combining the techniques of finding number of rows and columns from dynamic table and the techniques of extracting contents of each cells from static tables as given below.

package selenium_package;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;

public class DynamicTable {

public static void main(String[] args) {
WebDriver driver = new ChromeDriver();	
    	
// launch Google Chrome and direct it to the provided URL	  
driver.get("https://www.siteforinfotech.com/handling-static-dynamic-tables-selenium-webdriver/");
		
List<WebElement> rows=driver.findElements(By.xpath("//*/table[1]/tbody/tr/td[1]"));	
List<WebElement> cols=driver.findElements(By.xpath("//*/table[1]/thead/tr/th"));

for(int ColNumber=1; ColNumber<=cols.size(); ColNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/thead/tr/th["+ColNumber+"]")).getText());
}

for(int RowNumber=1; RowNumber<=rows.size(); RowNumber++)
for(int ColNumber=1; ColNumber<=cols.size(); ColNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/tbody/tr["+RowNumber+"]/td["+ColNumber+"]")).getText());
		}	
	}
}

The method “List<WebElement>” included within the code above will list the elements from the rows or columns. You have to import the following packages in order to use this method.

import org.openqa.selenium.WebElement;
import java.util.List;

Fetching The Specific Row or Column

You may get extracted specific row or column from a dynamic table with specifying desired row number or column number and iterating the next value. Following is an example code that prints 3rd row and 4th column from the table given below.

//Prints 3rd row of the table
System.out.println("Third Row of Table is :");
for(int ColNumber=1; ColNumber<=cols.size(); ColNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/tbody/tr[3]/td["+ColNumber+"]")).getText());
}
//Prints 4th column of the table
System.out.println("Fourth Column of Table is :");
for(int RowNumber=1; RowNumber<=rows.size(); RowNumber++) {
System.out.println(driver.findElement(By.xpath("//*/table[1]/tbody/tr["+RowNumber+"]/td[4]")).getText());
}	

Getting Maximum of all the Values

While performing automated testing for web table, you may have required to extract some of the values such as a maximum value from some specific column of a table. You can use the following methods to get the highest mark from all of the subjects.

int i= 0, j=0, max=0;
for(int RowNumber=1; RowNumber<=rows.size(); RowNumber++) {
String col=driver.findElement(By.xpath("//*/table[1]/tbody/tr["+RowNumber+"]/td[3]")).getText();
i=Integer.parseInt(col);
if(i>j){
max=j=i;
}	
}
System.out.println("Heighest marks from all of the subject is:"+max);