Question

我想从组合框搜索下拉列表中选择一个项目。

网站的Html代码是：

 <div class="form-group">
 <div class="row">
 <div class="col-sm-6 margin-bottom">
 <select id="CustomerCard_state" class="form-control m-b drop_state"                          tabindex="-1" name="CustomerCard.state" data-val-required="Please enter State"        data-val="true" style="display: none;">
 <option value="">Please select state</option>
 <option value="AK">Alaska</option>
 <option value="AL">Alabama</option>
 <option value="AZ">Arizona</option>
 <option value="AR">Arkansas</option>
 <option value="CA">California</option>
 <option value="CO">Colorado</option>
 <option value="CT">Connecticut</option>
 <option value="DE">Delaware</option>
 <option value="FL">Florida</option>
 <option value="GA">Georgia</option>
 <option value="HI">Hawaii</option>
 <option value="ID">Idaho</option>
 <option value="IL">Illinois</option>
 <option value="IN">Indiana</option>
 <option value="IA">Iowa</option>
 <option value="KS">Kansas</option>
 <option value="KY">Kentucky</option>
 <option value="LA">Louisiana</option>
 <option value="ME">Maine</option>
 <option value="MD">Maryland</option>
 <option value="MA">Massachusetts</option>
 <option value="MI">Michigan</option>
 <option value="MN">Minnesota</option>
 <option value="MS">Mississippi</option>
 <option value="MO">Missouri</option>
 <option value="MT">Montana</option>
 <option value="NE">Nebraska</option>
 <option value="NV">Nevada</option>
 <option value="NH">New Hampshire</option>
 <option value="NJ">New Jersey</option>
 <option value="NM">New Mexico</option>
 <option value="NY">New York</option>
 <option value="NC">North Carolina</option>
 <option value="ND">North Dakota</option>
 <option value="OH">Ohio</option>
 <option value="OK">Oklahoma</option>
 <option value="OR">Oregon</option>
 <option value="PA">Pennsylvania</option>
 <option value="RI">Rhode Island</option>
 <option value="SC">South Carolina</option>
 <option value="SD">South Dakota</option>
 <option value="TN">Tennessee</option>
 <option value="TX">Texas</option>
 <option value="UT">Utah</option>
 <option value="VT">Vermont</option>
 <option value="VA">Virginia</option>
 <option value="WA">Washington</option>
 <option value="WV">West Virginia</option>
 <option value="WI">Wisconsin</option>
 <option value="WY">Wyoming</option>
 </select>
 <div id="CustomerCard_state_chosen" class="chosen-container chosen-        container-single chosen-with-drop chosen-container-active" style="width: 100%;"   title="">
 <a class="chosen-single" tabindex="-1">
 <span>Please select state</span>
 <div>
 <b/>
 </div>
 </a>
 <div class="chosen-drop">
 <div class="chosen-search">
 <input type="text" autocomplete="off" tabindex="16"/>
 </div>
 <ul class="chosen-results">
 <li class="active-result result-selected" style="" data-option-array-       index="0">Please select state</li>
 <li class="active-result" style="" data-option-array-index="1">Alaska</li>
 <li class="active-result" style="" data-option-array-index="2">Alabama</li>
 <li class="active-result" style="" data-option-array-index="3">Arizona</li>
 <li class="active-result" style="" data-option-array- index="4">Arkansas</li>
 <li class="active-result" style="" data-option-array-index="5">California</li>
 <li class="active-result" style="" data-option-array-     index="6">Colorado</li>
 <li class="active-result" style="" data-option-array-     index="7">Connecticut</li>
 <li class="active-result" style="" data-option-array-index="8">Delaware</li>
 <li class="active-result" style="" data-option-array-index="9">Florida</li>
 <li class="active-result" style="" data-option-array-     index="10">Georgia</li>
 <li class="active-result" style="" data-option-array-index="11">Hawaii</li>
 <li class="active-result" style="" data-option-array-index="12">Idaho</li>
 <li class="active-result" style="" data-option-array-index="13">Illinois</li>
 <li class="active-result" style="" data-option-array-index="14">Indiana</li>
 <li class="active-result" style="" data-option-array-index="15">Iowa</li>
 <li class="active-result" style="" data-option-array-index="16">Kansas</li>
 <li class="active-result" style="" data-option-array-index="17">Kentucky</li>
 <li class="active-result" style="" data-option-array-index="18">Louisiana</li>
 <li class="active-result" style="" data-option-array-index="19">Maine</li>
 <li class="active-result" style="" data-option-array-index="20">Maryland</li>
 <li class="active-result" style="" data-option-array-index="21">Massachusetts</li>
 <li class="active-result" style="" data-option-array-index="22">Michigan</li>
 <li class="active-result" style="" data-option-array-index="23">Minnesota</li>
 <li class="active-result" style="" data-option-array-index="24">Mississippi</li>
 <li class="active-result" style="" data-option-array-index="25">Missouri</li>
 <li class="active-result" style="" data-option-array-index="26">Montana</li>
 <li class="active-result" style="" data-option-array-index="27">Nebraska</li>
 <li class="active-result" style="" data-option-array-index="28">Nevada</li>
 <li class="active-result" style="" data-option-array-index="29">New Hampshire</li>
 <li class="active-result" style="" data-option-array-index="30">New Jersey</li>
 <li class="active-result" style="" data-option-array-index="31">New Mexico</li>
 <li class="active-result" style="" data-option-array-index="32">New York</li>
 <li class="active-result" style="" data-option-array-index="33">North Carolina</li>
 <li class="active-result" style="" data-option-array-index="34">North Dakota</li>
 <li class="active-result" style="" data-option-array-index="35">Ohio</li>
 <li class="active-result" style="" data-option-array-index="36">Oklahoma</li>
 <li class="active-result" style="" data-option-array-index="37">Oregon</li>
 <li class="active-result" style="" data-option-array-index="38">Pennsylvania</li>
 <li class="active-result" style="" data-option-array-index="39">Rhode Island</li>
 <li class="active-result" style="" data-option-array-index="40">South Carolina</li>
 <li class="active-result" style="" data-option-array-index="41">South Dakota</li>
 <li class="active-result" style="" data-option-array-index="42">Tennessee</li>
 <li class="active-result" style="" data-option-array-index="43">Texas</li>
 <li class="active-result" style="" data-option-array-index="44">Utah</li>
 <li class="active-result" style="" data-option-array-index="45">Vermont</li>
 <li class="active-result" style="" data-option-array-index="46">Virginia</li>
 <li class="active-result" style="" data-option-array-index="47">Washington</li>
 <li class="active-result" style="" data-option-array-index="48">West Virginia</li>
 <li class="active-result" style="" data-option-array-index="49">Wisconsin</li>
 <li class="active-result" style="" data-option-array-index="50">Wyoming</li>
 </ul>
 </div>
 </div>
 <span class="text-danger drop_state-error " style="display:none;"/>
 </div>

