Handling Dynamic Web Tables Using Selenium WebDriver

Web Table in Selenium

There are two types of HTML tables published on the web-

  1. Static tables: Data is static i.e. Number of rows and columns are fixed.
  2. Dynamic tables: Data is dynamic i.e. Number of rows and columns are NOT fixed.

How to Handle Dynamic Table in Selenium

Below is an example of a dynamic web table in Selenium for Sales. Based on input date filters, number of rows will get altered. So, it is dynamic in nature.

Handle Dynamic Table in Selenium

Handling static table is easy, but handling dynamic tables in Selenium is a little bit difficult as rows and columns are not constant.

Using X-Path to Locate Web Table Elements

Before we locate web element, first let’s understands-

What is a web element?

Web elements are nothing but HTML elements like textbox, dropdowns radio buttons, submit buttons, etc. These HTML elements are written with start tag and ends with an end tag.

For Example,

<p> My First HTML Document</p>.

Steps for getting X-path of web element that we want to locate.

Step 1) In Chrome, Go to https://demo.guru99.com/test/web-table-element.php

Using X-Path to Locate Web Table Elements

Step 2) Right click on web element whose x-path is to be fetched. In our case, right click on “Company” Select Inspect option. The following screen will be shown –

Using X-Path to Locate Web Table Elements

Step 3) Right Click on highlighted web element > Select Copy -> Copy x-path option.

Using X-Path to Locate Web Table Elements

Step 4) Use the copied X-path “//*[@id=”leftcontainer”]/table/thead/tr/th [1]” in Selenium WebDriver to locate the element.

Example: Fetch number of rows and columns from Dynamic WebTable

While dynamic web table handling in Selenium, we cannot predict its number of rows and columns.

Using Selenium web driver, we can find

  • Number of Rows and columns of web table in Selenium
  • X row or Y column’s data.

Below is program for fetching total number of rows and columns for handling web table in Selenium:

Fetch Number of Rows and Columns

import java.text.ParseException;
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 Noofrowsandcols {
    
public static void main(String[] args) throws ParseException {
    	WebDriver wd;
	  System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
	  wd= new ChromeDriver();
        wd.get("https://demo.guru99.com/test/web-table-element.php");         
        //No.of Columns
        List <webelement> col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th"));
        System.out.println("No of cols are : " +col.size()); 
        //No.of rows 
        List <webelement> rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); 
        System.out.println("No of rows are : " + rows.size());
        wd.close();
    }
}

Code Explanation:

  • Here we have first declared Web Driver object “wd” &initialized it to chrome driver.
  • We use List <WebElement> to total number of columns in “col”.
  • findElements commands returns a list of ALL the elements matching the specified locator
  • using findElements and X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th we get all the columns
  • Similarly, we repeat the process for rows.

Output:

Fetch Number of Rows and Columns

Example: Fetch cell value of a particular row and column of the Dynamic Table

Let’s assume we need 3rd row of the table and its second cell’s data. See the table below-

Fetch Cell Value Of a Particular Row and Column

In above table, data is regularly updated after some span of time. The data you try retrieve will be different from the above screenshot. However, the code remains the same. Here is sample program to get the 3rd row and 2nd column’s data.

Fetch Cell Value Of a Particular Row and Column

import java.text.ParseException;
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;
import java.util.concurrent.TimeUnit;


public class RowandCell {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-element.php"); 
		 wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		 WebElement baseTable = wd.findElement(By.tagName("table"));
		  
		 //To find third row of table
		 WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]"));
         String rowtext = tableRow.getText();
		 System.out.println("Third row of table : "+rowtext);
		    
		    //to get 3rd row's 2nd column data
		    WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]"));
		    String valueIneed = cellIneed.getText();
		    System.out.println("Cell value is : " + valueIneed); 
		    wd.close();
    }
}

