Writing CodedUI code without recording and playback

Main uses of writing code without recording and playback is we can define our own custom names for the objects, same as we used to do in QTP. Which would be easy for us for updating or maintenance of the code later.

I used to record and run the code. The problem was because of the names generated by the tool, its bit hard for me to know what window is what and which object it is actually referring it. After a thorough process, here is my analysis.

Let us do this for clicking Equal button on the Calculator.

•          The first step here is same like in QTP, which is spying the object and knowing its hierarchy.

Figure1:

In the left hand side box, we see the hierarchy for the Equal button. So for an Equal button to be defined, the Calculator window and Item window are to be defined.

•         Now in the UIMap.cs let us define the Calculator window.

To know the properties of the UICalculatorWindow, simply select the control and the properties are defined as shown below

Figure2:

Public partial class UIMap

{

public CalcWindow CalcWindow

        {

            get

            {

                if ((mCalcWindow==null))

                {

                    this.mCalcWindow = new CalcWindow();

                }

                return this.mCalcWindow;

            }

        }

        private CalcWindow mCalcWindow;

}

·         CalcWindow is the main window. Now we need to define the CalcWindow.

public class CalcWindow : WinWindow

    {

        public CalcWindow()

        {

// defining the search properties as seen in the builder.

            this.SearchProperties[WinWindow.PropertyNames.Name] = "Calculator";

            this.SearchProperties[WinWindow.PropertyNames.ClassName] = "CalcFrame";

            this.WindowTitles.Add("Calculator");

        }

        public CalcEqualItemWindow CalcEqualItemWindow

        {

            get

            {

                if ((mCalcEqualItemWindow == null))

                {

                    mCalcEqualItemWindow = new CalcEqualItemWindow();

                }

                return mCalcEqualItemWindow;

            }

        }

        private CalcEqualItemWindow mCalcEqualItemWindow;

    }

As seen in the Figure2, the child for the Calculator window is Item window. While recognizing the object in the CodedUI, we see every button has got a window defined for it. So here we need to define EqualItemwindow for the Equal button. So this is done in the Calcwindow class as shown above.

·         The last step is defining the button.

For defining the button the its parent EqualItemWindow which is initialized in the CalcWindow class is to be defined as shown below

public class CalcEqualItemWindow : WinWindow

    {

        public CalcEqualItemWindow()

        {

// search properties for the Window

            this.SearchProperties[WinWindow.PropertyNames.ControlId] = "121";

            this.WindowTitles.Add("Calculator");

        }

        public WinButton EqualButton

        {

            get

            {

                if ((this.mEqualButton == null))

                {

     // search properites for the Button

                    this.mEqualButton = new WinButton(this);

                    this.mEqualButton.SearchProperties[WinButton.PropertyNames.Name] = "Equals";

                    this.mEqualButton.WindowTitles.Add("Calculator");

                }

                return this.mEqualButton;

            }

        }

        private WinButton mEqualButton;

    }

Finally the Equal button is defined. Now if we need to write a function to click this button, we write the following code in the UIMap class and it looks as below

public void ClickMyEqualButton()

        {

            WinButton equalButton = this.CalcWindow.CalcEqualItemWindow.EqualButton;

            Mouse.Click(equalButton);

        }

Please feel free to share if anyone has any better approaches or anything can be made better in the above approach :)