Coded UI Testing in Visual Studio 2012

Coded UI Test are the tests which helps in testing if the application works well from the user point of view i.e. it helps in testing the user interface of the application. Basically these are the automated tests which helps in performing the functional testing of the UI, it is very helpful in testing the logics if the there are some logic written like some kind of business logic and the validation logic (Which do exist on User Interface for most of the applications)

Coded UI test provides the flexibility to test if the controls on user interface contain the correct values and also helps in testing condition based actions which output different results in different conditions. One can check the behaviour in of the application or the UI in different browsers as most of the time UI faces problem in different browsers.

For creating down a Code UI Test, just simply run your application and perform 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 script for the same. Once can now edit this test and also can change the sequence of the actions performed in the test, so in this way it provides you with the lot of flexibility.

So how do it works??? It basically generates a UI Map which represents the window and various other controls which are present on the UI. Now while you was performing some manual actions while doing manual testing it will record your actions and generates some assertions corresponding to them, finally you can generate scripts for these recording(s). Now if you will look into the scripts, you will see that the UI controls has been accessed via 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 with the help of Coded UI button has been accessed and the Click event of that button is triggered in the script.

CUITe is one of the Coded UI Test Framework which is 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 be creating a very simple application in which I will but two text boxes and a button, and finally we will create a Coded UI test case for verifying if it is working fine 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 am going to 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 am going to do is write down some code to take the values enter by user, handle it on login click and display 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 or not.

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

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

Select option “Record action, Edit UI map or add assertions”. So every time you will add a new test case of type Coded UI you will popped up with this dialog box. So you can create a new test case with already existing recording or you can create with the help of new recording.

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

So with the help of this tray you can perform recording of the action 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 which will be performed will be recorded, so if you want that in your test case the application should be launched (Which 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 address bar and start performing the test case steps in the application or start using the application. In my case what I have done is I have started the application without debugging, and as soon as the window gets launched I started the recording.

Now I entered the values in the text boxes as I wanted i.e. “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 following window appears and I names by first method as “LoginSuccess”.

Add Assertions

Assertions, you must be familiar with this term if you have ever written down any test case, so adding assertions in Coded UI is the process by which you can actually check the properties and value 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 done this following window appears in which I selected Display Text property of my label and added an assertion over it saying that this text should be equal to “Success!”

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

Running Test Cases

Now if you will see the Code file i.e. CodedUITest1.cs, you will see that there are two methods which are generated automatically.

Now we are ready with the test case, now it’s time to test it. So before starting close the test case builder and 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 getting entered automatically in the text boxes, button click and then finally your will see the result that the test case passed.

So here you can make multiple assertions as required on one or various 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. For Downloading the sample Application (follow: SampleApplication) which I created while writing this article, you can have a look into it if it helps.

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