🖥️ What is a Web Table?

A web table (or HTML table) is a structure that organizes data into rows and columns using the <table> tag. Web tables are commonly used to display structured data, such as product listings, financial records, or employee details.

📌 Structure of an HTML Table

An HTML table consists of the following elements:

  • <table> → Defines the table.
  • <tr> → Represents a row in the table.
  • <th> → Represents a header cell (bold and centered by default).
  • <td> → Represents a data cell (normal text).

📝 Example of an HTML Table:

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>Software Engineer</td>
        <td>$80,000</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>QA Engineer</td>
        <td>$75,000</td>
    </tr>
</table>

🔍 How to Locate a Web Table in Selenium?

Before interacting with a web table, we need to identify its structure and locate it using Selenium WebDriver.

// Locate the table
WebElement table = driver.findElement(By.id("employeeTable"));

📌 How to Get Row Count in a Web Table?

To get the number of rows (excluding headers), we find all <tr> elements inside the <table>.

// Get all rows in the table
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']//tr"));

// Print row count
System.out.println("Total rows: " + rows.size());

📌 How to Get Column Count in a Web Table?

To count the number of columns, we locate the <th> elements in the header row.

// Get all column headers
List<WebElement> columns = driver.findElements(By.xpath("//table[@id='employeeTable']//tr[1]/th"));

// Print column count
System.out.println("Total columns: " + columns.size());

📌 How to Read Data from a Web Table?

We can extract the text of each cell (<td>) in the table using nested loops.

// Get total rows
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']//tr"));

