选择下拉列表框不可见项

Question

如何从以下代码中选择不可见的下拉列表？

<div id="form:munit_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow" style="width: 125px; display: block; top: 177px; left: 798.267px; z-index: 1006;">
<div class="ui-selectonemenu-items-wrapper" style="height:200px">
<ul id="form:munit_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox" aria-activedescendant="form:munit_0">
<li id="form:munit_0" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight" role="option" tabindex="-1" data-label="No Unit">No Unit</li>
<li id="form:munit_1" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Bag">Bag</li>
<li id="form:munit_2" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Load">Load</li>
<li id="form:munit_3" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Litre">Litre</li>
<li id="form:munit_4" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Each">Each</li>
<li id="form:munit_5" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Unit">Unit</li>
<li id="form:munit_6" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Nos">Nos</li>
<li id="form:munit_7" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="R.feet">R.feet</li>
<li id="form:munit_8" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Sq.ft">Sq.ft</li>
<li id="form:munit_9" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Kgs">Kgs</li>
<li id="form:munit_10" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="feet">feet</li>
<li id="form:munit_11" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="ml">ml</li>
<li id="form:munit_12" class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" role="option" tabindex="-1" data-label="Mts">Mts</li>
</ul>
</div>
</div>

我尝试了这个Selenium代码来选择下拉列表的最后一个选项：

public void selectOneMenu(String idPrefix, String value) {
        if (StringUtil.isNotBlank(value)) {
            driver.findElement(By.id(idPrefix + "_label")).click();
            driver.findElement(
                    By.xpath("//div[@id='" + idPrefix
                            + "_panel']/div/ul/li[text()='" + value + "']"))
                    .click();
        }
 }

Answer 1

您应该尝试使用WebDriverWait等待dropdown个选项可见，并在点击dropdown后点击以启用，如下所示： -

public void selectOptionsByIdFromDropdown(String dropdownId, String optionsId) {

   WebDriverWait wait = new WebDriverWait(driver, 10)

  //First click on dropdown menu
  WebElement dropdown = wait.until(ExpectedConditions.elementToBeClickable(By.id(dropdownId)));
  dropdown.click();

  //Now wait until nested option to be present by id
  wait.until(ExpectedConditions.presenceOfNestedElementLocatedBy(dropdown, By.id(optionsId))).click();
}

用法： -

  

我需要在下拉列表框中选择最后一个选项。当我点击下拉框时，第12个项目不可见

selectOptionsByIdFromDropdown("form:munit_panel", "form:munit_12");