Verify auto-complete suggestions and selection

Preconditions (2)

Step 1: Click on the auto-complete input field

Step 2: Type 'app' into the auto-complete input field

Step 3: Wait for the suggestion list to appear

Step 4: Verify that suggestions containing 'app' are displayed

Step 5: Select the suggestion 'apple' from the list

Step 6: Verify that the input field value is updated to 'apple'

✅ Expected Result: The suggestion list appears with relevant items containing 'app', and selecting 'apple' updates the input field value to 'apple'

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify suggestion list is displayed after typing

Verify suggestion list contains expected items

Verify input field value updates correctly after selection

Best Practices:

Use explicit waits to wait for suggestion list visibility

Use By locators with IDs or stable attributes

Avoid brittle XPath selectors

Use Page Object Model for element abstraction

Automated Solution

Selenium Java

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 org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

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

public class AutoCompleteTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeClass
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.get("https://example.com/search");
    }

    @Test
    public void testAutoCompleteSelection() {
        // Locate the auto-complete input field by ID
        WebElement autoCompleteInput = wait.until(ExpectedConditions.elementToBeClickable(By.id("search-input")));
        autoCompleteInput.click();
        autoCompleteInput.clear();
        autoCompleteInput.sendKeys("app");

        // Wait for suggestion list to be visible
        WebElement suggestionList = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("suggestion-list")));

        // Verify suggestions contain 'app'
        List<WebElement> suggestions = suggestionList.findElements(By.tagName("li"));
        Assert.assertFalse(suggestions.isEmpty(), "Suggestion list should not be empty");

        boolean foundApple = false;
        for (WebElement suggestion : suggestions) {
            String text = suggestion.getText().toLowerCase();
            Assert.assertTrue(text.contains("app"), "Suggestion '" + text + "' should contain 'app'");
            if (text.equals("apple")) {
                foundApple = true;
            }
        }
        Assert.assertTrue(foundApple, "Suggestion list should contain 'apple'");

        // Click on the 'apple' suggestion
        for (WebElement suggestion : suggestions) {
            if (suggestion.getText().equalsIgnoreCase("apple")) {
                suggestion.click();
                break;
            }
        }

        // Verify input field value updated to 'apple'
        String inputValue = autoCompleteInput.getAttribute("value");
        Assert.assertEquals(inputValue, "apple", "Input field value should be 'apple' after selection");
    }

    @AfterClass
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

This test uses Selenium WebDriver with Java to automate the auto-complete field handling.

Setup: We open the browser and navigate to the search page.

Test steps: We locate the input field by its ID and type 'app'. We wait explicitly for the suggestion list to appear to avoid timing issues.

We then verify the suggestions contain the substring 'app' and specifically check that 'apple' is present.

Next, we click the 'apple' suggestion and verify the input field updates to 'apple'.

Teardown: We close the browser after the test.

This approach uses explicit waits to handle dynamic content and stable locators for reliability. Assertions confirm the expected behavior at each step.

Common Mistakes - 3 Pitfalls

Using Thread.sleep() instead of explicit waits

Using brittle XPath selectors like absolute paths

Not verifying that the suggestion list contains expected items before clicking

Bonus Challenge

Now add data-driven testing with 3 different inputs: 'app', 'ban', 'che'. Verify suggestions and selection for each.

Show Hint