Code Explanation:

  • Table is located using locator property “tagname”.
  • Using XPath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]” find the 3rd row and gets its text using getText () function
  • Using Xpath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]/td[2]” find the 2nd cell in 3rd row and gets its text using getText () function

Output:

Fetch Cell Value Of a Particular Row and Column of The Dynamic Table

Example: Get Maximum of all the Values in a Column of Dynamic Table

In this example, we will get the maximum of all values in a particular column.

Refer the following table –

Get Maximum of all the Values in a Column of Dynamic Table

Here is the code

Get Maximum of all the Values in a Column of Dynamic Table

import java.text.ParseException;
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;
import java.text.NumberFormat;


public class MaxFromTable {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-element.php"); 
		 String max;
	     double m=0,r=0;
		 
	       //No. of Columns
	        List <webelement> col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th"));
	        System.out.println("Total No of columns are : " +col.size());
	        //No.of rows
	        List <webelement> rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]"));
	        System.out.println("Total No of rows are : " + rows.size());
	        for (int i =1;i<rows.size();i++)
	        {    
	            max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText();
	            NumberFormat f =NumberFormat.getNumberInstance(); 
	            Number num = f.parse(max);
	            max = num.toString();
	            m = Double.parseDouble(max);
	            if(m>r)
	             {    
	                r=m;
	             }
	        }
	        System.out.println("Maximum current price is : "+ r);
    }
}

</webelement></webelement>

Code Explanation:

  • Using chrome driver we locate the web table and get total number of row using XPath “.//*[@id=’leftcontainer’]/table/tbody/tr/td[1]”
  • Using for loop, we iterate through total number of rows and fetch values one by one. To get next row we use (i+1) in XPath
  • We compare old value with new value and maximum value is printed at the end of for loop

OutPut

Get Maximum of all the Values in a Column of Dynamic Table

Example: Get all the values of a Dynamic Table

Consider the following table: https://demo.guru99.com/test/table.html

Get all the values of a Dynamic Table

The number of columns for each row is different.

Here row number 1, 2 and 4 have 3 cells, and row number 3 has 2 cells, and row number 5 has 1 cell.

We need to get values of all the cells

Here is the code:

Get all the Values of a Dynamic Table

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.chrome.ChromeDriver;



public class NofRowsColmns {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
    	System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
    	wd = new ChromeDriver();
    	wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    	wd.get("https://demo.guru99.com/test/table.html");
    	//To locate table.
    	WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody"));
    	//To locate rows of table. 
    	List < WebElement > rows_table = mytable.findElements(By.tagName("tr"));
    	//To calculate no of rows In table.
    	int rows_count = rows_table.size();
    	//Loop will execute till the last row of table.
    	for (int row = 0; row < rows_count; row++) {
    	    //To locate columns(cells) of that specific row.
    	    List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td"));
    	    //To calculate no of columns (cells). In that specific row.
    	    int columns_count = Columns_row.size();
    	    System.out.println("Number of cells In Row " + row + " are " + columns_count);
    	    //Loop will execute till the last cell of that specific row.
    	    for (int column = 0; column < columns_count; column++) {
    	        // To retrieve text from that specific cell.
    	        String celtext = Columns_row.get(column).getText();
    	        System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext);
    	    }
    	    System.out.println("-------------------------------------------------- ");
    	}
   	}
}

Code Explanation:

  • rows_count gives the total number of rows
  • for each row we get the total number of columns using rows_table.get(row).findElements(By.tagName("td"));
  • We iterate through each column and of each row and fetch values.

Output:

Get all the Values of a Dynamic Table

Summary

  • By.xpath() is commonly used to access table elements.
  • Static web tables in Selenium are consistent in nature. i.e. they do have fixed number of rows as well as Cell data.
  • Dynamic web tables are inconsistent i.e. they do not have fixed number of rows and cells data.
  • Using selenium web driver, we can handle dynamic web tables easily.
  • Selenium Webdriver allows us to access dynamic web tables by their X-path