4

I'm not being able to select a value from a Kendo's dropdown, this is the code (C#):

var select = FindElement(By.Id("Type"));
select.SelectByValue("HouseHold");

That's not the selenium raw api, I'm wrapping it up. In this case, FindElement() returns a SelectElement, but when I try to select a value nothing happens on my target web-app (I don't get any code exception, the test succeeds). I believe that Selenium does not support this Kendo UI control, is there a recommended way to handle not supported UI elements like this one?

Edit:

        <ul class=" gs-container">
          <li class="gs-3 gs">
          <label for="Type">Type *</label>
          <select class="selId-28150fa4-9183-4b25-b149-ba1f72d72a93" data-val="true" data-val-required="The field Type is required"
          id="Type" name="Type">
            <option value="Individual">Individual</option>
            <option value="HouseHold">HouseHold</option>
            <option value="Business">Business</option>
          </select> 
          <script type="text/javascript">
$(&quot;select.selId-28150fa4-9183-4b25-b149-ba1f72d72a93&quot;).kendoDropDownList();
</script></li>
        </ul>
|improve this question
  • Please provide link to the page or relevant HTML. – Željko Filipin Jan 4 '13 at 9:40
  • @ŽeljkoFilipin there you go, hope that helps – ggiunta Jan 4 '13 at 13:57
4

I find it easiest to automate the KendoUI DropDownList using javascript. As an added bonus, this makes it work with PhantomJS.

public static void KendoSelectByValue(this IWebDriver driver, IWebElement select, string value)
{
    var selectElement = new SelectElement(select);
    for (int i = 0; i < selectElement.Options.Count; i++)
    {
        if (selectElement.Options[i].GetAttribute("value") == value || selectElement.Options[i].GetAttribute("text") == value)
        {
            var id = select.GetAttribute("id");
            ((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#{0}').data('kendoDropDownList').select({1});", id, i));
            break;
        }
    }
}
|improve this answer
  • Just curious, is there a reason why Webdriver's SelectByValue method or clicking directly on the Option wouldn't work? – Sam Woods Jan 9 '13 at 17:19
  • Just because of how the Kendo UI DropDownList is written. The controls you see on the page aren't actually the select elements. $($('#size')[0][2]).select(); does not work, but $('#size').data('kendoDropDownList').select(2); does. Click just appears to open the drop down, not select anything. – Jason Dove Jan 10 '13 at 18:08
  • I'm still not sure what you mean. By "The controls you see on the page" what are you referring to? Once the JavaScript executes and you are looking at the DOM loaded in the browser, it for sure is just a select element with option elements as children. – Sam Woods Jan 10 '13 at 19:23
  • 1
    The code sample in the OP may be misleading because the .kendoDropDownList() method hides the select element and adds its own KendoUI-styled span elements, so it isn't just a select anymore. – Jason Dove Jan 10 '13 at 19:39
  • 1
    So this kind of works. The value gets changed, but using the angular directive for kendo-drop-down-list, the method assigned to k-on-change never gets fired. – Derek Greer Feb 27 '16 at 2:57
3

First, Kendo UI (or any ajax library, or asp, or etc) makes no difference to Selenium since all it does is generate HTML and Selenium interacts directly with the HTML/DOM. If Selenium does not work with this select box, it would be a Selenium bug with any UI, not just Kendo UI.

Does something like this work?

        ReadOnlyCollection<IWebElement> options = select.FindElements(By.TagName("option"));
        IWebElement matchingOption = options.FirstOrDefault(opt => opt.GetAttribute("value") == "HouseHold");
        if (matchingOption == null)
        {
            throw new Exception("The option was not found in the ComboBox");
        }
        matchingOption.Click();
|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.