Coded UI is a User Interface Automation tool provided By Microsoft. This tool has enormous potential of automating Web. Windows and WPF applications. Open Source Tools like Selenium and others are incapable of automating applications such as windows and WPF. Especially wrt to WPF, as it is a Microsoft Technology, the support provided for WPF by Microsoft is awesome. The same applies for Window forms and other similar Microsoft Products and their user interface.
Lets Look at How to Create a Coded UI Test using Visual Studio 2013. The sample Application under test(AUT) is the popular Calculator Application which is a WPF Application.
In Order to Create a Coded UI Test in Visual Studio we need to Create a Project of the Type Test and Coded UI Test project.
Once the Project has been Created Successfully, we see a pop up on the Screen which asks whether would like to Record actions, edit UI Map or add assertions.
We will Click on Ok Button Keeping the first radio Button Selected. On Clicking Ok, the Visual Studio Minimizes and a new panel appears on the lower right part of the Screen with some buttons.
The buttons that are displayed are: Start recording, Add a New Control and Generate Code.
We Would now Select the Red Button and then work on the AUT for some actions and then pause the Recording. The Action that has been performed here in this example is that we Press '2', Press '+' , Press '3' and at the end Press the Sign '='.
After this , we need to click on Generate Code Button. It asks for the recording name. We ll provide some Logical Name to this Step.
After Adding this, we refer back to the Coded UI Test Builder and Close it. We now have the CodedUI Test project in front of us. Double Click on the UIMap.uitest file.
Now here, we See two Sections: Actions Panel and the Control map Panel.
The Actions Panel displays the Steps that have been performed.
The Control Map Panel displays the property of Controls that Have been Captured.
These Sections can be further optimized so that we can have the best of the Benefits from the Coded UI Test. Here, another information which is vital is to understand the anatomy of the UIMap file.
The UiMap File consists of the following three files:
- UIMap.uitest: This is internally an XML File which contains the property of all the Controls. This can be also Understood as the Object Repository
- UiMap.cs: This is a Class file which initially is and empty Class. This is a placeholder to put the code which the User would like to add as an addition to what Coded UI Itself provides.
- UIMap.designer.cs: This is a class file automatically generated by Coded UI and is a C# implementation of the UIMap.uitest file.
In Addition to this, the UImap.cs as well as UIMap.designer.cs are partia; classes. As such they combine together to complete the class.
With this much of knowledge about the files, lets See how they Look like:
UIMap.uitest file
UIMap.cs file
UIMap.designer.cs file
It is advisable to edit the UIMap.uitest file for changing the properties of the objects. Also, no changes should be made in the UIMap.designer.cs file. All changes on this file are overwritten and hence editing this file is strictly not to be done.
The UiMap.uitest file can be easily tweaked using the UIMap Tool Box which can be downloaded from the Visual Studio Gallery at the following Location:
With the help of this tool, we can restructure the UImap with minimal effort and by simply drag and drop. Once we do the changes to the UIMap.uitest file, remember to save it and regenerate the Map using the Coded UI Test Builder. After making changes to the Map file, it is recommended to Locate all the elements so as to see that the changes have not impacted the Map and all controls are recognized.
The following Snapshot shows the Updated UIMap After changing it using UIMap ToolBox
The Next Step is to Move the Code from the UIMap.Designer.cs to UIMap.cs for greater Control over the Steps. To perform this, We need to refer to the Actions Panel and then click on the root Note for the recorded Step. This Gives us an Option to Move Code to UIMap.cs. On clicking on this button a Disclaimer comes and we should agree to it.
On Moving the Code, the following is the snapshot of UIMap.cs. We should remove any mention of point in the Statements if the actions are not Specific to some coordinates on the Screen.
It is also important to know how to View the properties of the Controls. For this, we need to go to the UI Control Map Panel --> click on any Control --> Select any node --> Press F4.
The Next Steps is to Goto the Test and the test is written in the CodedUITest1.cs file. Lets Rename this File to Arithmetic.cs. The Next Step is to see the Attributes on the Screen. They are:
1. TestMethod - This is a placeholder where the tests are actually written. VS recognizes these as valid test methods
2. TestInitialize - In case, there are some prerequisites to be run prior to the execution of all test methods within a class, then the section test initialize is used. An example of such activity would be to cleanup Browser Cookies and Cache.
3. TestCleanup - In case, there are some Post requisites to be run after the execution of all test methods within a class, then the section test cleanup is used. An example of such activity would be to cleanup Browser Cookies and Cache.
Few Others which are not mentioned by default but are present are:
4. ClassInitialize - This is a placeholder to specify certain actions which needs to be performed on a class level. Such Actions would be invoked once a class is initialized and not upon every test method. An example of Such Actions would be Closing all instances of Browser and Opening an IE instance.
5. ClassCleanup - This is a placeholder to specify certain actions which needs to be performed on a class level. Such Actions would be invoked once a class is initialized and not upon every test method. An example of Such Actions would be Closing all instances of Browser.
6. AssemblyInitialize - This is a placeholder for actions to be done on an assembly level during start when the assembly is loaded.
7. AssemblyCleanup - This is a placeholder for actions to be done on an assembly level when the Solution is completely executed.
These were few of the attributes which were important to be known. Now lets, get back to the Test. here the name of the Test is Addition and the test would look like this.
In order to execute this test, the best way is to execute it through the Test Explorer. The Test Explorer can be Viewed from Visual Studio --> Test --> Windows --> Test Explorer
On Clicking on Test Explorer, the Test Explorer opens up with all the Test Loaded into it. Right Click on any of the test and click on Run. This would execute the test case. The following example shows the execution of test case.
Hence, This was an illustration on how to create a basic Coded UI Test with the example of the Calculator application.