How to detect Edit controls on web application in Firefox?

Question

I'm making a Coded UI Test with VS 2012 Update 4 for testing a web application.
On one of the web pages are two buttons for generating new entries.
These buttons are looking like that:
    <section class="well well-lg" id="sectionAddVorbe">
        <fieldset id="fieldsetAddVorbe" name="fieldsetAddVorbe">
            <legend translate="bewerbung.lebenslauf.Titel"></legend>
            <div class="form-group" id="fgAddVorbe">
                <button type="button" id="addVorbe" name="addVorbe" class="btn btn-default" ng-click="vm.addVorbeschaeftigung()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span translate="global.EintragHinzufuegen" id="spanAddVorbe"></span>
                </button>
            </div>
        </fieldset>
    </section>
    <section class="well well-lg" id="sectionAddSkills">
        <fieldset id="fieldsetAddSkills" name="fieldsetAddSkills">
            <legend translate="bewerbung.skills.Titel"></legend>
            <p translate="bewerbung.skills.Erklaerung"></p>
            <div class="form-group" id="fgAddSkill">
                <button type="button" id="addSkill" name="addSkill" class="btn btn-default" ng-click="vm.addSkill()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span translate="global.EintragHinzufuegen" id="spanAddSkill"></span>
                </button>
            </div>
        </fieldset>
    </section>
Because there was a leak with IDs and names i added these, whereever it was necessary.
Before the adding of the IDs and names Coded UI detected the buttons just by the text (defined by global.EintragHinzufuegen), so once one of the buttons was detected the other one couldn't be added as a seperate control to the UI-controllist of UIMap.test.
Internet Explorer just needs the ID and name in the button-tag, to detect the two buttons as different controls - in that case as Pane controls.
But when i make the same test with Firefox and click on the buttons while recording the test, the buttons are still detected by the text (global.EintragHinzufuegen).
So Coded UI registers a mouseclick on the Edit control (which contains the text) and in the controlslist of UIMap.test a hierarchy of Button and Edit is added.
Which changes have to be done in the HTML-code to make Coded UI detect the controls correctly while recording the test with Firefox?
Thanks in advance!

Answer 1

Hi Patrick Pirzer,
>>Which changes have to be done in the HTML-code to make Coded UI detect the controls correctly while recording the test with Firefox?
Just to make this issue clearly, did you use this extension tool "Selenium components for Coded UI Cross Browser Testing"?
To find the controls, the coded UI test use the unique properties as the search properties, so if there are controls which have the same properties, I suggest you not use them as the search properties. Or you could custom a coded UI test with code or
use unique properties as the search properties.
http://blogs.msdn.com/b/mathew_aniyan/archive/2009/02/12/hand-coding-a-coded-ui-test.aspx
If I misunderstood this issue, please feel free to let me know.
Best Regards,
Jack
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.