How is it possible to select values in a Kendo multi-select field?

Ui.Vision HowTo
1

I’m trying to select some values inside a multi-select using kantu, I can type some chars to filter the values, but I cannot select the values then.

The select field is based on kendo-ui and here the html code:

<div class="k-multiselect-wrap k-floatwrap" role="listbox" unselectable="on">
    <ul unselectable="on" class="k-reset" id="AuthorizationIdsAmc_taglist"></ul>
    <input class="k-input k-readonly" style="width: 74.7266px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-describedby="AuthorizationIdsAmc_taglist" aria-labelledby="AuthorizationIdsAmc_label" aria-disabled="false" aria-busy="false">
    <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
    <span class="k-icon k-i-loading k-hidden"></span>
    <span style="font-family: &quot;Open Sans&quot;, &quot;Segoe UI&quot;; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 29px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;">
          Select...
    </span>
</div>

and here the select tag:

<select class="full-width" data-val="true" data-val-required="Required." id="AuthorizationIdsAmc" multiple="multiple" name="AuthorizationIdsAmc" data-role="multiselect" aria-disabled="false" style="display: none;">
    <option>...</option>
</select>

I tried to use the command sendKey with the value and then “enter” but nothing… I also tried the command addSelection but nothing neither :frowning:

How can I select values from this component?

Depending on the command I receive the following error messages:

[error] Option type “” not supported

or

[error] cannot find option with 'label=…"

and If I use the command sendKeys with ${KEY_ENTER} to try to select the option, the form is submitted (without any value for this field) instead of selecting the value for the multi-select

2

Do you have a link to a kendo-ui demo page for this control? Is it this one?:

3

@ulrich
I’m 99% sure that yes, it is that one. It is not me the one that developed the web-app.

4

The Kendo page works directly with record and replay. This macro works as it was recorded:

{
  "Name": "kendo",
  "CreationDate": "2020-5-28",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://demos.telerik.com/kendo-ui/multiselect/index",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"example\"]/div/div/div",
      "Value": "",
      "Targets": [
        "xpath=//*[@id=\"example\"]/div/div/div",
        "xpath=//div[4]/div[2]/div[2]/div/div/div/div",
        "css=#example > div > div.k-widget.k-multiselect.k-multiselect-clearable.k-state-hover.k-state-focused.k-state-border-down > div"
      ]
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"required_listbox\"]/li[12]",
      "Value": "",
      "Targets": [
        "xpath=//*[@id=\"required_listbox\"]/li[12]",
        "xpath=//div[6]/div/div[2]/ul/li[12]",
        "css=#required_listbox > li.k-item.k-state-hover"
      ]
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"example\"]/div/div[2]/div/input",
      "Value": "",
      "Targets": [
        "xpath=//*[@id=\"example\"]/div/div[2]/div/input",
        "xpath=//div[2]/div/input",
        "css=#example > div > div.k-widget.k-multiselect.k-multiselect-clearable.k-state-hover.k-state-border-down.k-state-focused > div > input"
      ]
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"optional_listbox\"]/li[5]",
      "Value": "",
      "Targets": [
        "xpath=//*[@id=\"optional_listbox\"]/li[5]",
        "xpath=//div[7]/div/div[2]/ul/li[5]",
        "css=#optional_listbox > li.k-item.k-state-hover"
      ]
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"example\"]/div",
      "Value": "",
      "Targets": [
        "xpath=//*[@id=\"example\"]/div",
        "xpath=//div[4]/div[2]/div[2]/div/div",
        "css=#example > div"
      ]
    }
  ]
}