Watir: click on drop down menu with same attributes

Question

<div class="subtab">
    <button class="ui-multiselect ui-widget ui-state-default ui-corner-all" type="button" aria-haspopup="true" style="width: 231px;">
        <span class="ui-icon ui-icon-triangle-2-n-s"></span>
            <span>None</span>
    </button>
    <button class="ui-multiselect ui-widget ui-state-default ui-corner-all" type="button" aria-haspopup="true" style="width: 231px;">
        <span class="ui-icon ui-icon-triangle-2-n-s"></span>
            <span>None</span>
    </button>
</div>

This is 2 drop down menu (the first one is right above the second one). They both have the exact same attribute. How do I specify which one to click on? I'm not even sure why they have the same exact attributes but they do.

Is there html missing? The html only has a div, buttons and spans. Which element are you referring to as the "drop down menu" and the "check box"? — Justin Ko
sorry I will edit it to be more clear. The drop down menu is the button in this case. — user2807487
It seems unusual that there is nothing to differentiate the two menus. While the html of the two elements is the same, usually there is something around the elements (ex a sibling) that differentiates them. How, as a user, do you differentiate which button to click? — Justin Ko

Justin Ko Justin Ko · Accepted Answer · 2013-09-23T20:11:04

You can use the :index locator to specify which of the matching elements is returned. For example :index => 0 will return the first matching element, :index => 1 will return the second matching element, etc. Note that the :index is 0-based (ie starts at 0).

# To click the first one
browser.button(:class => class="ui-multiselect", :index => 0).click

# To click the second one
browser.button(:class => class="ui-multiselect", :index => 1).click

Watir: click on drop down menu with same attributes

1 Answers