CodedUI GetChildren() doesn't return children with HTML5 tags like HEADER, SECTION, ARTICLE, NAV

Question

In codedUI I am unable to traverse by GetChildren() method in an html page with HTML5 tags.

My Html structure is like this.

HTML
  |-BODY
      |-DIV id="pagetop"
         |- HEADER class="headerclass"
         |- NAV class="navclass"
         |- SECTION class="sectionclass"
         |- FOOTER class="footerclass"
         |- DIV id="lastdiv"

Issue: On doing GetChildren() on "pagetop" div control, only 1 result is returned having "lastdiv" div control in it. It should return 5 controls instead.

I am able to capture the UIMap for SECTION(or other HTML5 tags) and able to traverse backward by GetParent() method, but the other way is not working.

SECTION.GetParent() = DIV id="pagetop"  [Works as expected]
SECTION.GetParent().GetChildren() = Only 1 result [This is wrong, should be 5]

Is there an issue with traversing HTML5 tags in codedui?

Answer 1

I have filed one bug in VS2013 feedback forum for this issue. It can be tracked here: https://connect.microsoft.com/VisualStudio/feedback/details/898599/

Based on suggestions from AdrianHHH, I am currently doing this to get all the children of a control. This returns all controls including HTML5 controls as HtmlCustom.

    private List<UITestControl> GetAllChildren(UITestControl uiTestControl)
    {
        var child = new HtmlControl(uiTestControl);
        child.SearchProperties.Add("InnerText", "", PropertyExpressionOperator.Contains);
        var items = child.FindMatchingControls().ToList();
        var trueChildren = items.Where(i => i.GetParent().Equals(uiTestControl)).ToList();
        return trueChildren;
    }

Answer 2

Try looking at the child controls of the one control that is found. I am not aware of anything that says the HTML structure you show MUST be represented with exactly the same number of levels. Phrasing that differently, the UI Controls might have extra levels than the minimum that appear to be necessary for the HTML structure.

To understand how the HTML is represented you could use the Coded UI cross-hairs tool. Start with one of the five sections (or a child of theirs) and then use the four navigation arrows to move up through the hierarchy to see what items Coded UI can see at each level.

Another approach might be to use recursive code that calls GetChildren() to descend the hierarchy and show exactly what is present at each level. You might use code based on the recursive routine in my answer to this question Recursively locating a UIElement with InnerText in C# but using a small maxDepth and adding some Console.Writeline() or other print statements to display the controls found.