Selenium : How to select options from a dropdown if the select tag containsstyle="display: none;"

Question

I have to perform a select action i.e select a value from a dropdown. Here is the code of my iframe:

<div class="js-stools-field-filter">
    <select id="filter_active" name="filter[active]" onchange="this.form.submit();" style="display: none;">
        <option value="" selected="selected">- Select Active State -</option>
        <option value="0">Activated</option>
        <option value="1">Unactivated</option>
    </select>
    <div class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active chzn-with-drop" style="width: 220px;" title="" id="filter_active_chzn"><a class="chzn-single"><span>- Select Active State -</span><div><b></b></div></a>
        <div class="chzn-drop">
            <div class="chzn-search">
                <input type="text" autocomplete="off" readonly="" class="active">
            </div>
            <ul class="chzn-results">
                <li class="active-result result-selected" data-option-array-index="0" style="">- Select Active State -</li>
                <li class="active-result" data-option-array-index="1" style="">Activated</li>
                <li class="active-result" data-option-array-index="2" style="">Unactivated</li>
            </ul>
        </div>
    </div>
</div>

I need to select the options form the dropdown. Here is my script:

Select sc = new Select(driver.findElement(By.id("filter_active")));
sc.selectByVisibleText("Activated");

But,I'm getting this error in the console:

Element is not currently visible and may not be manipulated

Can someone please let me know how to fix this.

score 3 · Accepted Answer · answered May 17 '19 at 17:02

From the HTML you posted, the SELECT is hidden because it contains style="display: none;". It looks like the <ul class="chzn-results"> and children LIs are the visible "dropdown" while the hidden SELECT holds the values after selection.

In cases like this, you can't use the Select() class. You will need to click the visible dropdown element (can't tell what that is... maybe the INPUT?) and then click the desired LI using normal Selenium methods.

Something like this should work...

driver.findElement(By.cssSelector("div.chzn-search > input")).click();
driver.findElement(By.xpath("//ul[@class='chzn-results']/li[.='Activated']")).click();

score 0 · Answer 2 · answered May 17 '19 at 20:34

To click() on the option with text as Activated as the <select> tag is having the attribute style="display: none;" you need to use the make the selection from the <li> tags and you can use either of the following Locator Strategies:

cssSelector:

driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.result-selected")).click();
driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.active-result[data-option-array-index='1']")).click();

xpath:

driver.findElement(By.xpath("//div[@class='chzn-drop']//ul[@class='chzn-results']//li[contains(@class, 'result-selected')]")).click();
driver.findElement(By.xpath("//div[@class='chzn-drop']//ul[@class='chzn-results']//li[contains(@class, 'active-result') and @data-option-array-index='1']")).click();

Selenium : How to select options from a dropdown if the select tag containsstyle="display: none;"

2 Answers2