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 2nd row of the table and its second cell 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);
}
}
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.
One Comment