Not able to click Left Navigation icon using Coded UI

Question

I am using Coded UI for creating Automated test cases and have encountered an issue. There is a menu icon inside on the Homepage and clicking on this icon will expand the Left Navigation, so that user can select which page to open next. This menu is always in collapsed state by default i.e. click is the only way to expand it and without expanding it child menu can't be accessed so this is kind of entry point for all test cases.

Issue which I am facing is, I am not able to Click this menu icon, I used the 'DrawHighlight' method of Coded UI to see if I am able to find the icon which gives positive result, but when it comes to clicking the icon or menu it fails

Here, is the HTML of the menu item.

<div class="im" id="menu1" style="width: 48px; height: 838px; min-height: 838px; min-width: 48px;">
    <Menu class="mainmenu" id="menu1_menupush" style="height: 838px; min-height: 838px; min-width: 48px;">
    <div class="pushmenu_inactive" style="width: 280px; margin-left: -232px; min-width: 280px;" data-level="0">
        <h2 style="text-align: left;">
            <i class="Pointer"></i>
            Main Menu
        </h2>

If, I use (copy) Coded UI recorded code, it works which uses 'Mouse.Click(UIControl, new Point(282,26))'. How can I write my own logic to find and click this menu.

Coded UI Test Builder Recorded Code (This code is taken from the recorded UIDesginermap.cs file, but even if I place this code in my file, then this too doesn't work, it only works when it is copied completely from UIDesginermap.cs file)

HtmlCustom custom = new HtmlCustom(brw);
custom.SearchProperties[HtmlCustom.PropertyNames.TagName] = "Menu";
custom.SearchProperties[HtmlCustom.PropertyNames.Id] = "menu1_menupush";
custom.SearchProperties[HtmlCustom.PropertyNames.Class] = "mainmenu";

HtmlDiv Menu1 = new HtmlDiv(custom);
Menu1.FilterProperties[HtmlDiv.PropertyNames.InnerText] = "Main Menu\r\n\r\nMain\r\n\nMain\r\n\B";
Menu1.FilterProperties[HtmlDiv.PropertyNames.Class] = "pushmenu_inactive";
Mouse.Click(Menu1, new Point(282, 26));

My Code

*brw is the BrowserWindow instance

HtmlDiv div = new HtmlDiv(brw);
div.SearchProperties.Add(HtmlDiv.PropertyNames.FriendlyName, "Main Menu, PropertyExpressionOperator.Contains);
div.SearchProperties[HtmlDiv.PropertyNames.ControlType] = "Pane";
div.SearchProperties[HtmlDiv.PropertyNames.Class] = "pushmenu_inactive";
//div.DrawHighlight();

HtmlCustom parent = new HtmlCustom(div);
parent.SearchProperties[HtmlCustom.PropertyNames.InnerText] = "Main Menu";
parent.SearchProperties[HtmlCustom.PropertyNames.TagName] = "H2";
//parent.DrawHighlight();

HtmlCustom child = new HtmlCustom(parent);
child.SearchProperties.Add(HtmlCustom.PropertyNames.Class, "Pointer", PropertyExpressionOperator.Contains);
child.SearchProperties[HtmlCustom.PropertyNames.TagName] = "I";
//child.DrawHighlight();
Mouse.Click(child);

Question 1: Is this Point(282,26) depends upon screen resolution or Browser? As the 'new Point(282, 26)' method of Coded UI fails sometimes (2 out of 10) which makes it little unreliable.

Question 2: I am not able to figure out what I am doing wrong in my code. Why it is not able to click the Main Menu icon and what I need to correct.

Answer 1

The point is the relative offset to the found control, thus it is not depended upon screen resolution or anything. Coded UI first finds the control and then the mouse.click adds an offset, then same you clicked when U recorded it.

Read more about it here: https://blogs.msdn.microsoft.com/mathew_aniyan/2012/03/16/faq-why-are-we-using-coordinate-based-actions-in-coded-ui-test/

For your second question I am not sure I can answer it based on your code, when I cannot run and debug it. Guess your searchlimiters are a bit different, then the generated code. But why do you not just use the Coded UI recorded code? Except for the InnerText (Main Menu\r\n\r\nMain\r\n\nMain\r\n\B) it looks pretty good. Just change the InnerText to a contains.