Select an option from hidden drop down in selenium

Question

Hey guys I'm having this problem where I have a hidden select drop down where its style set to none.

<div>
<select id="selectForm" style="width: 285px; display: none;" name="formId">
<option value="36784">EMAIL 4</option>
</select>
<div class="sbox sbox_1cbc5b38 selectForm" tabindex="0" style="width: 285px;">
<div class="sbox_sel">
<div class="sbox_seltext" contenteditable="false">Report</div>
<div class="sbox_arrow"/>
</div>
</div>
<a id="previewForm" class="preview-button"/>
</div>

I was getting element not visible when I was looking By.id for the select tag. And the same error for when I was trying to click on the div. I found a way to make this drop down visible with jsExecutor. Here is my code to make this drop down visible to interact with:

public static void BatchResults(String form){

WebDriverWait wait = new WebDriverWait(driver, 60);
JavascriptExecutor js = (JavascriptExecutor)driver;                                         
js.executeScript("document.getElementById('selectForm').style.display='block';");
WebElement selectFormElement =                    
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("selectForm")));
Select selectForm = new Select(selectFormElement);  
selectForm.selectByVisibleText(form);
js.executeScript("document.getElementById('selectForm').style.display='none';");  

}

@Test(priority = 1)
public void runTest() {
    String selectForm = "EMAIL 4";
    Main.BatchResults(selectForm);
}
}

My issue is that, in jsExecutor I am setting the style to (style.display='block';) and it is bringing my underlining drop down on top of the styled drop down. Is there way to select this hidden drop down without using jsExecutor or what other option should I use? Also I cannot still select the option I want from the drop down after it is set to block and then none after selection

<ul class="sbox_opts sbox_fa9ea48e" style="width: 283px; top: 610.5px; 
left: 330.333px; max-height: 54.5px; display: none;">
<li class="sbox_opt">EMAIL 4</li>

</ul>

How do you expect that to be set in the real world if users can't interact with it? — chrylis -cautiouslyoptimistic-
Users can interact with it, manually testing it works. I am just having an issue automating it. — Shahboz
That's just underlining drop down that holds the options. On top of it there is a styled drop down that I am having a trouble interacting with. — Shahboz
No, you're still trying to interact with the underlying hidden dropdown. You might want to interact with div.selectForm instead of #selectForm. — chrylis -cautiouslyoptimistic-

Joseph Evans Joseph Evans · Accepted Answer · 2015-08-12T21:48:46

Selenium is designed to navigate web pages the same way a user would. You should have a visible element that when interacted with (hover/click) will display the drop down. Once the drop down is displayed you can interact with the contents.
Have Selenium perform the same tasks a user would have to.

Select an option from hidden drop down in selenium

1 Answers