Selenium select not working on some objects

Question

I am having trouble with setting a Select object through Selenium. This Select object has some JavaScript associated with it that populates it's 'options' when the page is loaded. I believe this is causing it to behave differently. Normally I can set a Select object with the following:

SelectElement sel = new SelectElement(ele);
sel.SelectByText(value);

With this specific object, the same code will execute successfully (no exceptions thrown), however the value does not get set. Note that I put sleeps and re-trys in and I am confident the Select object is fully loaded before the code is executed (otherwise an exception would occur).

The two Select objects giving me this trouble also appear different from standard html Select objects which reinforces my belief that they are not standard Selects. The first two drop downs in this image are the troublesome ones, while the rest work as expected: enter image description here

Unfortunately this is a private page that I cannot give you access to, but hopefully this HTML snippet is enough:

<h3>Details of your primary qualification, examination, or assessment</h3>

<script type="text/javascript" src="/assets/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="/assets/js/jquery.ui.selectmenu.js"></script>
<script type="text/javascript"> 
    j$(document).ready(function () {
        j$(".field [id$='_drpInstitution']").selectmenu();
        j$(".field [id$='_drpName']").selectmenu();

        j$(".field [id$='_drpInstitution']").change(function () {
            __doPostBack('content_0$ucCourse$drpInstitution', '');
        });

        j$(".field [id$='_drpName']").change(function () {
            __doPostBack('content_0$ucCourse$drpName', '');
        });

    });


</script>
<div class="field">                 
    <label for="content_0_ucCourse_drpInstitution" id="content_0_ucCourse_lblInstitution">Name of Australian institution (university/college/examining body):<em class="required">*</em></label>
    <select name="content_0$ucCourse$drpInstitution" id="content_0_ucCourse_drpInstitution" class="field-l Institution">
        <option value="-1">- Select -</option>
        <option selected="selected" value="Australian Catholic University">Australian Catholic University</option>
        <option value="Avondale College of Higher Education">Avondale College of Higher Education</option>
        <option value="Central Queensland University">Central Queensland University</option>
        <option value="Charles Darwin University">Charles Darwin University</option>
        <option value="Other">- Other -</option>

    </select>
    <em class="hint">If your institution does not appear in the list, please select 'Other' and enter your institution in the text box that appears.</em>
    <span id="content_0_ucCourse_vldInstitution" style="display:none;"></span>
</div>

When I inspect the Dropdown box, instead of getting the Select object I get the following Span:

<span>
    <a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" id="content_0_ucCourse_drpInstitution-button" role="button" href="#nogo" tabindex="0" aria-haspopup="true" aria-owns="content_0_ucCourse_drpInstitution-menu" style="width: 460px;" aria-disabled="false">
        <span class="ui-selectmenu-status">Australian Catholic University</span>
        <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
    </a>
</span>

When I inspect the resulting drop down list, I get a UL located in the footer:

<div class="ui-selectmenu-menu" style="z-index: 2; top: 786px; left: 741px;">
    <ul class="ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom" aria-hidden="true" role="listbox" aria-labelledby="content_0_ucCourse_drpInstitution-button" id="content_0_ucCourse_drpInstitution-menu" style="width: 460px; height: 189px;" aria-disabled="false" tabindex="0" aria-activedescendant="ui-selectmenu-item-562">
        <li role="presentation" class=""><a href="#nogo" tabindex="-1" role="option" aria-selected="false">- Select -</a></li>
        <li role="presentation" class="ui-selectmenu-item-selected"><a href="#nogo" tabindex="-1" role="option" aria-selected="true" id="ui-selectmenu-item-562">Australian Catholic University</a></li>
        <li role="presentation" class=""><a href="#nogo" tabindex="-1" role="option" aria-selected="false">Avondale College of Higher Education</a></li>
        <li role="presentation"><a href="#nogo" tabindex="-1" role="option" aria-selected="false">University of Wollongong</a></li>
        <li role="presentation"><a href="#nogo" tabindex="-1" role="option" aria-selected="false">Victoria University</a></li>
        <li role="presentation" class="ui-corner-bottom"><a href="#nogo" tabindex="-1" role="option" aria-selected="false">- Other -</a></li>
    </ul>
</div>

None of this appears in the Page Source, so it is all generated on the fly. I am currently working around the Select issue by clicking the hyperlink object id=content_0_ucCourse_drpInstitution-button and then clicking the hyperlink object text=Australian Catholic University

Any better workarounds would be appreciated.

Does calling `ele.click()` before making a selection make any difference? — alecxe, Mar 12 '15 at 02:09
If I try to click the Select element then I get a ElementNotVisibleException! But it still lets me set the Select element using the above code. There is a span object that exists in the same location as the Select that I can use to click on it, but this feels more like a work around than a solution. Any further ideas? — Scotty, Mar 12 '15 at 02:40
It looks like the actual `select+options` are hidden and there are other elements responsible for clicking and selecting options which trigger select options changes under-the-hood through javascript. — alecxe, Mar 12 '15 at 02:43
I believe you are right. When I hover over the Select element in Chrome debug mode, nothing is highlighted on the page. I will have to put in a hack for when these hidden select objects are used. — Scotty, Mar 12 '15 at 03:27
Good. Try right-clicking on the dropdown and choosing "Inspect Element" - which element is highlighted in the source? — alecxe, Mar 12 '15 at 03:29

score 1 · Answer 1 · edited May 23 '17 at 12:22

As you've already discovered, the dropdown is not represented by select->option in this case.

Handle it as is - find the a element by Id (which would be your "select"), click it to open up the dropdown; then, find the a element with text "Australian Catholic University" (which would be your "option") by link text:

IWebElement select = driver.FindElement(By.Id("content_0_ucCourse_drpInstitution-button"));
select.Click();

IWebElement option = select.FindElement(By.LinkText("Australian Catholic University"));
option.Click();

We can also think about the problem differently - if they've hidden the select element from us - we'll just make it visible. Cannot guarantee it would work since I cannot reproduce the problem:

((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].hidden = false; arguments[0].style.visibility='visible';", element);

where element is pointing to your select tag.

Then, after making the element visible try using SelectByText():

element.SelectByText("Australian Catholic University");

Thanks for the suggestion and link. I spent 30 minutes trying various implementations of `JavaScriptExecutor` and while all appear to execute successfully, I was not able to get the Select object work. I am back to clicking the `a` elements as I was earlier. — Scotty, Mar 12 '15 at 05:07

Selenium select not working on some objects

1 Answers1