下拉元素当前不可见，可能无法操作

Question

我正在使用Selenium和Chrome，我坚持从下拉列表中选择一个值。我可以从网页本身获得标记：

<div class="col-sm-8  select-month  no-margin-bottom no-padding-left form-group select-container">
<select class="selectarea form-control select-month bs-select-hidden" id="month_start" name="month_start" title="Bitte wählen">
    <option class="bs-title-option" value="">Bitte wählen</option>
        <option id="month_start1" value="1">Januar</option>
        <option id="month_start2" value="2">Februar</option>
        <option id="month_start3" value="3">März</option>
        <option id="month_start4" value="4">April</option>
        <option id="month_start5" value="5">Mai</option>
        <option id="month_start6" value="6">Juni</option>
        <option id="month_start7" value="7" selected="selected">Juli</option>
        <option id="month_start8" value="8">August</option>
        <option id="month_start9" value="9">September</option>
        <option id="month_start10" value="10">Oktober</option>
        <option id="month_start11" value="11">November</option>
        <option id="month_start12" value="12">Dezember</option>
</select>

<div class="btn-group bootstrap-select selectarea form-control select-month open">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="month_start" title="Juli" aria-expanded="true">
        <span class="filter-option pull-left">Juli</span>&nbsp;
            <span class="bs-caret"><span class="caret"></span>
        </span>
    </button>
    <div class="dropdown-menu open" style="max-height: 489.688px; overflow: hidden; min-height: 64px;">
        <ul class="dropdown-menu inner" role="menu" style="max-height: 487.688px; overflow-y: auto; min-height: 62px;">
            <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null">
                <span class="text">Januar</span>
                <span class="glyphicon glyphicon-ok check-mark"></span>
                </a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null">
                <span class="text">Februar</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">März</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Mai</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Juni</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="7" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Juli</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="8"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="9"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="10"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Oktober</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="11"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="12"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Dezember</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div></div>
                    <div class="col-sm-8  select-year  do_not_break_visible_hint no-margin-bottom no-padding-left form-group select-container"><select class="selectarea form-control select-year bs-select-hidden" id="year_start" name="year_start" title="Bitte wählen" style=""><option class="bs-title-option" value="">Bitte wählen</option>
        <option id="year_start2016" value="2016" selected="selected">2016</option><option id="year_start2017" value="2017">2017</option><option id="year_start2018" value="2018">2018</option><option id="year_start2019" value="2019">2019</option><option id="year_start2020" value="2020">2020</option><option id="year_start2021" value="2021">2021</option><option id="year_start2022" value="2022">2022</option><option id="year_start2023" value="2023">2023</option><option id="year_start2024" value="2024">2024</option><option id="year_start2025" value="2025">2025</option><option id="year_start2026" value="2026">2026</option><option id="year_start2027" value="2027">2027</option><option id="year_start2028" value="2028">2028</option><option id="year_start2029" value="2029">2029</option><option id="year_start2030" value="2030">2030</option><option id="year_start2031" value="2031">2031</option><option id="year_start2032" value="2032">2032</option><option id="year_start2033" value="2033">2033</option><option id="year_start2034" value="2034">2034</option><option id="year_start2035" value="2035">2035</option><option id="year_start2036" value="2036">2036</option>
                </select><div class="btn-group bootstrap-select selectarea form-control select-year"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="year_start" title="2016"><span class="filter-option pull-left">2016</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2016</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2017</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2018</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2019</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2020</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2021</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="7"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2022</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="8"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2023</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="9"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2024</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="10"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2025</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="11"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2026</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="12"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2027</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="13"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2028</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="14"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2029</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="15"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2030</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="16"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2031</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="17"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2032</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="18"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2033</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="19"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2034</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="20"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2035</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="21"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2036</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div></div>
                <div class="clearfix"></div>
    </div>
    </div>

我使用此代码选择值：

new SelectElement(chromeDriver.FindElement(By.Id("month_start"))).SelectByText("Dezember");

然而，它说以下

  

元素当前不可见，可能无法操作

这使我得出结论，HTML标记（option class=bs-title-option）的第一部分不是正确的。无论如何，如何处理这个？

Answer 1

应用程序的真正下拉列表由bootstrap库生成。您必须单击按钮并从下拉菜单中的列表中选择项目。请参阅以下示例：

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(d => !d.FindElement(By.Id("busy")).Displayed);

// Click first month
driver.FindElement(By.CssSelector(".bootstrap-select.select-month > button")).Click();
System.Threading.Thread.Sleep(1000);
string targetMonth = "Februar";
driver.FindElement(By.XPath("//span[contains(text(),'" + targetMonth + "')]/..").Click();

// Click project type
System.Threading.Thread.Sleep(1000);
driver.FindElement(By.CssSelector("button[data-id='projecttype']")).Click();
System.Threading.Thread.Sleep(1000);
string targetType = "In-house project";
driver.FindElement(By.XPath("//span[contains(.,'" + targetType + "')]/..").Click();