Dynamic Tables

Introduction

Dynamic Tables are web tables whose contents can change at runtime based on user interactions or application behavior. Unlike static tables, dynamic tables may update their rows, columns, or displayed data when users perform actions such as sorting, filtering, searching, or pagination.

Modern web applications frequently use dynamic tables for displaying transaction histories, employee records, product listings, reports, and analytical data. Since the displayed information changes dynamically, Selenium automation scripts must retrieve the latest table data after every interaction instead of relying on previously located elements.

In Selenium, Dynamic Tables are commonly handled using Explicit Waits together with techniques such as re-locating web elements after sorting, filtering, or other dynamic updates.

In this tutorial, you’ll learn how to handle Dynamic Tables using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.


What are Dynamic Tables?

Dynamic Tables are HTML tables that update their contents dynamically based on:

  • Sorting operations

  • Filtering options

  • Search functionality

  • Pagination

  • AJAX requests

  • API responses

  • User interactions

Common examples include:

  • Employee management tables

  • Banking transaction reports

  • Product listings

  • Sales dashboards

  • Customer management systems

  • Inventory reports

Unlike static tables, the displayed data may change multiple times during a single test execution.


Why Automate Dynamic Tables?

Automating Dynamic Tables helps you:

  • Validate sorting functionality.

  • Verify dynamically loaded data.

  • Test filtering operations.

  • Validate search results.

  • Improve automation coverage.


Common Methods Used

MethodPurpose
find_element()Locates table elements
WebDriverWait()Synchronizes dynamic updates
text_to_be_present_in_element()Waits for updated table content
click()Performs sorting and filtering operations
textRetrieves table cell values
XPathLocates rows and columns dynamically

Example

The following example sorts the Last Name column, waits for the table contents to update, and verifies that the first row contains the expected value.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


# Topic: 28. Tables and Calendars - Dynamic Tables
# Practice site: https://the-internet.herokuapp.com/tables
# Run: pytest -s 28_examples/test_02_dynamic_tables.py
#
# Dynamic tables change content based on user actions like sorting or
# filtering. Re-query the table after each action.


def test_dynamic_tables():
    driver = webdriver.Chrome()

    try:
        driver.get("https://the-internet.herokuapp.com/tables")

        last_name_header = driver.find_element(
            By.XPATH,
            "//table[@id='table1']//th[text()='Last Name']"
        )

        last_name_header.click()

        WebDriverWait(driver, 5).until(
            EC.text_to_be_present_in_element(
                (
                    By.XPATH,
                    "//table[@id='table1']//tbody/tr[1]/td[1]"
                ),
                "Bach",
            )
        )

        first_cell = driver.find_element(
            By.XPATH,
            "//table[@id='table1']//tbody/tr[1]/td[1]"
        )

        assert first_cell.text == "Bach"

    finally:
        driver.quit()

Output

The table is sorted successfully.

The first row of the Last Name column contains:

Bach

The table updates dynamically after the sorting operation, and Selenium successfully validates the updated contents.

Note: Dynamic Tables may update their contents after sorting, filtering, or pagination operations. Always retrieve the latest elements after the table is refreshed to avoid synchronization issues.


Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

Imports:

  • webdriver for browser automation.

  • By for locating web elements.

  • WebDriverWait for synchronization.

  • Expected Conditions for waiting until the table contents are updated.

Create the WebDriver

driver = webdriver.Chrome()

Launches a new Chrome browser session.

Open the Practice Website

driver.get(
    "https://the-internet.herokuapp.com/tables"
)

Opens the webpage that contains sample dynamic tables.

Locate the Column Header

last_name_header = driver.find_element(
    By.XPATH,
    "//table[@id='table1']//th[text()='Last Name']"
)

This locates the Last Name column header of the table.

The column header is used to trigger the sorting operation.

Perform the Sorting Operation

last_name_header.click()

Clicking the column header sorts the table dynamically.

After the click operation:

  • The displayed rows are updated.

  • Table contents change dynamically.

  • Selenium must wait for the updated values before performing validations.

Wait for the Updated Table Data

WebDriverWait(driver, 5).until(
    EC.text_to_be_present_in_element(
        (
            By.XPATH,
            "//table[@id='table1']//tbody/tr[1]/td[1]"
        ),
        "Bach",
    )
)

The WebDriverWait() method waits until:

Bach

appears in the first row of the Last Name column.

The following Expected Condition is used:

text_to_be_present_in_element()

This condition repeatedly checks whether the expected value has appeared after the sorting operation completes.

Retrieve the Updated Cell Value

first_cell = driver.find_element(
    By.XPATH,
    "//table[@id='table1']//tbody/tr[1]/td[1]"
)

