In this blog we will discuss about automating dynamic web tables using Selenium WebDriver. Table is also a type of Web Element like checkbox, Radio Button, etc.

Table is a kind of web element, which is displayed, with the help of  tag in conjunction with the <tr> tag defines the row of the table and <th> tag tag for headings which defines heading of the table.

There are 2 types of HTML table

1. Static Table – Where number of rows and columns are fixed.
2. Dynamic Table – Where number of rows and columns are not fixed.

Below table is a Dynamic table. Based on input Assignee filter, the number of rows get altered. 

How to locate Web Table Elements

1) Open Chrome browser and go to – https://www.seleniumeasy.com/test/table-search-filter-demo.html

2) Take a note that “Element” tab is the one which displays all the HTML properties belonging to the current web page. Navigate to the “Element” tab if it is not opened by default on the launch.

3) In the screenshot, we can see the HTML code of Task web element of the table. Right click on this text and select Copy and then again click where will see options like – Copy Selector, Copy XPath, Copy full XPath.

Copy XPath
//*[@id="task-table"]/thead/tr/th[2]

Copy full XPath
/html/body/div[2]/div/div[2]/div[1]/div/table/thead/tr/th[2]

Copy Selector
#task-table > thead > tr > th:nth-child(2)

How to find full XPath of Web Table

If we divide this xpath  – /html/body/div[2]/div/div[2]/div[1]/div/table/thead/tr/th[2] into three different parts it will be like this

·         Part 1 – Location of the table in the webpage /html/body/div[2]/div/div[2]/div[1]/div />

·         Part 2 – Table body (data) starts from here

·         Part 3 – It says table row 1 and table head 2

In the below image, we can see that the highlighted tags are used to create absolute XPath – html/body/div[2]/div/div[2]/div[1]/div/table/thead/tr/th[2]

If we want to create a relative XPath, then the below image shows that find a unique identifier like id=’task-table’ and then create Relative XPath

//*[@id="task-table"]/thead/tr/th[2]

Below is an example, which will show how to fetch a particular cell data in Dynamic Web Table. We want to fetch the data from row 5 and column 3 and row 6  column 2. We have used Relative XPath as well as absolute XPath to fetch the data.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class DynamicTable_RowData {
        public static void main(String[] args) {
 System.setProperty("webdriver.chrome.driver","C:\\Users\\Vibha\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");

        WebDriver driver = new ChromeDriver();      
        driver.manage().window().maximize();
        driver.get("https://www.seleniumeasy.com/test/table-search-filter-demo.html");           
        
String CellData1 = driver.findElement(By.xpath("//*[@id='task-table']/tbody/tr[5]/td[3]")).getText();
        System.out.println("Data in 5th row and 3rd column :"+CellData1);

           String CellData2 = driver.findElement(By.xpath("/html/body/div[2]/div/div[2]/div[1]/div/table/tbody/tr[6]/td[2]")).getText();
        System.out.println("Data in 6th row and 2nd column :"+CellData2);
        driver.close();
        }
}

Output
Data in 5th row and 3rd column :Holden Charles
Data in 6th row and 2nd column :Browser Issues