Coded UI Testing in Visual Studio 2012

Functional Testing and UI Testing (UI Validation Logic testing) with Coded UI in Visual Studio 2010/2012

Coded UI Tests are the tests that help in testing if the application works well from the user point of view, in other words it helps in testing the user interface of the application. Basically these are automated tests that help in performing the functional testing of the UI, it is very helpful in testing the logic if there is some logic written like some kind of business logic and the validation logic (that does exist on the User Interface for most applications).

A Coded UI test provides the ability to test if the controls on the user interface contain the correct values and also help test conditions based on actions that output different results in various conditions. One can check the behavior of the application or the UI in different browsers since most of the time the UI encouters different problems among the various browsers.

For creating a Code UI Test, just simply run your application and perform the test manually while the Coded UI Test Builder runs in the background. Once the test is performed manually in the UI, you will see that the Coded UI Test Builder has recorded your actions, and you can generate a script for it. You can then edit this test and can also change the sequence of the actions performed in the test, so in this way it provides you with a lot of flexibility.

So how do it work? It basically generates a UI Map that represents the window and various other controls that are present on the UI. Then when you perform some manual actions while doing manual testing it will record your actions and generate some assertions corresponding to them, finally you can generate scripts for these recording(s). Now if you look into the scripts, you will see that the UI controls have been accessed via the UI map and then the various events have been performed or executed or triggered upon them just like if you have clicked the button while doing manual testing, recorded that and generate the script for the automation test then you will see in the script that the Coded UI button has been accessed and the Click event of that button was triggered in the script.

CUITe is one of the Coded UI Test Frameworks developed on the top Microsoft Visual Studio Test Engine; it helps in reducing the complexity and coding effort and helps in increasing maintainability.

Let's see how to create Coded UI Test cases

So here I will create a very simple application in which I use two text boxes and a button, and finally we will create a Coded UI test case for verifying if it is working or not.

So if you will look here I have added a simple Web Site in the solution, add on the "Default.aspx", I have added two textboxes and a button.



Now I will write some code, here I will not be providing you with the login solution, I just want to demonstrate the use of Coded UI, so what I will do is write some code to take the values entered by the user, handle it on a login click and display the message to the user in a label.



Now this is the sample page for which we can create Coded UI test cases. Let's see if it running.

So now create a Coded UI Test Project in the solution. Remember that you are using Visual Studio Premium Edition or the Ultimate Edition since it is available only in these two editions by default.



As soon as you add a Coded UI test project, a Coded UI Test will automatically be added and you will get a dialog box as shown below:



Select the option "Record action, Edit UI map or add assertions". So every time you add a new test case of type Coded UI you will be provided with this dialog box. So you can create a new test case with a previously existing recording or you can create a new recording.

As soon as you click "Ok" in the dialog box your Visual Studio will be minimized with a tray that appears on the bottom-right of your screen.



So using this tray you can perform the recording of actions for which you want to generate test cases. So from here you can start recording the test, can add assertions, can edit the actions and finally can generate the code for the test case both in VB as well as in C#.

Start Recording

Start Recording means all the actions that will be performed will be recorded, so if you want that in your test cases the application should be launched (that you obviously want) then that should also be captured in the recording, So start recording and open the browser, type in your application address in the address bar and start performing the test case steps in the application or start using the application. In my case what I did is I started the application without debugging, and as soon as the window is launched I started the recording.



Now I entered the values in the text boxes as I wanted them, in other words "abhishek" in both the text boxes and clicked on Login and a message appears saying that the operation is successful, after this I paused the recording and clicked on Generate Code. On doing so the following window appears and I named my first method "LoginSuccess".



Add Assertions

Assertions, you must be familiar with this term, are for if you have ever written a test case then the addition of assertions in the Coded UI is the process by which you can actually check the properties and values of any UI control. So for this just choose "Add Assertions" in the tray, then choose the control on which you want to assert, then select the assertion property, select the comparison type and the expected value along with the error message.

So now what I have done is dragged the Add Assertion target icon over the success message in my Web Form, and as soon as I did this the following window appears in which I selected the "Display Text" property of my label and added an assertion over it saying that this text should be equal to "Success!"





Now again after that I again clicked upon on Generate Code and generated a new method for this assertion as shown below:



Running Test Cases

Now if you see the code file, in other words CodedUITest1.cs then you will see that there are two methods automatically generated.



We are now ready with the test case. It's time to test it. So before closing the test case builder and the previously opened instance of the browser, rebuild your code, and again start the application without debugging.



Now after launching your application just go to "Test Explorer" and execute that test case, now you will see on the browser instance, the values are entered automatically in the text boxes, button click and then finally your will see the result that the test case has passed.



So here you can make multiple assertions as required on one or more controls present on your web page. Also one can make negative assertions as per the requirements. This is a very basic example although one can write or record more complex test cases as per the requirement. I have also attached the sample application that I created while writing this article, you can have a look into it if it helps.

I mentioned in above paragraph the option to write the Coded UI test cases youself, yes you can write or modify the code if you are good if you don't much like doing the recording.