Re: How to select an item from a DropDownList (Kendo UI) in Selenium2Library

6,898 views
Skip to first unread message

Tatu Aalto

unread,
Oct 11, 2013, 1:15:09 AM10/11/13
to m...@protel.net, robotframework-users

Ugh

Without knowing the html code it's hard to say for sure.  But the  Selenium2Library Select From List # keywords [1] have worked for me.

-Tatu
[1] http://rtomac.github.io/robotframework-selenium2library/doc/Selenium2Library.html#Select From List

On 10 Oct 2013 22:17, "mr" <m...@protel.net> wrote:
Hi everybody!

Does anybody knows how to open and select an item from a DroptDownList (e.g. provided by Kendo UI framework, see http://docs.kendoui.com/api/web/dropdownlist)?

Which keywords do I have to use when using the Selenium2Library?

Regards!


--
You received this message because you are subscribed to the Google Groups "robotframework-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to robotframework-u...@googlegroups.com.
To post to this group, send email to robotframe...@googlegroups.com.
Visit this group at http://groups.google.com/group/robotframework-users.
For more options, visit https://groups.google.com/groups/opt_out.

mr

unread,
Oct 11, 2013, 3:19:32 AM10/11/13
to robotframe...@googlegroups.com, m...@protel.net
Yeah, you are right. It was my fault I didn't provide the information. The problem is that it is hard do find the right HTML code :-(

The drop down list is build of combination of 'span' 'div' 'ul' 'li', e.g.: (look especially for "location_listbox")

<div class="searchRight">
       <span style="" class="k-widget k-dropdown k-header ... " aria-owns="location_listbox" ">
               <span unselectable="on" class="k-dropdown-wrap k-state-default">
                      <span unselectable="on" class="k-input">Alle</span>
                      <span unselectable="on" class="k-select">
                         <span unselectable="on" class="k-icon k-i-arrow-s">select</span>
                      </span>
                </span>
                <input id="location" value="" data-role="dropdownlist" style="display: none;">
        </span>
</div>

<div class="k-animation-container ... ">
<div id="location-list" class="k-list-container k-popup k-group k-reset k-state-border-up... ">
<ul id="location_listbox" class="k-list k-reset ...">
<li class="k-item" unselectable="on" role="option" tabindex="-1">All</li>
<li id="location_option_selected" class="k-item k-state-selected k-state-focused">Toszek</li>
</ul>
</div>
</div>

mr

unread,
Oct 11, 2013, 3:22:54 AM10/11/13
to robotframe...@googlegroups.com, m...@protel.net
Forgot to state in the last post:

"Select From List" did not work for me

Tatu Aalto

unread,
Oct 11, 2013, 1:52:18 PM10/11/13
to m...@protel.net, robotframe...@googlegroups.com
Ugh

In your code sinpped, I do not see drop down element, usually identified with <select> ... </select> element [1]. I see a list element [2], looking like this: <ul> <li> ... </li> </ul> . As usual with html frameworks, what may seem like drop down menu, does not necessary be a drop down menu. Or it may be drop down menu but you copied the wrong code snipped.

To tackle the last problem, there is tool for you: firebug [3]. Also it helps you to find/discover the correct html locators easily. I also use the firepath [4] extension to validate/test my locators. Chrome has also similar functionality out of the box but I like Firefox extensions. Matter of an opinion, no need to argue over.

To first problem is more problematic, but in my cases the usual the solution is to find the input field, which masquerade to be a drop down menu. In my cases I have been able to input the text what I want (in your case All or Toszek) and then press enter. In Selenium2Library my keyword would look something like this:

Input Text    ${input field locator}    Toszek
Press Key    ${input field locator}    \13 # ASCII code for enter key

Sometimes, some more creative ways are need, example pressing tab/arrow up and down keys to get the desired solution.

-Tatu

[1] http://www.w3schools.com/tags/tag_select.asp
[2] http://www.w3schools.com/tags/tag_li.asp
[3] https://getfirebug.com/

mena...@nowforce.com

unread,
Oct 17, 2013, 4:31:44 AM10/17/13
to robotframe...@googlegroups.com, m...@protel.net
I've had the same problem and the way I solved it was by clicking on the dropdown element and then clicking on the required item, as KendoUI dropdown is AJAX it changes the HTML when you click on an element (open the dropdown, select the item etc.) so you need to open FireBug or the Chrome Developer tool (CTRL+SHIFT+J) and do inspect element on the required element and find a good locator, I've used JQuery to select a Span element that contains the text I needed (i.e. jquery=span:contains('Dev')) and it worked much better then XPath (didn't find yet a tool that will give me automatically the JQuery locator unlike XPath but it's not to hard to figure)

Hope this helps.. if you have any trouble I could show you exactly what I've done an compare with you...
Menachem


On Friday, October 11, 2013 8:15:09 AM UTC+3, Tatu Aalto wrote:

Ugh

Without knowing the html code it's hard to say for sure.  But the  Selenium2Library Select From List # keywords [1] have worked for me.

-Tatu
[1] http://rtomac.github.io/robotframework-selenium2library/doc/Selenium2Library.html#Select From List

On 10 Oct 2013 22:17, "mr" <m...@protel.net> wrote:
Hi everybody!

Does anybody knows how to open and select an item from a DroptDownList (e.g. provided by Kendo UI framework, see http://docs.kendoui.com/api/web/dropdownlist)?

Which keywords do I have to use when using the Selenium2Library?

Regards!


--
You received this message because you are subscribed to the Google Groups "robotframework-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to robotframework-users+unsub...@googlegroups.com.

mr

unread,
Mar 19, 2014, 4:15:33 AM3/19/14
to robotframe...@googlegroups.com, m...@protel.net
Thanks for all the answers! In the meantime I have found a working solution, but forget to post it here so I want to make up leeway now:

*** Keywords ***
KendoUI Dropdown List Item Choosing
    [Arguments]    ${dropdownNameWithout_listbox}    ${listitem}
    [Documentation]    Example for payCreditCardType_listbox:
    ...
    ...    HTML Code:
    ...
    ...    <span class="k-widget k-dropdown k-header" [...] aria-owns=" *payCreditCardType_listbox* " aria-disabled="false" [...] ><span [...] <span unselectable="on" class="k-input">VISA</span><span unselectable="on" class=" [...] <input id="payCreditCardType" name="payCreditCardType" data-paymentselect="cardtype" required="" data-role="dropdownlist" style="display: none;"></span>
    ...    [...]
    ...    <div class="k-list-container k-popup k-group k-reset" id="payCreditCardType-list" data-role="popup" [...] <ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id=" *payCreditCardType_listbox* " aria-live="off" style="overflow: auto;"><li tabindex="-1" [...]  id="payCreditCardType_option_selected" aria-selected="true">VISA</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Mastercard</li></ul></div>
    ...
    ...
    ...    Robotframework Code:
    ...
    ...    KendoUI Dropdown List Item Choosing payCreditCardType Mastercard
    Comment    KendoUI Dropdown List Item Choosing
    Wait Until Page Contains Element    //span[@aria-owns='${dropdownNameWithout_listbox}_listbox']//span[@class='k-input']
    Click Element    //span[@aria-owns='${dropdownNameWithout_listbox}_listbox']//span[@class='k-input']
    Click Element    //div[@id="${dropdownNameWithout_listbox}-list" and not(contains(@style,'display: none'))]/ul[@id="${dropdownNameWithout_listbox}_listbox"]/li[text()='${listitem}']
    

anil.s...@gmail.com

unread,
Jun 12, 2014, 11:33:12 PM6/12/14
to robotframe...@googlegroups.com, m...@protel.net
Hello every one,

I'm going to share the  code sample for manage the kendo ui dropdownlist set selected index in MVC 4.5 project.



Thank you !!!!!

------------------------------------------------------------------------------------------------------------


On Friday, October 11, 2013 10:45:09 AM UTC+5:30, Tatu Aalto wrote:

Ugh

Without knowing the html code it's hard to say for sure.  But the  Selenium2Library Select From List # keywords [1] have worked for me.

-Tatu
[1] http://rtomac.github.io/robotframework-selenium2library/doc/Selenium2Library.html#Select From List

On 10 Oct 2013 22:17, "mr" <m...@protel.net> wrote:
Hi everybody!

Does anybody knows how to open and select an item from a DroptDownList (e.g. provided by Kendo UI framework, see http://docs.kendoui.com/api/web/dropdownlist)?

Which keywords do I have to use when using the Selenium2Library?

Regards!


--
You received this message because you are subscribed to the Google Groups "robotframework-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to robotframework-users+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages