Selenium WebDriver - Unable to close select drop down menu in Chrome on Mac OS X

Question

I have been Working with Selenium WebDriver for a few months now and I have a problem with a drop down menu within a web app that I am working on.

What is happening is that the test is opening the page, verifying several elements on the page by finding them and then ensuring they are displayed. After doing that there is some text entered into different fields, then the option select box is clicked on to open the drop down menu. Following this the test iterates through all the options in the drop down menu until it finds the one it needs, then clicks on that option.

At this point the option is selected but the drop down menu is not closed.

I have tried clicking on the option select again but this has no effect, during the rest of the test other pages are navigated to and the menu does not close.

Then the page is saved and then navigated away from. However the drop down menu remains until the browser is closed.

This is the code from the app:

<select id="options" name="options" class="options">
<option value="option1 (auto)">option1 (auto)</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>

Answer 1

the first solution I would try is to click on menu options in different ways. Selenium API provides us with this possibility. 1) locate e.g. css selectors of the elements.

String cssOption1 = "select[id='options']>option[value='option1 (auto)']";
String cssOption2 = "select[id='options']>option[value='option2']";
String cssOption3 = "select[id='options']>option[value='option3']";

Also don't forget to verify that you found elements properly e.g .in firepath, firebug addon in ffox:

approach 1

driver.findElement(By.cssSelector(cssOption2)).click();

approach 2 using actions builder API

WebElement mnuOptionElement;
mnuOptionElement = driver.findElement(By.cssSelector(cssOption2));
Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.moveToElement(mnuOptionElement).click();

more info about Actions builder you can get here

approach 3 using jsExecutor to click on web element. Always works for me in all situations.

JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("var x = $(\'"+cssOption2+"\');");
        stringBuilder.append("x.click();");
        js.executeScript(stringBuilder.toString());

Hope this works for you

Answer 2

I have solved the problem with a work around, as this is the only way that I have found to work.

Firstly thank you eugene.polschikov for your answer although it didn't solve the problem it did open my eye somewhat, I had no knowledge of action builder, and it has given me some great ideas about future tests. Also thank you to anyone who read this and pondered over a possible solution.

The workaround that is now in place is that the select is not opened. The way the code works is that it would open the list and find the one it wanted and click on it, at this point the select wouldn't close, so now the code no longer opens the select in the first place, it clicks on the hidden option to select it, not 100% what i wanted, but it works.

Happy Programming, Ben.