Handling Dynamic Web Tables Using Selenium WebDriver

Web tables find their classification in two distinct forms: Static Web Tables and Dynamic Web Tables.

Static Web Tables: Here, constancy prevails. Rows and columns remain unchanging, maintaining their fixed count. Take, for instance, in a Table of Days or Months, nothing is expected to change.
Dynamic Web Tables: Here, rows and columns can change. For example, in a Student Table, an entity mirroring enrollment can change since enrolled students change yearly.

Managing static web tables is easier, whereas dealing with dynamic web tables presents a slight challenge due to the constant changes in their rows and columns.

Locating Web Table Elements with XPath

Before we go searching for web elements, let’s first get what a web element actually is.

So, what’s a web element?

A web element is basically an HTML element like radio buttons, dropdowns, textboxes, or submit buttons. These HTML things start with a tag and end with a tag.

For example:

<p> My HTML Document</p>

Steps to get X-Path of web elements.

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

Step 2: Right-click on the web element labeled “Company,” the one you want to find the XPath for, and select “Inspect”.

Your screen will be as shown

Step 3: Now, right-click on the highlighted web element for “Company,” choose “Copy,” and then click on “Copy XPath.

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

Example: How to Get the Count of Rows and Columns in a Dynamic WebTable.

When a web table is dynamic, its exact number of rows and columns can’t be predicted in advance.

With the help of Selenium WebDriver, we can determine:

The count of rows and columns in a web table.
Data in a specific X row or Y column.

The code snippet below helps to fetch the total count of rows and columns in a 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:

At first we initialized chrome driver.
Here 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 row and column of Dynamic Web Table

Let’s assume we need to fetch 2^nd row of the table and its second cell 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);

        

}

}

Explanation of Code:

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.