Selenium with Java | Handling Auto-suggest Dropdown & Static Web Table

 In today's blog post, we'll dive into two common web automation challenges that Selenium testers often face: handling auto-suggest dropdowns and static web tables. Understanding how to interact with these elements can significantly enhance your Selenium skills, making your scripts more robust and versatile.

1. Handling Auto-suggest Dropdowns in Selenium

An auto-suggest dropdown is a dynamic feature used on many websites where a list of suggestions appears as you type. It’s commonly seen in search fields or forms. For example, when you type "Selenium" in Google, you immediately get a dropdown list of suggested queries.

Step-by-Step Guide:

Scenario: Let’s assume we are testing a website where you need to type a country name in an input box, and a list of suggestions appears dynamically.

Code Example:
// Import necessary packages
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;

public class AutoSuggestDropdown {
    public static void main(String[] args) throws InterruptedException {
        // Set path for the ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");
        WebDriver driver = new ChromeDriver();

        // Open a website with an auto-suggest dropdown
        driver.get("https://example.com/auto-suggest");

        // Find the input box element
        WebElement inputBox = driver.findElement(By.id("countryInput"));
        
        // Type 'Ind' to get suggestions for India
        inputBox.sendKeys("Ind");
        
        // Wait for suggestions to load (if needed)
        Thread.sleep(2000);
        
        // Capture all suggestions in a list
        List<WebElement> suggestions = driver.findElements(By.xpath("//ul[@class='suggestions']/li"));
        
        // Loop through the suggestions and click on 'India'
        for (WebElement suggestion : suggestions) {
            if (suggestion.getText().equalsIgnoreCase("India")) {
                suggestion.click();
                break;
            }
        }
        
        // Perform further actions or assertions here
        // Close the driver
        driver.quit();
    }
}

Explanation:

  • First, we navigate to the website with an auto-suggest feature.
  • We use the sendKeys method to simulate typing in the input field.
  • The suggestions are fetched using the findElements method, targeting the list of suggestions by their common XPath.
  • We then loop through the list of suggestions, click the desired option, and proceed with further actions.

2. Handling Static Web Tables in Selenium

Static web tables are often used to display data in a grid or tabular format. In contrast to dynamic tables, static tables have a fixed structure, meaning their rows and columns don’t change during runtime. A typical scenario is reading data from a table on a website and validating its content.

Step-by-Step Guide:

Scenario: Let’s consider a web page containing a table of student records, and we want to retrieve specific data from it.

Code Example:
// Import necessary packages
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.List;

public class StaticWebTable {
    public static void main(String[] args) {
        // Set path for the ChromeDriver
        System.setProperty("webdriver.chrome.driver", "path_to_chromedriver");
        WebDriver driver = new ChromeDriver();

        // Open a website with a static web table
        driver.get("https://example.com/student-table");

        // Locate the table by its ID
        WebElement table = driver.findElement(By.id("studentsTable"));

        // Get all the rows of the table
        List<WebElement> rows = table.findElements(By.tagName("tr"));

        // Loop through each row
        for (int i = 0; i < rows.size(); i++) {
            List<WebElement> columns = rows.get(i).findElements(By.tagName("td"));
            
            // Print each cell's content
            for (int j = 0; j < columns.size(); j++) {
                System.out.print(columns.get(j).getText() + " ");
            }
            System.out.println(); // To print each row in a new line
        }

        // Perform further actions like validation here
        // Close the driver
        driver.quit();
    }
}

Explanation:

  • We first locate the table using its ID and then capture all the rows.
  • For each row, we capture the data from individual cells using the findElements method, looping through rows (tr) and columns (td).
  • The data is printed row by row, but you can easily adapt this for validation purposes.

Key Takeaways

  1. Auto-suggest Dropdown:

    • Interacting with dynamic dropdowns requires locating the input box, sending partial text, waiting for suggestions, and then selecting the correct one.
  2. Static Web Table:

    • Handling static tables involves identifying the table structure and iterating through rows and columns to fetch and manipulate data.

Mastering these concepts will help you tackle many common test cases related to user input fields and data validation in web automation projects. As always, make sure to adapt the code snippets to your specific use cases and environment.


Followers