how handle auto suggest in "from" and "destination" box for this website "https://www.goibibo.com/" in selenium

Question

how handle auto suggest in "from" and "destination" box for this website "https://www.goibibo.com/" in selenium. please help

I tired using the basic method but unable to get the X path of the auto suggestion drop down

Unable to click on the drop down

package basic;
    
import java.util.List;
import java.util.concurrent.TimeUnit;
    
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;
    
public class goibibo {

    public static void main(String[] args) throws InterruptedException {
        // TODO Auto-generated method stub
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.goibibo.com/");

        new WebDriverWait(driver, 20)
                .until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@id='gosuggest_inputSrc']")))
                .sendKeys("Mum");
        List<WebElement> myList = new WebDriverWait(driver, 20).until(
                ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//*[@id=\"react-autosuggest-1\"]")));
        for (WebElement element : myList) {
            if (element.getText().contains("Mumbai"))
                ;
            element.click();
        }

    }

}

Answer 1

Use below code it will work

Webelement ele=driver.findelement()

Actions ob = new Actions(driver);
ob.moveToElement(ele);
ob.click(ele);
Action action  = ob.build();
action.perform();

Answer 2

I have automated it through selenium with python. Its collecting all suggested cities in a list and then clicking the required one.

from selenium import webdriver

driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.goibibo.com/")
driver.implicitly_wait(3)
listCity = []
driver.find_element_by_xpath("//input[@id='gosuggest_inputSrc']").send_keys("JA")
cities = driver.find_elements_by_xpath("//div[@class='mainTxt clearfix']//preceding-sibling::span")
for city in cities:
    listCity.append(city.text)

for city in cities:
    if "Jagdalpur" in city.text:
        city.click()
        break

print(listCity)
print(len(listCity))

Answer 3

So you can try one solution please find the below screenshot,

As you can see in screenshot if i type M in text box then dropdown shows the record respect to letter 'M' and if you see in source the <ul> which is dynamic as you see just below <input> so you need to handle that dropdown by it's locator it is dynamic hence first you need to pass some text in text box and after that you need to select the element from the drop down using Select in selenium you use selectByVisibleText("") or what ever or you can use List<Element> you can store all the respected sources (Mumbai, Mysore ,etc)coming from dropdown and use it wisely

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@id='gosuggest_inputSrc'"]))).sendKeys("M");
List<WebElement> myList = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("Xpath of the dynamic drop down")));
for (WebElement element:myList) {
    if(element.getText().contains("Mumbai"));
        element.click();
}

I gave you an idea let me know if you need any further help

Answer 4

Chrome Browser

First how to Find XPATH of auto populate box in Chrome Browser open your website than click on Inspect element and click on source Tab now, click for opening your auto populate box and Press **F8** **Key for pause debugger**. Then click on your Element tab and you can easily get your xpath refer below snap for more information. so it will freeze your HTML.

Now click on Elements an Create your own xpath.

Fire Fox Browser

Second how to find xpath of Auto Populate box in Firefox - Open your Firefox and Right click and click on inspect elements on your website. there is option of animation so it will open all your DOM Expanded like below image. so by reading this dom structure you can create easily your XPATH.

Not how to find Elements from auto populate box. Refer below code snippet for that.

package com.software.testing;

import java.util.List;

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;
    
public class Testingclass extends DriverFactory {
    
    private static WebDriver driver = null;
    
    public static void main(String[] args) throws InterruptedException {
    
        System.setProperty("webdriver.chrome.driver", "your driver path");
        driver = new ChromeDriver();
        driver.get("https://www.goibibo.com/");
        new WebDriverWait(driver, 20)
                .until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@id='gosuggest_inputSrc']")))
                .sendKeys("A");
        Thread.sleep(1000);
        List<WebElement> myList = new WebDriverWait(driver, 20).until(ExpectedConditions.presenceOfAllElementsLocatedBy(
                By.xpath("//div[@class='dib marginL10 pad0 textOverflow width90']/div/span")));
        for (int i = 0; i < myList.size(); i++) {
            System.out.println(myList.get(i).getText());
            if (myList.get(i).getText().equals("Ahmedabad")) {
                myList.get(i).click();
                break;
            }
        }
    
    }
}

Don't forgot to use break after your conditional statement else it will thrown an exception.