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:

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.

Answer 1

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