如何从自动建议文本框中选择值？

Question

从文本框中我尝试了很多方法来找出解决方案，但我失败了，所以请帮助我了解这个查询

网站：- https://www.goibibo.com/

在该网站内，当我尝试从“FROM”自动建议文本框中选择值时，我未能选择，因为我无法检查下拉列表，因为它是动态的，而且我猜它使用了一些 javascript 功能。 所以请帮我解决这个问题

Answer 1

您可以使用下面的代码，而不是发送硬编码的值，您可以通过 Excel 动态读取它。

 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); } }

请点赞，它符合您的期望。

Answer 2

由于它是自动建议内容并且您想从该下拉列表中选择第一个选项，您可以使用 selenium 的Keys枚举，您可以执行如下选择：

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

如果您想选择第一个以外的其他选项，那么您可以使用以下 xpath 来识别该下拉选项：

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

或者

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

下面是从下拉列表中打印所有选项并选择特定值的代码：

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();

我希望它有帮助...

Answer 3

转到源选项卡 > 单击文本框 > 当消失的元素在网页上可用时按 F8 或 (FN + F8)（通过此网页将切换到调试模式，现在可以检查元素）。

Answer 4

如果您需要 XPath 作为第一个自动建议选项，请尝试

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

您可以将0替换为1以获得第二个选项， 2 - 替换为第三个选项等