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

One Comment