Issue with Radio buttons selection in Coded UI

Question

I am using Coded UI for creating some test cases for a web application, while doing the same I have encountered an issue. I am not able to select a Radio Button using their Displayed Text, however if I use the ValueAttribute then its working fine. But, since value attribute is not containing a number which may not be of any logical use for a person creating test data, so I need to do same work using the Displayed Text of the Radio button. Below is the HTML:

<div class="col-sm-6">                   
    <div class="formItem formItem-2365   updateDependent" id="Some ID" data-form-item-id="2365" data-template="InlineRadioList" data-defaultvalue="Junior">
        <div class="form-group">
            <label title="" class="col-lg-2 control-label" for="TypeListID" data-original-title="SUFFIX" data-toggle="tooltip">SUFFIX</label>
            <div class="col-lg-10">
                <div class="radiolist-control" data-sets='["SUFFIXShown"]'>
                    <label class="radio-inline">
                        <input name="TypeListIDName" class="formviewer-control" id="TypeListID" type="radio" value="1966" data-sets="[0]" autocomplete="off">
                        Junior
                    </label>
                    <label class="radio-inline">
                        <input name="TypeListIDName" class="formviewer-control" id="TypeListID" type="radio" value="1985" autocomplete="off">
                        Senior
                    </label>
                    <label class="radio-inline">
                        <input name="TypeListIDName" class="formviewer-control" id="TypeListID" type="radio" value="1935" autocomplete="off">
                        Normal
                    </label>
                </div>
            </div>
            <span class="field-validation-valid help-block col-lg-offset-2" data-valmsg-replace="true" data-valmsg-for="TypeListIDName"></span></div>
        </div>
    </div>

One alternate solution is to use HtmlLabel instead of HtmlRadioButton and directly click the label, but can we do it using the HtmlRadioButton class and DisplayText?

Answer 1

A possible solution for this issue could be to find the label control containing the value you are looking to select, then find the child control (which should be the radio button) then selecting the radio button.

  String labelToFind = "Senior";
        BrowserWindow browser = BrowserWindow.Launch(@"pathToHTMLFile");
        HtmlLabel theLabelToFind = new HtmlLabel(browser);
        theLabelToFind.SearchProperties.Add(HtmlLabel.PropertyNames.InnerText, labelToFind);

        if (theLabelToFind.Exists)
        {
            UITestControlCollection childrenOfLabel = theLabelToFind.GetChildren();
            if (childrenOfLabel.Count >= 1)
            {
                if (childrenOfLabel[0].ControlType.Name == "RadioButton")
                {

                    //can use either one of these two to select the radio button
                    // Mouse.Click(childrenOfLabel[0]);
                    childrenOfLabel[0].SetProperty("Selected", true);
                }
            }

        }

Like you said, another way (and a bit simpler way) could be to just click on the label containing the RadioButton.

        String labelToFind = "Senior";
        BrowserWindow browser = BrowserWindow.Launch(@"pathToHTMLFile");
        HtmlLabel theLabelToFind = new HtmlLabel(browser);
        theLabelToFind.SearchProperties.Add(HtmlLabel.PropertyNames.InnerText, labelToFind);


        if(theLabelToFind.Exists)
        {
            Mouse.Click(theLabelToFind);
        }

Disclaimer: Both of these code examples can be built out to handle more errors and are only proof of concepts.