How to select value from the auto suggestion text box?

Question

From text boxI have tried many methods to find out the solution but I failed, So please help me regarding this Query

Website:- https://www.goibibo.com/

Inside that website when I am trying to select the value from 'FROM' auto-suggestion text box I failed to select because I am unable to inspect the dropdown, as it was dynamic and it was using some javascript functionality I guess. So please help me with this

Answer 1

If you need XPath for first autosuggest option, try

//ul[@id='react-autosuggest-1']/li[@id='react-autosuggest-1-suggestion--0']

You can replace 0 with1 to get second option, 2 - for third option, etc

Answer 2

You can use below code and instead of sending value hardcoded you can read it through Excel for dynamic.

import java.awt.AWTException;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class Testing {
	public static WebDriver driver;

	@Test
	public void test() throws InterruptedException, AWTException {
		System.setProperty("webdriver.chrome.driver", "./Driver/chromedriver");
		driver = new ChromeDriver();
		driver.get("https://www.goibibo.com/");
		driver.manage().window().maximize();
		driver.manage().timeouts().implicitlyWait(45, TimeUnit.SECONDS);
		WebElement fromDropDwon = driver.findElement(By.xpath("//input[@id='gosuggest_inputSrc']"));
		fromDropDwon.click();
		fromDropDwon.sendKeys("Delhi (DEL)");
		fromDropDwon.sendKeys(Keys.ARROW_DOWN);
		fromDropDwon.sendKeys(Keys.ENTER);
		
	}
}

Kindly upvote and it matches your expectation.

Answer 3

As it is auto suggesting the content and you want to select the first option from that drop down, you can use selenium's Keys enum and you can perform the selection like below :

driver.get("https://www.goibibo.com/");
WebElement from = driver.findElement(By.id("gosuggest_inputSrc"));
from.sendKeys("Bangalore");

Thread.sleep(3000);
from.sendKeys(Keys.ARROW_DOWN +""+ Keys.ENTER);

If you want to select other option than the first one then you can use the below xpaths to identify that drop down options :

//input[@id='gosuggest_inputSrc']/preceding-sibling::i/following::ul[contains(@id, 'react-autosuggest')]//li

Or

//ul[contains(@id, 'react-autosuggest')]//li

Below is the code to print all the options from that drop down and to select the particular value :

driver.get("https://www.goibibo.com/");
WebElement from = driver.findElement(By.id("gosuggest_inputSrc"));
from.sendKeys("Bangalore");

// Giving some delay so that the auto suggestion drop down will appear      
Thread.sleep(3000);
// Fetching options from dropdown
List<WebElement> dropdownOptions = driver.findElements(By.xpath("//ul[contains(@id, 'react-autosuggest')]//li"));
// Printing all the option text
for(WebElement element : dropdownOptions) {
    System.out.println(element.getText());
}
// Selecting the first option
dropdownOptions.get(0).click();

I hope it helps...

Answer 4

Go to sources tab > Click on the text box > Press F8 or (FN + F8) when disappearing element is available on webpage( By doing this webpage will be switch to debug mode and element can be inspected now).