Automating Table Sorting with Selenium and TestNG: A Step-by-Step Guide

In today’s world of web development and testing, automating repetitive tasks is essential for efficiency and accuracy. One such task is verifying the sorting functionality of HTML tables. In this blog post, we’ll walk through how to automate the process of sorting a table and verifying its correctness using Selenium WebDriver, TestNG, and Java.

The Problem

Imagine you have a webpage with a table that can be sorted by clicking a button. Your goal is to:

1. Automate the process of clicking the sort button.

2. Extract the data from the table.

3. Verify that the table is sorted correctly.

To achieve this, we’ll use the following tools and libraries:

• Selenium WebDriver: For browser automation.

• TestNG: For test management and assertions.

• WebDriverManager: For managing browser drivers.

• Java Collections: For sorting and comparing lists.

The Code

Below is the complete Java code for automating the table sorting verification:

package me.hossain.ebrahim;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.testng.annotations.AfterSuite;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.Test;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SortingTable {
    WebDriver driver;

    @BeforeSuite
    public void startChromeBrowser() {
        // Set up ChromeDriver using WebDriverManager
        WebDriverManager.chromedriver().setup();
        driver = new ChromeDriver();
        driver.manage().window().maximize();

        // Navigate to the target webpage
        driver.get("https://www.w3schools.com/howto/howto_js_sort_table.asp");
    }

    @Test
    public void sorting() {
        // Click on the Sort button
        driver.findElement(By.xpath("//button[contains(text(),'Sort')]")).click();

        // Fetch the list of elements from the first column of the table
        List<WebElement> tdList = driver.findElements(By.xpath("//table[@id='myTable']/tbody/tr/td[1]"));

        // Extract text from the table cells and store in a list
        List<String> originalList = new ArrayList<>();
        for (WebElement td : tdList) {
            originalList.add(td.getText());
        }

        // Print the original list
        System.out.println("Original List:");
        for (String item : originalList) {
            System.out.println(item);
        }

        // Create a copy of the original list and sort it
        List<String> sortedList = new ArrayList<>(originalList);
        Collections.sort(sortedList);

        // Print the sorted list
        System.out.println("\nSorted List:");
        for (String item : sortedList) {
            System.out.println(item);
        }

        // Verify if the original list is sorted
        if (originalList.equals(sortedList)) {
            System.out.println("\nThe list is correctly sorted.");
        } else {
            System.out.println("\nThe list is not correctly sorted.");
        }
    }

    @AfterSuite
    public void closeChromeBrowser() {
        // Close the browser
        driver.close();
    }
}

---

Step-by-Step Breakdown

1. Setting Up the Environment

We use WebDriverManager to automatically manage the ChromeDriver executable. This eliminates the need to manually download and configure the driver.

WebDriverManager.chromedriver().setup();
driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.w3schools.com/howto/howto_js_sort_table.asp");

2. Clicking the Sort Button

The sorting() method begins by locating and clicking the "Sort" button on the webpage using an XPath selector.

driver.findElement(By.xpath("//button[contains(text(),'Sort')]")).click();

3. Extracting Table Data

After sorting, we extract the data from the first column of the table. We use an XPath selector to locate all <td> elements in the first column and store their text in a list.

List<WebElement> tdList = driver.findElements(By.xpath("//table[@id='myTable']/tbody/tr/td[1]"));
List<String> originalList = new ArrayList<>();
for (WebElement td : tdList) {
    originalList.add(td.getText());
}

4. Sorting and Comparing

We create a copy of the original list and sort it using Collections.sort(). Then, we compare the sorted list with the original list to verify if the table is sorted correctly.

List<String> sortedList = new ArrayList<>(originalList);
Collections.sort(sortedList);

if (originalList.equals(sortedList)) {
    System.out.println("\nThe list is correctly sorted.");
} else {
    System.out.println("\nThe list is not correctly sorted.");
}

5. Cleaning Up

Finally, we close the browser after the test is complete.

driver.close();

---

Running the Test

To run this test, ensure you have the following dependencies in your pom.xml (if using Maven):

<dependencies>
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.10.0</version>
    </dependency>
    <dependency>
        <groupId>org.testng</groupId>
        <artifactId>testng</artifactId>
        <version>7.8.0</version>
    </dependency>
    <dependency>
        <groupId>io.github.bonigarcia</groupId>
        <artifactId>webdrivermanager</artifactId>
        <version>5.4.1</version>
    </dependency>
</dependencies>

Run the test using TestNG, and you’ll see the original and sorted lists printed in the console, along with a message indicating whether the table is correctly sorted.

---

Conclusion

Automating table sorting verification is a great way to ensure the functionality of your web application. By leveraging Selenium, TestNG, and Java, we can easily automate this process and integrate it into our testing pipeline. This approach can be extended to more complex scenarios, such as sorting by multiple columns or handling dynamic data.

Feel free to modify the code and experiment with different webpages and tables. Happy testing! 🚀