All IT Courses 50% Off
Selenium Tutorials

Handling Dynamic Web Tables Using Selenium WebDriver

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

  1. 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.
  2. 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?

All IT Courses 50% Off

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

Stock.PNG

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

Company-Inspect.PNG

Your screen will be as shown

Elements.PNG

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

Company.PNG

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:

  1. The count of rows and columns in a web table.
  2. 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.

File.PNG

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

Classname.PNG

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

Program.PNG

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 2nd row of the table and its second cell data of the table below-

example.PNG

Here is a sample code to get the 2nd row and 2nd 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 2nd row and 2nd 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.

File.PNG

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

Classname.PNG

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

secondrow.PNG

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

2nd.PNG

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 2nd row and gets its text using getText () function

Output:

output.PNG

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.

Total.PNG

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.
Selenium Advanced Training
Facebook Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Back to top button