How to handle auto suggest edit box in Selenium

handle auto suggest edit box in Selenium
Automate auto suggest edit box

Handle auto suggest edit box in Selenium

Many websites, including Google, have this particular edit box which populates as you start typing. In most cases, the values are finite and will display matching values until it gets the final result or no result. Let’s understand this concept using an example.

Suppose an organization’s HRMS (Human Resource Management System) uses an auto-suggest edit box in report page where entering the employee name characters display matching results. Since the number of employees is finite, the complete employee name will give a unique result (or a list of results, in case multiple employees have exactly the same names).

Following Selenium concepts will be used to work with auto-suggest edit box in selenium. Click on the respective link to learn more:

Read Dhawal Joshi‘s answer to How do I write XPath for an autosuggestion edit box in Cleartrip.com? on Quora

Automate the auto-suggest edit box

We will write a selenium script which will open Chrome Browser, navigate to https://www.google.com/ and enter String “Time inin the search edit box. Next, we will compare the auto-suggest results to match certain String, and if the result String is found, click on it.
package com.proj.test;

import java.util.List;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;

public class TestAutoSuggestEditBox {

    public static void main(String[] args) {
        WebDriver driver;

        System.setProperty("webdriver.chrome.driver", "E:chromedriverchromedriver.exe");
        driver = new ChromeDriver();

        driver.manage().window().maximize(); // maximize the browser

        driver.get("https://www.google.com/");

        // wait till web page is loaded
        new WebDriverWait(driver, 3000).until(webDriver -> ((JavascriptExecutor) webDriver)
                .executeScript("return document.readyState").equals("complete"));

        // Enter "Time in" text in Search edit box and wait for 30 seconds to load the
        // results
        driver.findElement(By.name("q")).sendKeys("Time in");
        driver.manage().timeouts().implicitlyWait(30000, TimeUnit.MILLISECONDS);

        // get all the auto populated results - using xpath
        List<WebElement> elements = driver.findElements(By.xpath("//ul[@class='erkvQe']//li//span"));

        System.out.println(elements.size());

        // Traverse each auto-suggest result and click on the result "time in india", if
        // this suggestion is displayed.
        for (WebElement element : elements) {
            if (element.getText().equalsIgnoreCase("time in india")) {
                element.click();
                break;
            }

        }
        
        //Display the time after clicking the result
        String timeResult = driver.findElement(By.xpath("//div[@class='gsrt vk_bk dDoNo']")).getText();
        
        System.out.println("Time is: "+timeResult);
        driver.close();

    }

}

Next Steps

Try to apply above logic in various websites which offers auto-suggest or auto-completion of results. MakeMyTrip or Cleartrip would be a good choice, try to automate the From and To destination on these websites and comment below if you find any difficulty.

Author: Dhawal Joshi

A post-graduate in MCA, ISTQB & ITIL certified QA with more than 8 years of experience in QA working with a CMMI Level 5 organization as System Analyst. I started my automation journey with HP UFT(formerly known as QTP) and for the past few years, I am using Selenium for automation. I also have experience in Android Application Development, Java, HTML, and VBScript. When I am not working, I like to spend time with my family, cooking and learning new developments in IT.

1 thought on “How to handle auto suggest edit box in Selenium

Leave a Reply

Your email address will not be published. Required fields are marked *