Visual Studio Coded UI: Select HTML Element by CSS Selector

Question

I have run into a problem selecting an item within Microsoft's CodedUI framework. I have a page full of items that can be added/removed via selecting a checkbox. The checkboxes do not have unique id on them, and I am having trouble selecting other than the first item when looking for a particular Tag/class combination. Is there some trick to doing this that isn't immediately obvious.

Answer 1

There are a couple different options here:
1. You could select the object by selecting the item related to it

<div id="parent">
    <label id="checkbox1234">MyCheckBox</label>
    <input checked="false"></input>
</div>

... could be selected as:

HtmlDiv parent = new HtmlDiv(browserWindow);
parent.SearchProperties["innerText"] = "MyCheckBox";

HtmlCheckBox target = new HtmlCheckbox(parent);
target.SearchProperties["TagName"] = "INPUT";
return target;

or

HtmlLabel sibling = new HtmlLabel(browserWindow);
sibling.SearchProperties["id"] = "checkbox1234";
UITestControlCollection col = sibling.GetParent().GetChildren();
foreach (UITestControl control in col)
{
    if (control.ControlType.ToString().Equals("HtmlCheckBox"))
    {
        return (HtmlCheckBox)control;
    }
}

2. You can use these test utilities created by Gautam Goenka. They worked wonders for me as far as identifying the content of an object and using it for assertions. Still, if you don't have any meaningful way of identifying the objects based on content, this won't help you either. When all else fails, add some useful identifying properties to the HTML.