Mastering Static and Dynamic Web Tables in Selenium WebDriver (Java)

Web tables are one of the most important elements in UI testing β€” whether you’re validating product listings, employee records, or transaction summaries.

In this comprehensive guide, you’ll learn how to automate web tables using Selenium WebDriver (Java) β€” including static tables, dynamic tables, cell extraction, and pagination.


🧠 Understanding Web Tables

HTML tables are structured like this:

htmlCopyEdit<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr>
    <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td></tr>
  </tbody>
</table>

🟩 1. Handling Static Tables in Selenium

Let’s assume we have this HTML table:

htmlCopyEdit<table id="employeeTable">
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>John</td><td>QA Engineer</td></tr>
  <tr><td>Sara</td><td>Developer</td></tr>
  <tr><td>Mike</td><td>Manager</td></tr>
</table>

βœ… 1.1 Get Total Row Count

javaCopyEditList<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']/tr"));
System.out.println("Total Rows: " + rows.size());

βœ… 1.2 Get Total Column Count

javaCopyEditList<WebElement> cols = driver.findElements(By.xpath("//table[@id='employeeTable']/tr[1]/th"));
System.out.println("Total Columns: " + cols.size());

βœ… 1.3 Get All Table Data

javaCopyEditfor (int i = 2; i <= rows.size(); i++) {
    for (int j = 1; j <= cols.size(); j++) {
        String cell = driver.findElement(By.xpath("//table[@id='employeeTable']/tr[" + i + "]/td[" + j + "]")).getText();
        System.out.print(cell + " | ");
    }
    System.out.println();
}

βœ… 1.4 Get Data from a Specific Row (e.g., 2nd row)

javaCopyEditList<WebElement> row2 = driver.findElements(By.xpath("//table[@id='employeeTable']/tr[3]/td"));
for (WebElement cell : row2) {
    System.out.println(cell.getText());
}

βœ… 1.5 Get Data from a Specific Column (e.g., Role Column)

javaCopyEditList<WebElement> roles = driver.findElements(By.xpath("//table[@id='employeeTable']/tr/td[2]"));
for (WebElement role : roles) {
    System.out.println(role.getText());
}

βœ… 1.6 Get Specific Cell Data (e.g., Row 3, Column 1)

javaCopyEditString specificData = driver.findElement(By.xpath("//table[@id='employeeTable']/tr[4]/td[1]")).getText();
System.out.println("Row 3, Column 1: " + specificData);

βœ… 1.7 Count Total Cells in Table

javaCopyEditList<WebElement> allCells = driver.findElements(By.xpath("//table[@id='employeeTable']//td"));
System.out.println("Total Cells: " + allCells.size());

🟨 2. Handling Dynamic Tables in Selenium

Dynamic tables are rendered via JavaScript or AJAX. Example structure:

htmlCopyEdit<table id="productTable">
  <tbody>
    <tr><td>TV</td><td>1200</td></tr>
    <tr><td>Laptop</td><td>2200</td></tr>
  </tbody>
</table>

βœ… 2.1 Extract Rows from Dynamic Table

javaCopyEditWebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
List<WebElement> rows = wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(
    By.cssSelector("#productTable tbody tr")
));

for (WebElement row : rows) {
    List<WebElement> cells = row.findElements(By.tagName("td"));
    for (WebElement cell : cells) {
        System.out.print(cell.getText() + " | ");
    }
    System.out.println();
}

βœ… 2.2 Find and Click on Row by Cell Value

javaCopyEditfor (WebElement row : rows) {
    if (row.getText().contains("Laptop")) {
        row.click();
        break;
    }
}

βœ… 2.3 Handling Pagination

javaCopyEditboolean found = false;

while (!found) {
    List<WebElement> rows = driver.findElements(By.cssSelector("table#data tbody tr"));
    for (WebElement row : rows) {
        if (row.getText().contains("Mike")) {
            row.findElement(By.cssSelector("button.view")).click();
            found = true;
            break;
        }
    }

    if (!found) {
        WebElement nextBtn = driver.findElement(By.id("nextPage"));
        if (nextBtn.isEnabled()) {
            nextBtn.click();
        } else {
            break; // No more pages
        }
    }
}

🧠 Summary Table

ScenarioStatic TableDynamic Table
Row CountUse tr tags directlyUse tbody tr, wait for visibility
Column CountUse first row th/tdSimilar, but may vary on each load
Specific Cell DataUse XPath by indexSame approach with waits
Entire Table ExtractionLoop through rows/columnsLoop with wait and condition checks
Pagination HandlingUsually not requiredRequires looping and “Next” click
Tools RequiredSelenium WebDriverWebDriver + WebDriverWait

🏁 Final Thoughts

Web tables are rich in data and functionality. With Selenium, you can:

  • Validate data
  • Trigger UI actions from rows
  • Interact with filters, sorters, and paginators

πŸ§ͺ Always inspect the DOM structure before writing locators, and use explicit waits when dealing with dynamic tables.

Leave a Comment

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

Scroll to Top