Handling Dynamic Web Tables Using Selenium WebDriver

Steven Roger June 11, 2020

1 8,585 6 minutes read

Handling Dynamic Web Tables Using Selenium WebDriver

Web Tables are categorized into two parts published that are Static Web Tables and Dynamic Web Tables.

Static web table: The Number of rows and columns will be static. Eg. Table of days, months, etc.
Dynamic web table: Number of rows and columns will be dynamically changing, which means that it keeps on increasing or decreasing based on data. Eg: Student table, Customer table.

It is easy to handle static web tables, but handling dynamic web tables is a little bit difficult as rows and columns are keep on changing.

Using X-Path to Locate Web Table Elements

Before we try to locate web element, first we will understand about web element

What is a web element?

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

For Example:

<p> My HTML Document</p>

Steps to get X-Path of web elements that we want to locate.

Step 1: Open Google Chrome and type the URL https://money.rediff.com/gainers/bsc/daily/groupa

Step 2: Right-click on “Company” web element who’s XPath is to be fetched and select Inspect option.

The following screen will be shown as

Step 3: Right-click on highlighted (Company) web element > Select Copy > Click on Copy XPath option.

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

Example: How to fetch the number of rows and columns in Dynamic WebTable.

We cannot predict its number of rows and columns when the web table is dynamic.

By using Selenium WebDriver, we can find

Number of Rows and Columns of a Web Table
X Row or Y column’s data.

Consider the below program to fetch the total number of rows and columns of web table

Let’s create a test case in which we will automate the following scenarios to handle Web Table:

Invoke a Google chrome browser.
Open URL: https://money.rediff.com/gainers/bsc/daily/groupa.
Find total rows in a web table.
Find a total no of columns in a web table.

Now, we will create a test case step by step to understand how to handle Web Tables in WebDriver.

Step 1: Launch Eclipse IDE.

Step 2: Go to File menu > New > Click on Java Project.

Step 3: Right-click on the src folder and click on the New > class.

Give the Class name as “NoofRowsandColumns” and Select the checkbox “public static void main(String[] args) and click on the “Finish” button.Step 4: Invoke the Google Chrome browser and set the system property to the path of your chromedriver.exe file.

Here is the sample code to set Chrome driver system property:

// System Property for Chrome Driver   
 System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");

After that, we have to initialize the Chrome driver using ChromeDriver Class. Below is the sample code to initialize Chrome driver using ChromeDriver class.

// Instantiate a ChromeDriver class.      
WebDriver driver=new ChromeDriver();

We will get the below code to launch Google Chrome browser after combining both of the above codes.

System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");  
WebDriver driver=new ChromeDriver();

After that, we need to navigate to the desired URL.

Below is the sample code to navigate to the desired URL:

// Launch Website  
driver.navigate().to("https://money.rediff.com/gainers/bsc/daily/groupa. ");

Here is the complete code for above scenario:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  
  
public class WebTableHandle {  
  
    public static void main(String[] args) {  
          
        // System Property for Chrome Driver   
 System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");  
  
        // Instantiate a ChromeDriver class.      
    WebDriver driver=new ChromeDriver();  
  
        // Launch Website  
driver.navigate().to("https://money.rediff.com/gainers/bsc/daily/groupa. ");     
    }    
}

Step 5: Find a total no of columns in a web table.

List<WebElement>  columns =  driver.findElements(By.xpath("//*[@id=’leftcontainer’]/table/thead/tr/th"));
      int columnCount = columns.size();
      System.out.println("No of columns in a table : " + columnCount);

Step 6: Find a total no of rows in a web table.

List<WebElement>  rows =  driver.findElements(By.xpath("//*[@id=’leftcontainer’]/table/tbody/tr/td[1]"));
      int rowCount = rows.size();
      System.out.println("No of rows in a table : " + rowCount);

Screenshot of the above scenario

Now, our final test script will look something like:

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 NoofRowsandColumns {

public static void main(String[] args) {
// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\geckodriver.exe");

        WebDriver driver = new ChromeDriver();
        driver.get("https://money.rediff.com/gainers/bsc/daily/groupa.");
        
        //No of Columns
        List<WebElement>  columns =  driver.findElements(By.xpath("//*[@id='leftcontainer']/table/thead/tr/th"));
        int columnCount = columns.size();
        System.out.println("No of columns in a table : " + columnCount);
        
        
        //No of Rows

        List<WebElement>  rows =  driver.findElements(By.xpath("//*[@id=’leftcontainer’]/table/tbody/tr/td[1]"));
        int rowCount = rows.size();
        System.out.println("No of rows in a table : " + rowCount);
        driver.close();

}

}

