DotNetCurry Logo

Coded UI Test (CUIT) using Visual Studio 2010

Posted by: Gouri Sohoni , on 5/10/2011, in Category Visual Studio, VSTS & TFS
Views: 99240
Abstract: In this article, we will see how Coded UI Test can be created in Visual Studio 2010 by recording the action using CUIT Builder, how to add assertion and how CUIT can be executed. In the article, we will also see another way of creating CUIT by first executing the test case by using Microsoft Test Manager 2010, recording the actions, convert the actions to Code using Visual Studio 2010 and executing it.

Till the previous version of Visual Studio and its various tools for testing, there was no way a User Interface could be tested as automated tests. With Visual Studio 2010, a brand new feature has been added called Coded UI Test or commonly known as ‘CUIT’. This new type of unit test is available with Visual Studio 2010 Ultimate or Premium version. It provides functional testing for the user interface and the code gets created with the help of high level languages like C# or VB.NET.

You can create Coded UI Test only by using Visual Studio 2010. One way is by using the existing manual recording and the other is by creating a recording using CUIT Builder. If we have already executed our manual test case with the help of Microsoft Test Manager 2010 (a new installable and a separate UI for manual testing with Visual Studio 2010 Ultimate or Microsoft Test Professional 2010), we will have the actions recorded based on which code can be generated.

 

Update: Part II and Part III of this article can be found here

Coded UI Test (CUIT) - Convert Manual Test Case to Code using Visual Studio 2010  and 

In this article, we will discuss how to create our own action recordings, add assertions as and when required and convert all these actions to its code, with the help of CUIT Builder. We have direct support for recording the actions to technologies like Windows Application, Web Application, and WPF Application and also to Silverlight, with the help of feature pack. In case we want to extend support to any third party application, various APIs have been exposed which can be extended as and when required.

image

