问题
I was trying to automate flight booking in GoIbibo using selenium webdriver java. When we enter the value "from city", a list is displayed as autosuggestion.
But am not able to detect the elements in the autosuggestion using xpath. Also not able to find the exact xpath or id for the list displayed since am not able to inspect the list. I have used the below code to find the elements displayed but this is also not working.
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());
Please help in identifying the elements in autosuggestion list and selecting the needed element from the autosuggestion list. URL Used- https://www.goibibo.com/
回答1:
Okay, this is the html of that list
<section class="\"searchList" col-md-12="" col-sm-12="" col-xs-12="" autowrap="" pad0="" flt\"=""><div class="\"searchListInnrWrap\""><div class="\"width100" fl\"=""><ul id="\"react-autosuggest-1\"" class="\"col-md-12" col-sm-12="" col-xs-12="" autowrap="" pad0="" autosuggestboxlist="" flt\"="" role="\"listbox\""><li id="\"react-autosuggest-1-suggestion--0\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Dublin</span><!-- react-text: 466 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(DUB)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Dublin Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">Ireland</small><span class="\"flag-sprt" vmid="" dib="" ie\"=""></span></span><span class="\"clearfix\""> </span><!-- react-text: 475 --><!-- /react-text --></div></div></li><li id="\"react-autosuggest-1-suggestion--1\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Atlanta</span><!-- react-text: 483 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(ATL)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Hartsfield Jackson Atlanta International Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 494 --> <!-- /react-text --><span class="\"fb\"">(212</span><!-- react-text: 496 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--2\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>San Francisco</span><!-- react-text: 505 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(SFO)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">San Francisco International Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 516 --> <!-- /react-text --><span class="\"fb\"">(60</span><!-- react-text: 518 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--3\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Dallas</span><!-- react-text: 527 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(DFW)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Dallas Fort Worth International Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 538 --> <!-- /react-text --><span class="\"fb\"">(164</span><!-- react-text: 540 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--4\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Cincinnati</span><!-- react-text: 549 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(CVG)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Cincinnati Northern Kentucky International Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 560 --> <!-- /react-text --><span class="\"fb\"">(163</span><!-- react-text: 562 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--5\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Livermore</span><!-- react-text: 571 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(LVK)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Livermore Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 582 --> <!-- /react-text --><span class="\"fb\"">(14</span><!-- react-text: 584 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--6\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 593 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(CBM)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Colombus Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 604 --> <!-- /react-text --><span class="\"fb\"">(18</span><!-- react-text: 606 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--7\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 615 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(LCK)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Columbus Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 626 --> <!-- /react-text --><span class="\"fb\"">(18</span><!-- react-text: 628 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li><li id="\"react-autosuggest-1-suggestion--8\"" class="\"react-autosuggest__suggestion\"" role="\"option\""><div class="\"\""><div class="\"fl" padt5="" hidden-sm="" padr10="" hidden-xs\"=""><i class="\"fl" icon-flights="" ico14\"=""></i></div><div class="\"dib" col-md-11="" col-sm-12="" col-xs-12="" pad0="" textoverflow\"=""><div class="\"mainTxt" clearfix\"=""><span>Columbus</span><!-- react-text: 637 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(OSU)</span></div><div class="\"fl" auto-ctryair-ellip="" mobellipsis="" padt2\"=""><span class="\"clearfix\""><small class="\"font12Lt\"">Columbus Airport</small></span></div><span class="\"fr\""><small class="\"font12Lt" vmid="" padr5="" dib\"="">United States</small><span class="\"flag-sprt" vmid="" dib="" us\"=""></span></span><span class="\"clearfix\""> </span><span class="\"clearfix\""><small class="\"font12Lt\""><!-- react-text: 648 --> <!-- /react-text --><span class="\"fb\"">(18</span><!-- react-text: 650 --> KMs from <!-- /react-text --><span class="\"fb\"">Dublin, United States)</span></small></span></div></div></li></ul></div></div></section>
And your element is in span
<div class="\"mainTxt" clearfix\"=""><span>Dublin</span><!-- react-text: 466 --> <!-- /react-text --><span class="\"txtTransUpper" ico14="" greylt\"="">(DUB)</span></div>
use this line as soon as you declared your driver variable, so you don't have to use any Explicit wait.
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS)
use this code to click it
driver.findElement(By.id("gosuggest_inputSrc")).sendKeys "Dublin (DUB)"
driver.findElement(By.xpath("//span[normalize-space()='Dublin']").click
来源：https://stackoverflow.com/questions/50225774/how-to-select-an-element-from-autoselect-drop-down-in-goibibo-from-city-field-us