Code Explanation:

Here first we initialized chrome driver.
We use List <WebElement> to total number of columns in “columns”.
findElements commands will returns a list of ALL the elements matching the specified locator
By using findElements and XPath “//*[@id=’leftcontainer’]/table/thead/tr/th” we get all the columns
We use List <WebElement> to total number of rows in “rows”.
findElements commands will returns a list of ALL the elements matching the specified locator
By using findElements and XPath “//*[@id=’leftcontainer’]/table/tbody/tr/td[1]” we get all the rows.

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

Let’s assume we need to fetch 2^nd row of the table and its second cell’s data of the table below-

Here is a sample code to get the 2^nd row and 2^nd column’s data.

Consider the below program to fetch the total number of rows and columns of web table

Let’s create a test case in which we will automate the following scenarios to handle Web Table:

Invoke a Google chrome browser.
Open URL: https://money.rediff.com/gainers/bsc/daily/groupa.
Find the second row of a table
Find the table’s 2^nd row and 2^nd cell data.
Close the driver

Now, we will create a test case step by step to understand how to handle the above scenario in WebDriver.

Step 1: Launch Eclipse IDE.

Step 2: Go to File > New > Click on Java Project.

Step 3: Right-click on the src folder and click on the New > class.

Give the Class name as “RowdataandCell” and Select the checkbox “public static void main(String[] args) and click on the “Finish” button.

Step 4: Invoke the Google Chrome browser and set the system property to the path of your chromedriver.exe file.

Here is the sample code to set Chrome driver system property:

// System Property for Chrome Driver   
 System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");

After that, we have to initialize the Chrome driver using ChromeDriver Class. Below is the sample code to initialize Chrome driver using ChromeDriver class.

// Instantiate a ChromeDriver class.      
WebDriver driver=new ChromeDriver();

We will get the below code to launch Google Chrome browser after combining both of the above codes.

 System.setProperty("webdriver.chrome.driver", “ D:\\Drivers\\geckodriver.exe ");  
WebDriver driver=new ChromeDriver();

After that, we need to navigate to the desired URL.

Below is the sample code to navigate to the desired URL:

// Launch Website  
driver.navigate().to("https://money.rediff.com/gainers/bsc/daily/groupa. ");

Here is the complete code for above scenario:

Step 5: To find second row of a table

Step 6: Find tables 2^nd row and 2^nd cell data.

Now, our final test script will look something like:

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

public class RowdataandCell {

public static void main(String[] args) {
// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\geckodriver.exe");

        WebDriver driver = new ChromeDriver();
        driver.get("https://money.rediff.com/gainers/bsc/daily/groupa.");
WebElement baseTable = driver.findElement(By.tagName("table"));
 
//To find the second row of a table
WebElement Rowtable = baseTable.findElement(By.xpath("//*[@id=\'leftcontainer\']/table/tbody/tr[2]"));
String rowtext = Rowtable.getText();
System.out.println("The row text of the web table : "+rowtext);

//To get 2nd row's 2nd column data
WebElement cellNo = Rowtable.findElement(By.xpath("//*[@id=\'leftcontainer\']/table/tbody/tr[2]/td[2]"));
String valueNo = cellNo.getText();
System.out.println("Cell value is : "+valueNo);
driver.close();



}

}

Code Explanation:

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

Output:

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

Consider the below example, to get the maximum of all values in a particular column.

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

public static void main(String[] args) throws ParseException {
// TODO Auto-generated method stub
System.setProperty("webdriver.chrome.driver", "D:\\Drivers\\geckodriver.exe");

        WebDriver driver = new ChromeDriver();
        driver.get("https://money.rediff.com/gainers/bsc/daily/groupa.");
        String max;
        double n=0, p=0;
        
        //No of Columns
        List<WebElement>  columns = driver.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th"));
        System.out.println("No of columns : " +columns.size());
        
      //No of Rows
        List<WebElement>  rows = driver.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]"));
        System.out.println("No of rows : " +rows.size());
        
        for (int i =1;i<rows.size();i++)
        {    
            max= driver.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();
            n = Double.parseDouble(max);
            if(n>p)
             {    
                p=n;
             }
        }
        System.out.println("The web table current price : "+ p);

        

}

}

Code Explanation:

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

Conclusion:

To access the table elements we use By.xpath()
Static web tables are consistent which means it has a fixed number of rows and cell data
Dynamic web table is inconsistent which means the number of rows and columns will be dynamically changing, and it keeps on increasing or decreasing based on data.
We access dynamic web tables with their X-path in Selenium Webdriver.