In the diagram shown above, you can view that the lowest level is for the technology specific layer. The second layer is the abstraction layer which helps in abstracting rest of the code from different technologies. Over it, you can see record and playback. First the steps are recorded and later filtered (depending upon rule) and converted to code (which can be with high level languages like C# or VB.NET as already mentioned). The playback engine comes with an API and property provider. This will give the information about various properties supported by the control and also for browser specific things like navigation. The top layer currently supports two clients. One is Microsoft Test runner 2010, which provides the Fast Forward functionality. The second is Visual Studio 2010 which provides Coded UI which will generate code, after recording actions. Last option is to add hand written code.

Let us take an example of recording the actions by starting browser, entering URL and other actions. The feature of CUIT involves intent aware recording. Eg: In case we want to start MS Excel, clicked on the Start button, entered Excel in Search and then selected Microsoft Excel 2010,  then the recording will only be done while Excel is launched.

Let us see some steps:

Step 1. With Visual Studio 2010 launched, create a new project with the template of Test Project as shown beliw. The default UnitTest1.cs file added can be deleted. You can select a language of your choice.

cuit-test-project

Step 2. Click on the Test menu, Select New Test and select the template of Coded UI Test, provide the name for .cs file and then a dialog with 2 options will be displayed as follows:

cuit-creation-methods

Step 3. Let us select the radio button for “Record actions, edit UI maps or add assertions”. We will start seeing the CUIT Builder on the right side bottom corner of the screen as shown. Click on the icon for starting the recording

cuit-builder

Step 4. Click on the start button and start the browser Internet Explorer. Enter the url as http://www.ssgsonline.net in the address bar. Take the mouse to the ALM assessment services (wait for a couple of sec) and hover over Consulting Services. Click on the icon to pause recording from CUIT Builder and then click on ‘show recorded steps’. Observe that the mouse hovering is also been recorded as action.

cuit-mouse-hover

Step 5. Resume the recording and click on the first product for eLearning. Let us generate code for all previous actions. Click on the icon to pause recording and then click on generate code. The default name for the recorded method is seen which can be changed to something meaningful.

Step 6. Just recording the actions may not be useful as we also need to validate certain actions. This is similar to using Assert in unit test where we can equate the actual and expected value. Let us add assertion in terms of the price for the product. Click on ‘Add assertion’ icon and then add assert method so that the price USD 23.00 is taken as the value for passing or failing the test.

cuit-add-assertion

Step 7. Resume the recording, close the browser and generate code by giving a suitable name. Close the CUIT Builder so that the control goes back to the Visual Studio. We can now see the 3 methods (we created the recording for) added as follows:

cuit-code-generated

Observe the attribute for the method.

Step 8. Open the Solution Explorer and view the different references added. The 4 main components which get added with CUIT can be seen below

cuit-components

All the actions recorded will be in UIMap.Designer.cs. In case you want any custom code to be added, then it is recommended to put it in the partial class file called UIMap.cs. UIMap.uitest file will show all the xml equivalent and the .cs file will have the calling code as is shown in previous step.

Step 9. The code generated for the method can be viewed by selecting the method, right clicking on it and select the option of ‘Go To Definition’

cuit-code

Step 10. Now that our Coded UI Test code is created, we can execute our CUIT from Test View. Test View Windows can be viewed by selecting Test menu, windows option followed by Test View. We need to refresh the view so as to see the newly added tests. The execution of the test will show all the actions we have recorded and finally give the result in the Test Results area.

The new actions can be recorded when required by right clicking on the empty area in code window and selecting ‘Use Coded UI Test Builder’ from ‘Generate Code for Coded UI Test’ option. With feature pack 2 installed, we can even have Coded UI Test Editor which can give following feature when selected with UIMap.UITest file and Open selected

cuit-editor

 

Conclusion

In this article, we have seen how Coded UI Test can be created by recording the action using CUIT Builder, how to add assertion and how CUIT can be executed. In the article, we have also seen another way of creating CUIT by first executing the test case by using Microsoft Test Manager 2010, recording the actions, convert the actions to Code using Visual Studio 2010 and executing it.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Gouri Sohoni is a Trainer and Consultant for over two decades. She specializes in Visual Studio - Application Lifecycle Management (ALM) and Team Foundation Server (TFS). She is a Microsoft MVP in VS ALM, MCSD (VS ALM) and has conducted several corporate trainings and consulting assignments. She has also created various products that extend the capability of Team Foundation Server.


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Meg Ryan on Tuesday, May 24, 2011 3:02 PM
Hello!!!

This was a really great post. I will keep visiting here.

Thanks for such a nice post.

Meg

Comment posted by manjunath on Tuesday, June 14, 2011 6:03 AM
hi it was good explanation,
1. can tell me how to validate (check) whether the applciation is closed after click on close button.
2. if the applciaton is failed my main window is not closed. ie if asseration fails next it is not executing the close operation.
please give me reply.
Comment posted by cyp on Friday, November 18, 2011 6:33 AM
very good post. The only problem is that running a simple automation that clicks an existing, visible button sometimes fails saying that the button does not exist.
Comment posted by purushothama p on Monday, April 9, 2012 6:22 AM
hi gouri,

may i know how to record the recorded coded ui test
Comment posted by Gouri Sohoni on Thursday, April 12, 2012 11:42 PM
Hi purushothama, Coded UI test can be created wither by recording the actions using Microsoft Test Manager or by using CUIT builder (from Visual Studio)
Comment posted by Mahesh on Thursday, July 26, 2012 5:55 AM
CodedUITest1.cs file not visible to me in solution explorer.

Please help
Comment posted by Gouri Sohoni on Thursday, July 26, 2012 7:27 AM
Hi Mahesh,
Let me know in details what steps you have followed.
Comment posted by sreedhar on Monday, July 30, 2012 7:44 AM
HI ,
It is really Help me for a Automation
Thank u Very Much
Comment posted by rajesh on Tuesday, July 31, 2012 12:46 AM
very good post, thank you for your information.
please let me know where can i get the advanced concepts examples
Comment posted by Leah on Tuesday, September 4, 2012 4:25 AM
Hi Gouri, How can the view in Step 10 be displayed? Thanks!
Comment posted by Gouri Sohoni on Wednesday, September 5, 2012 10:05 PM
Hi Leah,
The editor view which is shown can be obtained after installing Feature Pack 2
Comment posted by Leah on Monday, September 10, 2012 4:29 AM
Thanks Gouri. I realized that after some digging.. and unfortunately for me MSDN subscription is required.
Comment posted by kalyansantosh on Wednesday, October 3, 2012 12:03 AM
Im a learner for coded ui test. can u please guide me for one flow of the applciation.
In my application i have child items like in menu bar we have child items
like  
1 (if we place the cursor on 1 it displays 2 )
2  (if we place the cursor on 2 it displays3,4,5,6 )                 3
                                                                                     4
                                                                                      5


now the query is i want to click 3
while rcording it is identified.but in playback it is not working
Comment posted by Sravan on Tuesday, October 9, 2012 7:19 AM
HI Gouri,

the above article is really nice but i am not using recording and play back can you please let me know how to launch the window based application.it will be a great help for me.
i know how to launch web based application using CUIT.i want to know for window based application.
Comment posted by Tung on Tuesday, February 26, 2013 4:06 AM
I try Visual Studio 2010 Premium Edition (bundled with Coded UI feature),
I create a blank new Test Project in C# and add new CodedUITest in the project, then it prompted popup modal windows and I choose the 'Record actions, ...'
But I immediately find the following error...
"There was an error generating XML document"
I'm working in Win7 64 bit

Do anyone meet this issue? any one have idea on how to fix this...?
Comment posted by Ravi biradar on Tuesday, May 28, 2013 12:45 AM
Hi Gouri,
  I installed trial version of Visual Studio 2010 ultimate version,but am not able to view Coded UI Test Editor(default).Without this can we make assertion using xml.....
Comment posted by Gouri Sohoni on Tuesday, May 28, 2013 1:39 AM
Hi Ravi,

The CUIT editor is available with the feature pack with VS 2010 and not with the visual studio. You can use CUIT Builder to record the actions.
Comment posted by neetu on Wednesday, July 3, 2013 4:27 AM
Hi Gouri,
For an application with many GUIs, would it make sense to have a UIMap for each GUI and a .cs file for each test case. How scalable would this approach be. Could the UIMaps and .cs test case files be reduced in any way.
Thanks
Comment posted by Raju T on Sunday, July 7, 2013 3:08 AM
Hi Gauri,
I need to know the correct answers against below.Please reply
1)How can i save test reports generated by CUIT and what will be the extension for it?
2)How can i send test report/bug report to developer using TFS/MTM?
3)What are the steps to run automated script from MTM?
4)Suppose there are 10 automated test scripts to run and i want to add new tests to run then how we can do this?.please elaborate

