Auto-complete field handling in Selenium Java - Build an Automation Script

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

Practice

1. What is the main purpose of handling an auto-complete field in Selenium testing?

easy

A. To disable the auto-complete feature in the browser

B. To refresh the page automatically after typing

C. To submit the form without entering any data

D. To select the correct suggestion from the dynamic list based on user input

Solution

1. Step 1: Understand auto-complete behavior

   Auto-complete fields show suggestions dynamically as the user types.

2. Step 2: Purpose of handling in Selenium

   We need to select the correct suggestion from the list to simulate user interaction accurately.

3. Final Answer:

   To select the correct suggestion from the dynamic list based on user input -> Option D

4. Quick Check:

   Auto-complete handling = selecting suggestion [OK]

Hint: Focus on selecting suggestions, not disabling features [OK]

Common Mistakes:

• Trying to disable auto-complete instead of selecting
• Ignoring dynamic suggestion list
• Submitting form without input

2. Which Selenium Java code snippet correctly waits for the auto-complete suggestion list to appear before selecting an option?

easy

A. new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.visibilityOfElementLocated(By.id("suggestions")));

B. driver.findElement(By.id("suggestions")).click();

C. Thread.sleep(10000); driver.findElement(By.id("suggestions")).click();

D. driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10)); driver.findElement(By.id("suggestions")).click();

Solution

1. Step 1: Identify correct wait usage

   Explicit wait with WebDriverWait and ExpectedConditions waits for element visibility properly.

2. Step 2: Compare with other options

   driver.findElement(By.id("suggestions")).click(); clicks without waiting, C uses Thread.sleep which is not best practice, D uses implicit wait which is less reliable for dynamic elements.

3. Final Answer:

   new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.visibilityOfElementLocated(By.id("suggestions"))); -> Option A

4. Quick Check:

   Explicit wait for visibility = new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.visibilityOfElementLocated(By.id("suggestions"))); [OK]

Hint: Use explicit waits with ExpectedConditions for dynamic elements [OK]

Common Mistakes:

• Using Thread.sleep instead of explicit wait
• Relying only on implicit waits
• Clicking before element is visible

3. Given the following code snippet, what will be the value of the input field after execution?

driver.findElement(By.id("searchBox")).sendKeys("App");
new WebDriverWait(driver, Duration.ofSeconds(5))
  .until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ul.suggestions li")));
List<WebElement> options = driver.findElements(By.cssSelector("ul.suggestions li"));
for (WebElement option : options) {
  if (option.getText().equals("Apple")) {
    option.click();
    break;
  }
}
String value = driver.findElement(By.id("searchBox")).getAttribute("value");

medium

A. "App"

B. "Apple"

C. "" (empty string)

D. Throws NoSuchElementException

Solution

1. Step 1: Analyze input and wait

   The code types "App" and waits for suggestions to appear.

2. Step 2: Select matching suggestion

   It loops through suggestions and clicks the one with text "Apple".

3. Step 3: Check input value after click

   Clicking "Apple" updates the input field value to "Apple".

4. Final Answer:

   "Apple" -> Option B

5. Quick Check:

   Selected suggestion text = input value [OK]

Hint: Click matching suggestion updates input value [OK]

Common Mistakes:

• Assuming input stays as typed text
• Ignoring wait for suggestions
• Expecting empty input after click

4. Identify the error in the following Selenium Java code for selecting an auto-complete option:

driver.findElement(By.id("searchBox")).sendKeys("Ban");
List<WebElement> options = driver.findElements(By.cssSelector("ul.suggestions li"));
for (WebElement option : options) {
  if (option.getText().equals("Banana")) {
    option.click();
  }
}

medium

A. Missing explicit wait for suggestions to appear before finding elements

B. Using sendKeys instead of setText method

C. Incorrect CSS selector syntax for suggestions list

D. Not clearing the input field before typing

Solution

1. Step 1: Check for wait usage

   The code finds suggestions immediately after typing without waiting for them to appear.

2. Step 2: Consequence of missing wait

   Without explicit wait, options list may be empty causing no click action.

3. Final Answer:

   Missing explicit wait for suggestions to appear before finding elements -> Option A

4. Quick Check:

   Wait before findElements = Missing explicit wait for suggestions to appear before finding elements [OK]

Hint: Always wait for suggestions before accessing them [OK]

Common Mistakes:

• Skipping explicit wait causing empty list
• Assuming suggestions load instantly
• Not breaking loop after click

5. You need to write a Selenium Java test to select the suggestion "Cherry" from an auto-complete field with id "fruitInput". The suggestions appear in a ul with class "autocomplete-list" and each suggestion is a li. Which approach correctly handles this scenario including waiting and verification?

hard

A. Send keys "Che", use implicit wait, find li with text "Cherry" and click, no assertion needed

B. Send keys "Cherry" to input, immediately click first li in ul.autocomplete-list, no wait needed

C. Send keys "Che" to input, wait explicitly for visibility of ul.autocomplete-list, find all li, click the one with text "Cherry", then assert input value equals "Cherry"

D. Clear input, send keys "Ch", use Thread.sleep(5000), click last li in ul.autocomplete-list, assert input value contains "Ch"

Solution

1. Step 1: Send partial keys and wait explicitly

   Typing "Che" triggers suggestions; explicit wait ensures suggestions are visible before interaction.

2. Step 2: Find and click correct suggestion, then verify

   Find all li elements, click the one with text "Cherry", then assert input value matches to confirm selection.

3. Final Answer:

   Send keys "Che" to input, wait explicitly for visibility of ul.autocomplete-list, find all li, click the one with text "Cherry", then assert input value equals "Cherry" -> Option C

4. Quick Check:

   Explicit wait + correct click + assert input value = Send keys "Che" to input, wait explicitly for visibility of ul.autocomplete-list, find all li, click the one with text "Cherry", then assert input value equals "Cherry" [OK]

Hint: Wait explicitly, click matching text, then verify input value [OK]

Common Mistakes:

• Not waiting explicitly for suggestions
• Clicking wrong suggestion or without verification
• Using Thread.sleep instead of explicit wait