_edited_edited.png)
Web Tables in Selenium
A Web Table in selenium is Web Element used for the table representation of data. Data is presented in a structure from using rows and columns. The only difference is that they displayed on the web with the help of HTML code.
<table> - tag is define HTML code
<th> -> represents header of the table
<tr> -> tags used for rows
<td> -> tags used for columns
Types of Web Table
Depends upon the table data, web table classified two types they are Static and Dynamic Web Tables.
1) Static Web Tables
Static Web Table can easily locate and interact because the data is fixed. It is not changed in dynamically. It is typically created using HTML and CSS, and the data is hard-coded within the table structure. Static tables are useful for displaying fixed information that doesn’t require frequent updates.
2) Dynamic Web Tables
The dynamic table can change based on user interactions, data updates, or other events. The data will be changed dynamically, the number of rows and columns might also change depending upon the data. Due to the dynamic nature of their content, they are called Dynamic Web Tables.
How to handle Static Web table
We can automate the static web table using the XPath locator. Using of XPath locator, we can find out the no. of rows and columns in the table. Once we got the no. of rows and columns then it gets easier for us to fetch data from every table cell by using two loops one for the row and other for the column.
Let’s understand the handling of Static Web Element with help of an example https://www.tutorialspoint.com/selenium/practice/webtables.php
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class staticwebtable1 {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://www.tutorialspoint.com/selenium/practice/webtables.php");
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(50));
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(50));
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
//How many rows in the table
int rows = driver.findElements(By.xpath("//table[@class='table table-striped mt-3']/tbody/tr")).size();
System.out.println("total no of rows ="+rows);
//How many columns in the table
int columns = driver.findElements(By.xpath("//table[@class=\"table table-striped mt- 3\"]/thead/tr/th")).size();
System.out.println("total no of columns ="+columns);
//Retrieve the specific column/row in the table
String value = driver.findElement(By.xpath("//table[@class=\"table table-striped mt-3\"]//tr[3]/td[1]")).getText();
System.out.println("Specific value is ="+value);
//Rertrive all data from table
System.out.println("Data from Table....");
for (int r=1; r<=rows; r++ )
{
for (int c=1; c<=columns; c++)
{
String data = driver.findElement(By.xpath("//table[@class=\"table table-striped mt-3\"]//tr["+r+"]/td["+c+"]")).getText();
System.out.println(data+" ");
}
System.out.println("");
}
// Specific data get from table
for(int r=1;r<=rows;r++)
{
String Firstname = driver.findElement(By.xpath("//table[@class=\"table table-striped mt-3\"]//tr["+r+"]/td[1]")).getText();
if(Firstname.equals("Alden"))
{
String email= driver.findElement(By.xpath("//table[@class=\"table table-striped mt-3\"]//tr["+r+"]/td[4]")).getText();
String salary= driver.findElement(By.xpath("//table[@class=\"table table-striped mt-3\"]//tr["+r+"]/td[5]")).getText();
System.out.println(Firstname+" "+email+ " "+salary);
}
driver.quit();
}
}
}
Static Web Element does not change. It is fixed. So First we can locate XPath of locator in no of rows and no of columns and get size of the table. Then we can automate specific row/columns in the table.
We can automate all data from the table and specific data get from the table.
How Handling Dynamic Web Table
Let’s Understand of Dynamic Web Table
import java.time.Duration;
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 DynamicWebtable {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://practice.expandtesting.com/dynamic-table");
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(20));
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(20));
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
List<WebElement> rows= driver.findElements(By.xpath("//table[@class='table table-striped']/tbody/tr"));
System.out.println("No of rows:"+rows.size());
for(int r=1; r<=rows.size(); r++)
{
WebElement name = driver.findElement(By.xpath("//table[@class='table table-striped']/tbody/tr["+r+"]/td[1]"));
if (name.getText().equals("Chrome"));
{
String cpuvalue = driver.findElement(By.xpath("//td[normalize-space()='Chrome']//following-sibling::*[contains(text(),'%')]")).getText();
String value = driver.findElement(By.xpath("//p[@ id=\"chrome-cpu\"]")).getText();
System.out.println("cpuvalue is:"+cpuvalue);
System.out.println("value is :"+value);
if(value.contains(cpuvalue))
{
System.out.println("cpu value is equal");
}else
{
System.out.println("cpu value is not equal");
}
break;
}
}
}
}
In this table, dynamic web element changed frequently, it is means rows and columns changed every refresh.
We can automate these table to locate XPath, with find out no of rows and no of columns.
Here we can automate chrome cpu value, every refresh the rows and columns changed dynamically. So we can get rows and compare the name of “Chrome” to for loop method. And we can check if condition then compare to the cpu value of chrome.
Dynamic Table with Pagination
Pagination is a technique used to divide large data into smaller, more manageable chunks of data that can be accessed through navigation or links. This is often done by displaying a set number of rows per page, with links or buttons to navigate to other pages.
How to Handling Dynamic Table with Pagination
Let’s understanding pagination in dynamic table
In these website, we can automate the pagination.
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Dynamicpagination {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://www.ecomdeveloper.com/demo/admin/index.php");
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
WebElement username = driver.findElement(By.xpath("//*[@id=\"input-username\"]"));
username.clear();
username.sendKeys("demoadmin");
WebElement password = driver.findElement(By.xpath("//*[@id=\"input-password\"]"));
password.clear();
password.sendKeys("demopass");
driver.findElement(By.xpath("//*[@id=\"content\"]/div/div/div/div/div[2]/form/div[3]/button")).click();
driver.findElement(By.xpath("//*[@id=\"menu-customer\"]/a")).click();
driver.findElement(By.xpath("//*[@id=\"collapse9\"]/li[1]/a")).click();
// String s= Showing 1 to 20 of 900 (45 Pages);->(24+1, 28-1)
// s.substring(s.indexOf("(")+1, s.indexOf("Pages")-1);
//capture entire pages
String text = driver.findElement(By.xpath("//div[contains(text(),' Pages')]")).getText();
int total_pages = Integer.parseInt(text.substring(text.indexOf("(")+1,text.indexOf("Pages")-1));// parseInt - convert string to integer
//Repeating page
for(int p=1; p<=5; p++)
{
if(p>1)
{
WebElement active_page = driver.findElement(By.xpath("//ul[@class='pagination']//*[text()="+p+"]"));
active_page.click();
}
// Reading data from page
int No_of_rows = driver.findElements(By.xpath("//*[@id=\"form-customer\"]/table//tbody//tr")).size();
for(int r=1; r<=No_of_rows; r++)
{
String customername = driver.findElement(By.xpath("//*[@id=\"form-customer\"]/table//tbody//tr["+r+"]//td[2]")).getText();
String email = driver.findElement(By.xpath("//*[@id=\"form-customer\"]/table//tbody//tr["+r+"]//td[3]")).getText();
String status = driver.findElement(By.xpath("//*[@id=\"form-customer\"]/table//tbody//tr["+r+"]//td[5]")).getText();
System.out.println(customername+" "+ email+" "+status);
}
}
}
}
In these examples, explaning the capture the entire page, repeating page, reading data from the page.
Dynamic Table with Sorting
Sort is organizing data in a particular order, allowing for information to be found easier. For example, names and contact information may be sorted be sorter in alphabetical order to allow the person looking for a name to see if it’s available.
How to Handling Dynamic table with sorting
Let’s understanding sorting in these example
import java.time.Duration;
import java.util.Arrays;
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;
import org.testng.Assert;
public class DynamicTableSortning {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://www.w3schools.com/howto/howto_js_sort_table.asp");
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
List<WebElement> names = driver.findElements(By.xpath("//*[@id=\"myTable\"]//tbody//tr//td[1]"));
String[] sort_name = new String[names.size()];
//Get the text in to Array
for (int i=0; i<names.size(); i++)
{
sort_name[i]=names.get(i).getText().trim();
}
System.out.println("Before sort function:");
Print(sort_name);
//Sorting Function using java
Arrays.sort(sort_name);
System.out.println("...After Sorting function...");
Print(sort_name);
//Sortning using sortbutton(web)
WebElement sortbutton = driver.findElement(By.xpath("//button[text()='Sort']"));
List<WebElement> names1 = driver.findElements(By.xpath("//*[@id=\"myTable\"]//tbody//tr//td[1]"));
String[] After_sort_name = new String[names.size()];
//Get the text in to Array
for (int i=0; i<names1.size(); i++)
{
After_sort_name[i]=names1.get(i).getText().trim();
}
System.out.println("....After sortning using button....");
Print(After_sort_name);
Assert.assertEquals(After_sort_name, sort_name);
System.out.println("System sort Properly");
}
public static void Print(String[] ar) {
for(int i=0; i<ar.length;i++)
{
System.out.println(ar[i]);
}
}
}
}
In these example, explain how we can sorting using array method and sorting button.
Dynamic Table with CheckBox
All checkboxs are identified using the input tagname and attiribute is called "type" with its value is Checkbox.
How to handling Dynamic Table with CheckBox
Lets understanding Dynamic CheckBox in these Examples
import java.time.Duration;
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;
import io.opentelemetry.exporter.logging.SystemOutLogRecordExporter;
public class Dynamiccheckbox {
public static void main(String[] args) throws InterruptedException {
WebDriver driver = new ChromeDriver();
driver.get("https://cosmocode.io/automation-practice-webtable/");
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
// 1)select All checkboxes
List<WebElement> checkboxes = driver.findElements(By.xpath("//input[@type='checkbox']"));
for(WebElement check:checkboxes) {
if(!check.isSelected()) {
check.click();
}
}
//(or) Select All checkboxes
List<WebElement> checks = driver.findElements(By.xpath("//input[@type='checkbox']"));
int check= checks.size();
System.out.println("Total checkbox:"+check);
for(int i=0; i<check; i++) {
checks.get(i).click();
System.out.println(checks.get(i).getAttribute("value"));
}
for(WebElement checkbox:checks) {
checkbox.click();
}
//2) Select last 10 checkbox
//total no of checkboxes -how many checkboxes want to select =starting index(196-10)
List<WebElement> checks = driver.findElements(By.xpath("//input[@type='checkbox']"));
int check = checks.size();
System.out.println("Total checkbox:"+check);
for(int i=186;i<check;i++) {
checks.get(i).click();
}
//3) Select first 4 checkbox
List<WebElement> checks = driver.findElements(By.xpath("//input[@type='checkbox']"));
int check= checks.size();
System.out.println("Total checkbox:"+check);
for(int i=0; i<4; i++) {
checks.get(i).click();
}
//4)if unselected checkbox they selected checkbox
List<WebElement> checks = driver.findElements(By.xpath("//input[@type='checkbox']"));
int check= checks.size();
System.out.println("Total checkbox:"+check);
for(int i=0; i<10; i++) {
checks.get(i).click();
}
Thread.sleep(1000);
for(int i=0; i<check; i++) {
{
if(checks.get(i).isSelected()) {
checks.get(i).click();
}
}
}
}
}
Conclusion:
Handling web tables is a fundamental skills for automating web application in the tabular format. we can understand difference between static and dynamic webtables allows startegies interact webelement, extract from data, and validation.