Drop Downs are not being recognized in Coded UI tests

Question

I am pretty new to Coded UI tests and I started testing our web application. When I record the actions, the drop downs in my application are not being recognized as Comboboxes, instead in the properties I see their control type as Pane.

<span class="k-widget k-dropdown k-header select dropDown" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="33" aria-owns="EWDBaseConditionGuid_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="EWDBaseConditionGuid_option_selected" style=""><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Base Angle</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select class="select dropDown" data-val="true" data-val-required="The EWDBaseConditionGuid field is required." id="EWDBaseConditionGuid" name="EWDBaseConditionGuid" data-role="dropdownlist" style="display: none;"><option value="013efe04-3c2d-436b-96e6-af76a8b6cf47">Formed Base Trim</option><option value="d430bc46-b92f-4e0c-96f4-7747727d0a1a" selected="selected">Base Angle</option><option value="5a30c88f-6b2b-4400-86ce-3e9601d17c0f">Base Channel</option><option value="712db331-b775-4020-92c1-07eb8049acb5">Low Base Girt</option></select></span>
<span unselectable="on" class="k-input">Base Angle</span>
<span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-   s">select</span></span>
<select class="select dropDown" data-val="true" data-val-required="The EWDBaseConditionGuid field is required." id="EWDBaseConditionGuid" name="EWDBaseConditionGuid" data-role="dropdownlist" style="display: none;"><option value="013efe04-3c2d-436b-96e6-af76a8b6cf47">Formed Base Trim</option><option value="d430bc46-b92f-4e0c-96f4-7747727d0a1a" selected="selected">Base Angle</option><option value="5a30c88f-6b2b-4400-86ce-3e9601d17c0f">Base Channel</option><option value="712db331-b775-4020-92c1-07eb8049acb5">Low Base Girt</option></select>

AS far as I understand, the UIMap recognizes an element as a ComboBox if the crosshair points to the 'select' tag but in my case it is pointing to the first 'span' tag and as a result it is not rendering the control as a combobox. I would greatly appreciate if anyone could help me resolve this.

Answer 1

Ideally, you should be able to select the Combo box. Another alternative is to get the children of the span tag(which will give you the actual drop down) and then do a hand coding. eg: If the parent object is "SpanObj"

HtmlComboBox drpDown= new HtmlComboBox(SpanObj);
drpDown.SearchProperties[HtmlComboBox.PropertyNames.Class] = "select dropDown";
drpDown.Find();

Answer 2

I spent a lot of time trying to select an item from a Telerik drop down for our product. I did the 'logical' thing (which is antithesis to MS) & set the break point at the drop down. When I stepped into it in the debugger the drop down opened & closed right away. The trick is to set the item you want to select in the drop down list using the coded UI test builder (eg, Mouse.Click(UIMap.UIRebalxXTradingInternWindow.UIRebalxXTradingDocument12.UIDEMO98Custom, new Point(160, 8));) & it will get selected. It's pretty much a try & adjust scenario to find the correct selection from the UIMapDesigner file.