Selecting Dynamically Loaded Auto-Suggest Options

🔍Scenario Overview

Selecting Dynamically Loaded Auto-Suggest Options

Key Takeaways & Cheat Sheet

✓Type partial input to trigger AJAX auto-suggestion searches
✓Wait explicitly for option list overlay visibility (not just presence)
✓Locate all suggestion elements using a common tag or class xpath
✓Iterate lists dynamically and click the element containing target text

Short Direct Answer

Auto-suggest inputs populate dynamically by calling backend APIs as you type. To automate them: type search characters, wait explicitly for the suggestions overlay list to be visible, retrieve all suggestions into a List, and loop through them to click the item matching your target text.

⚠️ Senior Warning (Red Flag)

Never try to click an auto-suggest option immediately after typing. It takes time for the backend search API to return options. An immediate click will throw a NoSuchElementException.

💡 STAR Deep Dive Explanation & Pro Tip

Typing realistic partial queries is key. Always clear the input field first before typing to avoid combining characters with default place-holder texts.

SeleniumAutomation.java

Selenium 4 + Java

// 1. Type partial text to trigger search recommendations
WebElement searchInput = driver.findElement(By.id("search-box"));
searchInput.sendKeys("Selenium");

// 2. Wait explicitly for suggestions list container to render
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
List<WebElement> suggestions = wait.until(
    ExpectedConditions.visibilityOfAllElementsLocatedBy(By.className("search-result-item"))
);

// 3. Loop and select matching text
for (WebElement suggestion : suggestions) {
    if (suggestion.getText().contains("WebDriver")) {
        suggestion.click();
        break;
    }
}