How to select value from the auto suggestion text box? - selenium

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

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 2

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 3

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).

Answer 4

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