Notice that Selenium locates the table cell again after the sorting operation.

Dynamic tables frequently refresh their contents after user interactions. Re-locating elements ensures that Selenium always works with the latest version of the DOM.

Verify the Updated Value

assert first_cell.text == "Bach"

This assertion verifies that:

Bach

is displayed successfully after the sorting operation completes.

Close the Browser

driver.quit()

Closes the browser and terminates the WebDriver session.

This is a recommended practice to ensure that browser resources are released properly after test execution.


Why Re-query Dynamic Tables?

Dynamic tables frequently update their contents after:

  • Sorting

  • Filtering

  • Searching

  • Pagination

  • AJAX requests

Instead of writing:

cell.click()

assert cell.text == "Bach"

it is usually better to locate the updated element again after the table refreshes.

Example:

updated_cell = driver.find_element(...)

assert updated_cell.text == "Bach"

This approach significantly improves automation reliability.


Practical Example

Suppose an e-commerce website allows users to sort products by:

  • Price

  • Rating

  • Availability

  • Brand

The automation script:

  • Selects the sorting option.

  • Waits for the table contents to update.

  • Verifies that the displayed products are sorted correctly.

This validates both the application’s functionality and business requirements.


Automation Testing Example

Consider an online banking application.

The transaction history table allows users to:

  • Sort by Date

  • Filter by Amount

  • Search Transaction IDs

  • Navigate between pages

The automation script:

  • Performs the required operation.

  • Waits for the updated results.

  • Validates the displayed information.

  • Continues with additional business validations.

Dynamic Tables are extensively used in enterprise-level applications that manage large datasets.


Real-World Example

Dynamic Tables are commonly used in:

  • Banking applications

  • E-commerce websites

  • CRM systems

  • Healthcare portals

  • HR management systems

  • Government websites

  • Enterprise web applications

They are particularly useful for displaying large amounts of dynamically changing business information.


Advantages of Automating Dynamic Tables

  • Validates sorting functionality.

  • Supports dynamic datasets.

  • Improves automation coverage.

  • Handles real-world business scenarios.

  • Improves automation reliability.


Common Mistakes Beginners Make

Not Waiting for Table Updates

Many beginners immediately validate table contents after clicking:

header.click()

Always wait until the updated data becomes available before performing validations.

Not Re-locating Updated Elements

Dynamic tables frequently refresh their DOM contents.

Always retrieve updated elements after:

  • Sorting

  • Filtering

  • Searching

  • Pagination

Using Fragile XPath Expressions

Prefer stable locators whenever possible.

Avoid unnecessarily complex XPath expressions that are difficult to maintain.

Ignoring Synchronization

Dynamic tables often depend upon:

  • AJAX requests

  • JavaScript rendering

  • API responses

Use Explicit Wait whenever necessary.


Best Practices

  • Use Explicit Wait for dynamic table operations.

  • Re-locate elements after table updates.

  • Prefer stable locators whenever possible.

  • Validate both sorting behavior and displayed data.

  • Use text_to_be_present_in_element() appropriately.

  • Avoid hardcoding row positions unnecessarily.

  • Synchronize properly before validating dynamically updated information.


Conclusion

Dynamic Tables are widely used in modern web applications to display business-critical information that changes at runtime. Selenium provides powerful mechanisms for handling dynamic updates through Explicit Waits, proper synchronization techniques, and element re-location strategies. By validating updated table contents carefully, you can build reliable and maintainable automation scripts for enterprise-level applications.


Frequently Asked Questions (FAQs)

What makes a table dynamic?

Dynamic Tables update their contents based on:

  • Sorting

  • Filtering

  • Searching

  • Pagination

  • AJAX requests

  • API responses

Why should I re-locate table elements?

Dynamic updates may refresh the DOM and invalidate previously located elements. Re-locating elements improves automation reliability.

Which Expected Condition is commonly used?

One commonly used condition is:

text_to_be_present_in_element()

for validating updated table contents.

Are Dynamic Tables commonly automated in Selenium?

Yes.

They are extensively used across modern enterprise applications for displaying large datasets and analytical information.

Why is synchronization important for Dynamic Tables?

Proper synchronization ensures that Selenium validates the latest version of the displayed information after the table contents have been updated.


Key Takeaways

  • Dynamic Tables update their contents at runtime based on user interactions.

  • Always synchronize table updates before performing validations.

  • Re-locate elements after sorting, filtering, or pagination operations.

  • Use Explicit Wait when working with dynamically changing data.

  • Prefer stable locators whenever possible.

  • Validate both the table behavior and displayed information carefully.

  • Proper synchronization significantly improves automation reliability when handling Dynamic Tables.