1

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.

6
  • Does calling ele.click() before making a selection make any difference? Commented Mar 12, 2015 at 2: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? Commented Mar 12, 2015 at 2: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. Commented Mar 12, 2015 at 2: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. Commented Mar 12, 2015 at 3:27
  • Good. Try right-clicking on the dropdown and choosing "Inspect Element" - which element is highlighted in the source? Commented Mar 12, 2015 at 3:29

1 Answer 1

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");
Sign up to request clarification or add additional context in comments.

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.