1

Cannot make it work, need help , I don't know how to automate KendoUI dropdown 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>
0

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">
  • SendKeys not working for KendoUI, so I am looking for a different solutions , – Sarah Jun 4 '18 at 14:52
  • What selector are you using for the element? – Drew Jun 13 '18 at 19:00
0

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();
    }
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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