java - 如何使用 selenium webdriver java 从城市字段的 GoIbibo 中的自动选择下拉列表中选择元素

Question

我试图使用 selenium webdriver java 在 GoIbibo 中自动预订航类。当我们输入值“来自城市”时，会显示一个列表作为自动建议。

但我无法使用 xpath 检测自动暗示中的元素。由于我无法检查列表，因此也无法找到所显示列表的确切 xpath 或 id。我使用下面的代码来查找显示的元素，但这也不起作用。

driver.findElement(By.id("gosuggest_inputSrc")).sendKeys("Dublin (DUB)");
WebDriverWait nw = new WebDriverWait(driver, 30);
nw.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id='gosuggest_inputSrc']//following-sibling::input")));
List<WebElement> orgins = driver.findElements(By.xpath("//*[@id='gosuggest_inputSrc']//following-sibling::input"));
for (WebElement we : orgins){
    System.out.println(we.getText());

请帮助识别自动建议列表中的元素并从自动建议列表中选择所需的元素。使用的 URL-https://www.goibibo.com/

Answer 1

好的，这是该列表的 html

<section class="\&quot;searchList" col-md-12="" col-sm-12="" col-xs-12="" autowrap="" pad0="" flt\"=""><div class="\&quot;searchListInnrWrap\&quot;"><div class="\&quot;width100" fl\"=""><ul id="\&quot;react-autosuggest-1\&quot;" class="\&quot;col-md-12" col-sm-12="" col-xs-12="" autowrap="" pad0="" autosuggestboxlist="" flt\"="" role="\&quot;listbox\&quot;"><li id="\&quot;react-autosuggest-1-suggestion--0\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Dublin</span><!-- react-text: 466 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(DUB)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Dublin Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">Ireland</small><span class="\&quot;flag-sprt" vmid="" dib="" ie\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><!-- react-text: 475 --><!-- /react-text --></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--1\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Atlanta</span><!-- react-text: 483 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(ATL)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Hartsfield Jackson Atlanta International Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 494 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(212</span><!-- react-text: 496 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--2\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>San Francisco</span><!-- react-text: 505 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(SFO)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">San Francisco International Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 516 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(60</span><!-- react-text: 518 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--3\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Dallas</span><!-- react-text: 527 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(DFW)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Dallas Fort Worth International Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 538 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(164</span><!-- react-text: 540 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--4\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Cincinnati</span><!-- react-text: 549 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(CVG)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Cincinnati Northern Kentucky International Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 560 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(163</span><!-- react-text: 562 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--5\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Livermore</span><!-- react-text: 571 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(LVK)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Livermore Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 582 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(14</span><!-- react-text: 584 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--6\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 593 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(CBM)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Colombus Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 604 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(18</span><!-- react-text: 606 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--7\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 615 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(LCK)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Columbus Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 626 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(18</span><!-- react-text: 628 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li><li id="\&quot;react-autosuggest-1-suggestion--8\&quot;" class="\&quot;react-autosuggest__suggestion\&quot;" role="\&quot;option\&quot;"><div class="\&quot;\&quot;"><div class="\&quot;fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\&quot;fl" icon-flights="" ico14\"=""></i></div><div class="\&quot;dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\&quot;mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 637 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(OSU)</span></div><div class="\&quot;fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;">Columbus Airport</small></span></div><span class="\&quot;fr\&quot;"><small class="\&quot;font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\&quot;flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\&quot;clearfix\&quot;">&nbsp;</span><span class="\&quot;clearfix\&quot;"><small class="\&quot;font12Lt\&quot;"><!-- react-text: 648 --> <!-- /react-text --><span class="\&quot;fb\&quot;">(18</span><!-- react-text: 650 --> KMs from <!-- /react-text --><span class="\&quot;fb\&quot;">Dublin, United States)</span></small></span></div></div></li></ul></div></div></section>

你的元素在 span 中

<div class="\&quot;mainTxt" clearfix\"=""><span>Dublin</span><!-- react-text: 466 --> <!-- /react-text --><span class="\&quot;txtTransUpper" ico14="" greylt\"="">(DUB)</span></div>

在声明驱动程序变量后立即使用此行，这样您就不必使用任何显式等待。

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS)

使用此代码点击它

driver.findElement(By.id("gosuggest_inputSrc")).sendKeys "Dublin (DUB)"
driver.findElement(By.xpath("//span[normalize-space()='Dublin']").click