dropdown Element is not currently visible and may not be manipulated

Question

I'm using Selenium with Chrome and I stuck at selecting a value from a dropdown. The markup I can obtain from the webpage itself:

<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>

I'm using this code to select the value:

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

However, it says the following

Element is not currently visible and may not be manipulated

Which leads me to the conclusion that the first part from the HTML markup (option class=bs-title-option) is not the right one. Anyway, how to handle this??

Answer 1

The real dropdown on your application is generated by bootstrap library. You have to click at the button and select the item from list inside dropdown menu. See an example below:

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();