// Loop through rows (start from index 2 to skip header row)
for (int i = 2; i <= rows.size(); i++) {
    // Get total columns
    List<WebElement> cols = driver.findElements(By.xpath("//table[@id='employeeTable']//tr[" + i + "]/td"));

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

🎯 How to Find Specific Data in a Web Table?

To find a particular value in the table (e.g., find the salary of "Jane Smith"), we can search row-wise:

// Locate the table rows
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']//tr"));

// Loop through rows
for (int i = 2; i <= rows.size(); i++) {
    // Get name column value
    WebElement nameCell = driver.findElement(By.xpath("//table[@id='employeeTable']//tr[" + i + "]/td[1]"));
    
    if (nameCell.getText().equals("Jane Smith")) {
        // Fetch salary of Jane Smith (3rd column)
        WebElement salaryCell = driver.findElement(By.xpath("//table[@id='employeeTable']//tr[" + i + "]/td[3]"));
        System.out.println("Jane Smith's Salary: " + salaryCell.getText());
        break;
    }
}

✅ How to Click a Button or Link Inside a Web Table?

If a web table contains buttons or links in any column, we can locate them dynamically.

📝 Example Table with Buttons:

<table id="userTable">
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td><button onclick="alert('Editing John')">Edit</button></td>
    </tr>
</table>

📌 Selenium Code to Click the "Edit" Button for John Doe:

// Find and click the 'Edit' button for John Doe
WebElement editButton = driver.findElement(By.xpath("//table[@id='userTable']//tr[td[text()='John Doe']]/td/button"));
editButton.click();

📊 Handling Dynamic Web Tables in Selenium WebDriver

🖥️ What is a Dynamic Web Table?

A dynamic web table is an HTML table where the rows and columns are generated dynamically based on user actions, database updates, or API responses. Unlike static tables, the number of rows and columns may change every time the page is loaded or refreshed.

📝 Example of a Dynamic Web Table:

<table id="employeeTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Engineering</td>
            <td>$80,000</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>QA</td>
            <td>$75,000</td>
        </tr>
    </tbody>
</table>

🔹 In this table, new rows might be added or removed dynamically through JavaScript or backend updates.

🚀 How to Automate Dynamic Web Tables Using Selenium?

Since the number of rows and columns is not fixed, we need dynamic locators to handle web tables efficiently.

📌 1️⃣ Get the Total Row Count in a Dynamic Table

// Locate all rows inside the table body
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']/tbody/tr"));
System.out.println("Total number of rows: " + rows.size());

📌 2️⃣ Get the Total Column Count in a Dynamic Table

// Locate all columns in the header row
List<WebElement> columns = driver.findElements(By.xpath("//table[@id='employeeTable']/thead/tr/th"));
System.out.println("Total number of columns: " + columns.size());

📌 3️⃣ Read and Print All Data from a Dynamic Table

Since the table structure changes dynamically, we use nested loops to extract all data.

// Get total rows
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']/tbody/tr"));

// Iterate through each row
for (int i = 1; i <= rows.size(); i++) {
    // Get total columns
    List<WebElement> cols = driver.findElements(By.xpath("//table[@id='employeeTable']/tbody/tr[" + i + "]/td"));

    // Iterate through each column
    for (int j = 1; j <= cols.size(); j++) {
        WebElement cell = driver.findElement(By.xpath("//table[@id='employeeTable']/tbody/tr[" + i + "]/td[" + j + "]"));
        System.out.print(cell.getText() + " | ");
    }
    System.out.println();
}

📌 4️⃣ Find and Click a Button Inside a Dynamic Table

If the table contains action buttons (e.g., Edit, Delete), we can locate and click them dynamically.

📝 Example Table with Buttons:

<table id="userTable">
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td><button class="edit-btn">Edit</button></td>
    </tr>
</table>

📌 Selenium Code to Click the "Edit" Button for John Doe:

// Locate and click the "Edit" button next to John Doe
WebElement editButton = driver.findElement(By.xpath("//table[@id='userTable']//tr[td[text()='John Doe']]/td/button[@class='edit-btn']"));
editButton.click();

📌 5️⃣ Find a Specific Row Containing a Value

For example, if we want to find the salary of Jane Smith, we can search dynamically:

// Get all rows
List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']/tbody/tr"));

// Iterate through each row
for (int i = 1; i <= rows.size(); i++) {
    // Get the Name column value
    WebElement nameCell = driver.findElement(By.xpath("//table[@id='employeeTable']/tbody/tr[" + i + "]/td[1]"));
    
    if (nameCell.getText().equals("Jane Smith")) {
        // Fetch salary of Jane Smith (3rd column)
        WebElement salaryCell = driver.findElement(By.xpath("//table[@id='employeeTable']/tbody/tr[" + i + "]/td[3]"));
        System.out.println("Jane Smith's Salary: " + salaryCell.getText());
        break;
    }
}

📌 6️⃣ Handling Pagination in a Dynamic Table

Some web applications display tables with pagination, meaning all data is not visible at once. To handle paginated tables:

  1. Navigate through pages using "Next" buttons.
  2. Extract table data from each page before moving to the next.
while (true) {
    // Get total rows on the current page
    List<WebElement> rows = driver.findElements(By.xpath("//table[@id='employeeTable']/tbody/tr"));
    
    // Read data from the current page
    for (WebElement row : rows) {
        System.out.println(row.getText());
    }

    // Check if the "Next" button is enabled
    WebElement nextButton = driver.findElement(By.id("nextPage"));
    if (!nextButton.isEnabled()) {
        break; // Exit loop if on the last page
    }
    
    nextButton.click(); // Click "Next" to go to the next page
}

📌 7️⃣ Handling Lazy-Loaded Web Tables

Some websites load rows dynamically as the user scrolls. In such cases, we use JavaScript scrolling before extracting data.

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement table = driver.findElement(By.id("employeeTable"));

// Scroll to the table
js.executeScript("arguments[0].scrollIntoView(true);", table);

🎯 Conclusion

Web tables are widely used in web applications, and Selenium provides powerful techniques to locate, extract, and interact with tabular data. By understanding the structure of tables, we can effectively automate web table interactions. 🚀

Handling dynamic web tables in Selenium requires a flexible approach using dynamic locators, loops, pagination handling, and scrolling techniques. By implementing these methods, you can efficiently extract and interact with table data, regardless of changes in the structure. 🚀Sometimes, web tables are dynamically generated, meaning the number of rows and columns changes based on data.