Web Tables

Introduction

Web Tables are one of the most commonly used UI components in web applications. They are used to display structured information in rows and columns, making it easier for users to view, compare, and manage data.

Modern web applications use tables extensively for displaying employee records, transaction histories, product listings, customer details, reports, and analytics data. Selenium allows us to locate table rows, columns, and individual cells to validate and interact with the displayed information.

In Selenium, web tables are typically automated using methods such as find_element(), find_elements(), and HTML table tags like table, tr, th, and td.

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


What are Web Tables?

A Web Table is an HTML element used to display information in a tabular format consisting of:

  • Rows

  • Columns

  • Headers

  • Cells

The most commonly used HTML tags are:

HTML Tag Purpose
table Represents the entire table
tr Represents a table row
th Represents a table header
td Represents table data (cells)

Example HTML:

<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
    </tr>

    <tr>
        <td>John</td>
        <td>QA</td>
    </tr>
</table>

Why Automate Web Tables?

Automating Web Tables helps you:

  • Verify displayed data.

  • Validate reports and analytics.

  • Test sorting and filtering functionality.

  • Extract information dynamically.

  • Improve automation coverage.


Common Methods Used

Method Purpose
find_element() Locates a table or specific cell
find_elements() Retrieves multiple rows or columns
text Retrieves cell values
is_displayed() Verifies table visibility
TAG_NAME Locates rows, headers, and cells
CSS Selector Locates specific table elements

Example

The following example locates a web table, retrieves its rows, verifies that data exists, and validates the contents of the first data row.

from selenium import webdriver
from selenium.webdriver.common.by import By


# Topic: 28. Tables and Calendars - Web Tables
# Practice site: https://the-internet.herokuapp.com/tables
# Run: pytest -s 28_examples/test_01_web_tables.py
#
# HTML tables use tr, th, and td elements. Locate rows and cells to read or
# verify table data.


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

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

        table = driver.find_element(By.ID, "table1")
        rows = table.find_elements(By.TAG_NAME, "tr")

        assert len(rows) > 1

        first_data_row = rows[1]
        cells = first_data_row.find_elements(By.TAG_NAME, "td")
        assert len(cells) == 4
        assert cells[0].text == "Smith"
    finally:
        driver.quit()

Output

The table is located successfully.

Number of rows found: Greater than 1

The first data row contains four columns.

The value of the first cell is:

Smith

The table data is successfully retrieved and validated using Selenium.

Note: The first row of the table contains the column headers. Therefore, the example accesses rows[1] to retrieve the first row containing actual data.


Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By

Imports:

  • webdriver for browser automation.

  • By for locating web elements.

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 HTML tables.

Locate the Table

table = driver.find_element(
    By.ID,
    "table1"
)

This locates the first HTML table using its ID attribute.

Using unique IDs is generally the preferred approach because they provide reliable and maintainable locators.

Retrieve All Table Rows

rows = table.find_elements(
    By.TAG_NAME,
    "tr"
)

The <tr> tag represents a table row.

This statement retrieves:

  • Header rows

  • Data rows

from the table.

Verify Table Data Exists

assert len(rows) > 1

The first row usually contains the table headers.

This assertion verifies that at least one data row exists in the table.

Access the First Data Row

first_data_row = rows[1]

Since:

rows[0]

contains the table headers, the first row containing actual data is:

rows[1]

Retrieve the Table Cells

cells = first_data_row.find_elements(
    By.TAG_NAME,
    "td"
)

The <td> tag represents table data cells.

This retrieves all columns from the selected row.

Verify the Number of Columns

assert len(cells) == 4

This verifies that the selected row contains four columns.

Performing such validations helps ensure that the application’s UI structure remains consistent.

Verify the Cell Value

assert cells[0].text == "Smith"

The first cell of the selected row contains:

Smith

This assertion validates that the expected value is displayed correctly.

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.


Reading Table Data Dynamically

You can iterate through all rows and columns dynamically.

Example:

rows = table.find_elements(By.TAG_NAME, "tr")

for row in rows:
    print(row.text)

Similarly, individual cells can be accessed using:

cells = row.find_elements(By.TAG_NAME, "td")

This approach is commonly used in Data-Driven Testing and report validation.


Practical Example

Suppose an e-commerce website displays:

  • Product names

  • Prices

  • Ratings

  • Stock availability

The automation script:

  • Reads the table data.

  • Verifies product prices.

  • Confirms stock availability.

  • Validates sorting functionality.

This ensures that the application’s business data is displayed correctly.


Automation Testing Example

Consider an online banking application.

The transaction history table displays:

  • Transaction ID

  • Date

  • Amount

  • Transaction Status

The automation script:

  • Retrieves all transaction records.

  • Verifies successful transactions.

  • Validates account balances.

  • Confirms the correctness of displayed information.

Web Tables are extensively used in enterprise-level applications that display business-critical information.


Real-World Example

Web 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 structured business information and analytical reports.


Advantages of Automating Web Tables

  • Validates business data.

  • Improves automation coverage.

  • Supports data-driven testing.

  • Handles dynamic datasets.

  • Improves automation reliability.


Common Mistakes Beginners Make

Ignoring Header Rows

Many beginners assume:

rows[0]

contains actual data.

However, it often contains:

  • Column headers

Always verify the table structure before accessing row data.

Using Fragile XPath Expressions

Prefer stable locators such as:

  • ID

  • CSS Selector

  • TAG_NAME

Avoid unnecessarily complex XPath expressions whenever possible.

Hardcoding Row Numbers

Large enterprise applications frequently update their data dynamically.

Instead of assuming:

rows[5]

always exists, verify:

len(rows)

before accessing the row.

Ignoring Synchronization

Some tables are populated dynamically using:

  • AJAX requests

  • API responses

  • JavaScript rendering

Use Explicit Wait when necessary before validating table contents.


Best Practices

  • Prefer stable locators such as ID and CSS Selector.

  • Verify that data rows exist before accessing them.

  • Use dynamic approaches whenever possible.

  • Validate both row and column counts.

  • Use Explicit Wait for dynamically loaded tables.

  • Avoid hardcoding row positions unnecessarily.

  • Verify business data carefully when performing validations.


Conclusion

Web Tables are among the most frequently used UI components in modern web applications. Selenium provides powerful mechanisms for locating tables, retrieving row and column data, and validating business information efficiently. By combining proper synchronization techniques with stable locators and dynamic validations, you can build reliable and maintainable automation scripts for handling web tables across enterprise applications.


Frequently Asked Questions (FAQs)

Which HTML tags are commonly used in Web Tables?

The most commonly used tags are:

  • table

  • tr

  • th

  • td

How can I retrieve all rows from a table?

Use:

find_elements(By.TAG_NAME, "tr")

How can I retrieve all cells from a row?

Use:

find_elements(By.TAG_NAME, "td")

Are Web Tables commonly automated in Selenium?

Yes.

Web Tables are extensively used in enterprise applications for displaying business data and analytical reports.

Can Web Tables contain dynamically loaded data?

Yes.

Many modern applications populate tables dynamically using JavaScript, AJAX requests, or API responses.


Key Takeaways

  • Web Tables display structured information using rows and columns.

  • Use tr, th, and td tags for locating table components.

  • Prefer stable locators such as ID and CSS Selector.

  • Validate both row and column counts whenever appropriate.

  • Use Explicit Wait for dynamically populated tables.

  • Dynamic approaches improve automation reliability and maintainability.

  • Web Tables are widely used across modern enterprise web applications.