Selecting From Multiple Chosens with Similar IDs

[Michael]

Hi,

I was hoping somebody might have a suggestion on how to do this using Standalone without having to resort to doing code behind:

On our site we have areas where the user can add extra Chosen ( http://harvesthq.github.com/chosen/ ) dropdown elements to choose more items.  Each one of these gets a Unique ID in the following format:

Item_(Item GUID)_ItemIDChzn

There is no way to hard-code the GUID into a test since it is generated each time a dropdown is added, but I'm able to get it to work when there's only a single dropdown using 'startswith' and 'endswith' logic.  Is there any way to, perhaps, store the item ID after it's been selected so I can use it to make sure it isn't clicked again?  Or some other solution?

I'm sure I can work out a solution to this using code-behind but I'd prefer to do it regularly if possible.

Thanks,
Michael

[Cody]

Hi Michael,

I studied your demo website. I don't see a true GUID, but I do see a predictable changing of the name between the selection list and the selected items. See the attached screen shot for what it looks like in the DOM. In both cases the 'o' from the selection list is changed to a 'c' in the selected list.

Is there any way to, perhaps, store the item ID after it's been selected so I can use it to make sure it isn't clicked again?

Now I need some clarification what/how exactly do you want your test to behave? Why would your test click the same item again? What exactly are the steps of your test? Once I understand how the test needs to operation (the steps the test should go through) then I can assist getting there.

Regards,
Cody
the Telerik team

[Michael]

Cody,
The site in my link doesn't really replicate how our site deals with the users being able to add more drop-downs themselves, I just linked it as that's where the code for Chosen is kept.  I'll try to explain better without giving away any information specific to our site(some of our stuff is proprietary so I have to strip down the code).

When a user first enters this screen, they are given a single drop-down that lets them choose an item, with the code looking similar to this(I've formatted this as best I can, a lot of it is generated code so it was pretty ugly to start with):

<div id="Itemc25aa0f3-1414-4e41-82d1-237def114471">

    <div class="Remove" rowid="c25aa0f3-1414-4e41-82d1-237def114471" title="Remove this item.">

        <span class="ui-icon ui-icon-trash"></span>

    </div>

    <input id="ToItem_c25aa0f3-1414-4e41-82d1-237def114471__RowID" name="ToItem[c25aa0f3-1414-4e41-82d1-237def114471].RowID" type="hidden" value="c25aa0f3-1414-4e41-82d1-237def114471">

    <input id="ToItem_Index" name="ToItem.Index" type="hidden" value="c25aa0f3-1414-4e41-82d1-237def114471">

    <select class="chzn-select chzn-done" data-placeholder="Select item" id="ToItem_c25aa0f3-1414-4e41-82d1-237def114471__ItemID" name="ToItem[c25aa0f3-1414-4e41-82d1-237def114471].ItemID"><option value=""></option>

        <option value="1">Option 1</option>

        <option value="251">Option 2</option>

    </select>
<div id="ToItem_c25aa0f3_1414_4e41_82d1_237def114471__ItemID_chzn" class="chzn-container chzn-container-single"><a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"><span>Select item</span><div><b></b></div></a>
     <div class="chzn-drop">

              <div class="chzn-search"><input type="text" autocomplete="off"></div><ul class="chzn-results">

             <li id="ToItem_c25aa0f3_1414_4e41_82d1_237def114471__ItemID_chzn_o_1" class="active-result" style="">Option 1</li>

             <li id="ToItem_c25aa0f3_1414_4e41_82d1_237def114471__ItemID_chzn_o_2" class="active-result" style="">Option 2</li></ul>

        </div>

   </div>

    <input id="ToItem_c25aa0f3-1414-4e41-82d1-237def114471__ItemDescription" name="ToItem[c25aa0f3-1414-4e41-82d1-237def114471].ItemDescription" type="hidden" value="">

    <input class="inputToItemValue" id="ToItem_c25aa0f3-1414-4e41-82d1-237def114471__ItemValue" name="ToItem[c25aa0f3-1414-4e41-82d1-237def114471].ItemValue" type="text" value="0">

</div>

Where c25aa0f3-1414-4e41-82d1-237def114471 is the generated ID.

If they then click an 'add' button, they're given a second drop-down which looks the same, except the c25aa0f3-1414-4e41-82d1-237def114471 is replaced with a new generated ID (for example, 0ac8e437-b689-43a9-a211-d9144fd092bd was just generated when I clicked 'add').  Except for the change in that ID, the code is exactly the same.

My issue is trying to select something from the second drop-down after it's been added.  I'm able to get the first drop-down selected using the beginswith and endswith method of finding objects(searching for beingswith ToItem and endswith ItemID_chzn for example), but if I try to use that multiple times it always picks the first drop-down available, and I'm unsure how to choose from the later, user-added drop-downs.

[Cody]

Hello Michael,

How about using a tag index? This works by finding the Nth occurrence of a specific tag, such as <select> or <ul>. If all the drop downs are contained in a wrapper div that has a static ID we can take advantage of that as well to make it even more reliable. Find the wrapper div having ID=X then under that find the 1st or second <ul> element. See the attached screen shot for an example how this looks in our Find Expression builder.

Greetings,
Cody
the Telerik team

[Michael]

Looks like this works for what I am needing to do.  Thanks for the help!

-Michael