Selenium Automation of Autocomplete Search Bars

Selenium Automation of Autocomplete Search Bars

Modern web applications frequently use autocomplete search bars to enhance user experience. Successfully automating tests for these features requires handling dynamic suggestions, and waiting for elements to appear – a challenge because ideal models assume instant availability, while real-world APIs introduce latency. Failure to account for this can lead to flaky tests and inaccurate results, costing engineering time and potentially delaying releases.

Why This Matters

Automated testing of autocomplete features requires careful synchronization with the application’s dynamic behavior. Unlike static elements, autocomplete suggestions depend on asynchronous API calls. Traditional findElement calls can fail if the suggestions haven’t loaded yet, leading to test failures. This is especially critical in e-commerce applications where incorrect search suggestions can directly impact conversion rates.

Key Insights

• Character-by-character input: eBay’s autocomplete requires simulating user typing speed rather than sending the complete search term at once.
• Explicit Waits: WebDriverWait with ExpectedConditions.visibilityOfAllElementsLocatedBy ensures the test waits for the autocomplete dropdown to appear before attempting to select an item.
• WebDriverManager: io.github.bonigarcia:webdrivermanager:6.3.3 simplifies browser driver management, reducing setup complexity.

Working Example

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.time.Duration;
import java.util.List;

import static org.assertj.core.api.Assertions.assertThat;

public class AutocompleteTest {

    private WebDriver driver;
    private static final String XPATH_INPUT = "//div[@id='gh-search-box']//input";
    private static final String XPATH_AUTOCOMPLETE_ITEMS = "//ul[@id='ebay-autocomplete']/li";

    @BeforeEach
    void setup() {
        driver = new ChromeDriver();
    }

    @AfterEach
    void teardown() {
        driver.quit();
    }

    @Test
    void whenUserNavigatesToEBays_thenSelectThe2ndAutoCompleteItemFromSearchInput() throws Exception {
        driver.navigate().to("https://www.ebay.com");
        WebElement inputElement = driver.findElement(By.xpath(XPATH_INPUT));
        String text = "iphone";
        for (char c : text.toCharArray()) {
            inputElement.sendKeys(Character.toString(c));
            Thread.sleep(50);
        }
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));
        List<WebElement> autoCompleteElements = wait.until(
                ExpectedConditions.visibilityOfAllElementsLocatedBy(
                        By.xpath(XPATH_AUTOCOMPLETE_ITEMS)
                )
        );
        assertThat(autoCompleteElements.size()).isGreaterThanOrEqualTo(2);
        WebElement secondItem = autoCompleteElements.get(1);
        secondItem.click();
    }
}

Practical Applications

• E-commerce Search: Amazon uses autocomplete to improve search accuracy and guide users to relevant products.
• Pitfall: Failing to implement explicit waits when interacting with dynamic elements like autocomplete suggestions can result in intermittent test failures and unreliable automation.

References:

• https://www.baeldung.com/selenium-select-text-autocomplete