How to automate KendoUI dropdown with selenium webdriver and C#

Question

Cannot make it work, need help, I don't know how to automate KendoUI drop-down with Selenium using C#.

Sendkeys doesn't work for KendoUI.

Here is my HTML:

<div style="background-color: #e6e6e6; padding: 10px 10px; margin-bottom: 10px;">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <input class="k-input form-control" id="searchColonies" placeholder="Colony Name" data-bind="value: searchParameter" type="text">
                </div>                
            </div>
            <div class="col-md-4">
                <span style="width: 100%;" title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-busy="false" aria-activedescendant="549cac5d-6e77-4c5b-b528-cc6321984d37">
                    <span unselectable="on" class="k-dropdown-wrap k-state-default">
                        <span unselectable="on" class="k-input">- All Statuses -</span>
                        <span unselectable="on" class="k-select" aria-label="select">
                             <span class="k-icon k-i-arrow-60-down"></span>
                        </span>
                    </span>
                <input data-role="dropdownlist" data-value-primitive="true" data-text-field="Status" data-value-field="StatusID" data-option-label="- All Statuses -" data-bind="value: selectedStatus, source: statuses" style="width: 100%; display: none;"></span>                
            </div>                      
        </div>
        <div class="row">
            <div class="col-md-4">
                <span style="width: 100%;" class="k-widget k-combobox k-header k-combobox-clearable">
                    <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
                        <input class="k-input" autocomplete="off" style="" title="" role="combobox" aria-expanded="false" placeholder="- All Organizations -" tabindex="0" aria-disabled="false" aria-autocomplete="list" aria-owns="" aria-busy="false" aria-activedescendant="5e10bcaf-d176-4665-821b-8e94d8ce1be8" type="text">
                         <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
                         <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1">
                             <span class="k-icon k-i-arrow-60-down"></span>
                          </span>
                      </span>
                      <input data-role="combobox" data-value-primitive="true" data-text-field="Name" data-value-field="OrganizationID" data-placeholder="- All Organizations -" data-bind="value: selectedOrganization, source: organizations, events: { change: onOrganizationChange }" style="width: 100%; display: none;" aria-disabled="false">
                  </span>
            </div>
            <div class="col-md-4">
                <span style="width: 100%;" class="k-widget k-combobox k-header k-combobox-clearable">
                    <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-disabled">
                        <input class="k-input" autocomplete="off" style="" title="" role="combobox" aria-expanded="false" placeholder="- All Projects -" tabindex="0" aria-disabled="true" aria-autocomplete="list" aria-owns="" aria-busy="false" disabled="disabled" type="text">
                        <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
                        <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1">
                            <span class="k-icon k-i-arrow-60-down"></span>
                         </span>
                     </span>
                     <input data-role="combobox" data-value-primitive="true" data-text-field="ProjectNumber" data-value-field="ProjectNumber" data-placeholder="- All Projects -" data-bind="value: selectedProject, source: projects, enabled: selectedOrganization" style="width: 100%; display: none;" aria-disabled="true" disabled="disabled">                    
                 </span>
                
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <a class="k-button k-button-primary" data-bind="click: searchColonies">Search</a>
                    <a class="k-button" data-bind="click: resetColoniesGrid">Reset</a>
                </div>
            </div>  
        </div>
    </div>

Answer 1

The sendkeys command needs to be sent to this part of the element if you're using sendkeys.

<input class="k-input" autocomplete="off" style="" title="" role="combobox" aria-expanded="false" placeholder="- All Organizations -" tabindex="0" aria-disabled="false" aria-autocomplete="list" aria-owns="" aria-busy="false" aria-activedescendant="5e10bcaf-d176-4665-821b-8e94d8ce1be8" type="text">

Answer 2

Try giving this a shot.

    public void ResetKendoDropdown(string identifier, string defaultText)
    {
        var kendoElement = _driver.FindElement(By.Id(identifier));

        kendoElement.Click();
        var currentItem = kendoElement.FindElement(By.ClassName("k-dropdown-wrap"));

        while (currentItem.Text != defaultText)
        {
            currentItem.SendKeys(Keys.ArrowUp);
        }

        kendoElement.Click();
    }

Answer 3

The most reliable and stable solution is to operate with the KendoUI elements within the autotest is via JavaScript API that they expose.

Depending on the type of the component (KendoUI for JQuery, KendoUI for Angular, etc.) it might differ.

See example: https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox

Here is the perfect example of handling the Telerik KendoUI grid: https://www.automatetheplanet.com/automate-telerik-kendo-grid-webdriver/

Some might argue that using a JavaScript is a cheat, but your current task is not to test the 3rd party vendor component.