Comment posted by Gouri Sohoni on Monday, July 8, 2013 10:39 PM
Hi Neetu,
You use multiple UI maps when the application is large with lots of forms or web pages. With multiple UI maps you can separate logically various constrcuts and it becomes easier to maintain.
Comment posted by Gouri on Tuesday, July 9, 2013 1:40 AM
Hi Raju,

You can use the test log to analyze. refer to http://www.dotnetcurry.com/ShowArticle.aspx?ID=880
You can run CUIT by associating it with MTM. Refer http://www.ssgsonline.com/AutoTesting.aspx where there is a video for Associate Automation
You need to create Test suites to add new tests.
Comment posted by Raju T on Tuesday, July 16, 2013 6:22 AM
Hi Gauri,
Thanks for writing but still i am not clear about-
1)How can i save test results generated by CUIT and what will be the extension for it?
2)How can i report the bug to developer using TFS/MTM?

I am going through several blogs but unable to understand the approach of coded ui. Is there any complete documentation which can help beginners to learn coded ui thoroughly? becoz here we have to understand MTM functionality linked with TFS server to run automated tests from MTM and analyze test results and report the bugs to developer.
Comment posted by Gouri Sohoni on Thursday, July 18, 2013 5:05 AM
Hi Raju,

CUIT if executed with MTM is linked with TFS and you need to understand how MTM helps in test management.
1. when you execute CUIT through VS you can analize the run as I mentioned in the article
2. TFS can be configured so as to send e-mail to a developer if a bug is assigned to him/ her
The best documentation is MSDN or follow this link where Mathew has given a list of related blogs
http://blogs.msdn.com/b/mathew_aniyan/archive/2010/02/11/content-index-for-coded-ui-test.aspx
Comment posted by Vaibhav Kulkarni on Wednesday, August 21, 2013 8:43 AM
Hi Gouri,

Is it possible to run CodedUI tests on Visual studio 2010 professional edition, :), I have to stick to VS 2010 pro due to license issue.

thanks in advance.
VMK

Comment posted by Gouri Sohoni on Wednesday, August 28, 2013 1:12 AM
Hi VMK,

Sorry CUIT can be available with VS Ultimate or Premium. The action recording can be done using MTM. Follow http://msdn.microsoft.com/en-us/library/bb385901(v=vs.100).aspx for more details

Gouri
Comment posted by Burdette Lamar on Thursday, April 17, 2014 12:51 PM
I've found that record/playback is *far* too brittle to be maintainable.

I'm doing hand-coded CUIT, which I blog about over at http://burdettelamar.wordpress.com/