我的硒代码是：

    WebElement select = BrowserSetup.driver.findElement(By.xpath("//div[contains(@class,'chosen-container')]"));
    select.click();

    List<WebElement> dropDowns = BrowserSetup.driver.findElements(By.className("chosen-results"));

    WebElement dropDownOne = dropDowns.get(0); // perform further action
    dropDownOne.click();

它抛出异常： org.openqa.selenium.ElementNotVisibleException：元素在行不可见： WebElement dropDownOne = dropDowns.get（0）; dropDownOne.click（）;

我也厌倦了使用以下代码添加显式等待

    WebElement select =     BrowserSetup.driver.findElement(By.xpath("//div[contains(@class,'chosen-  container')]"));
    select.click();

    WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
    wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.className("chosen-results")));

    List<WebElement> dropDowns = BrowserSetup.driver.findElements(By.className("chosen-results"));

    WebElement dropDownOne = dropDowns.get(0); // perform further action
    dropDownOne.click();

我该怎么做才能解决这个问题？当我调试我的代码时它正在工作，但是当我运行我的程序时它会抛出异常。

Answer 1

请更改

WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.className("chosen-results")));

为：

WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
wait.until(ExpectedConditions.elementToBeClickable(By.className("chosen-results")));

愿它有所帮助!!

Answer 2

尝试使用操作。

Actions actions = new Actions(BrowserSetup.driver);

WebElement select = BrowserSetup.driver.findElement(By.xpath("//div[contains(@class,'chosen-container')]"));
List<WebElement> dropDowns = BrowserSetup.driver.findElements(By.className("chosen-results"));

actions.moveToElement(select).click().moveToElement(dropDowns.get(0)).click().build().perform();

Answer 3

Selenium有Select类来处理下拉列表

WebElement dropdown = BrowserSetup.driver.findElement(By.id("CustomerCard_state"));
Select select = new Select(dropdown);

// to choose Alaska
select.selectByValue("AK");
// or
select.selectByVisibleText("Alaska");

请注意，它仅适用于<select>代码。

Answer 4

你得到ul元素，这就是错误的原因。你应该在ul下得到li元素。尝试：

BrowserSetup.driver.findElements(By.xpath("//ul[@class='chos‌en-results']/li"));

如何点击硒中的组合框搜索下拉列表？

4 个答案: