DotNetCurry Logo

Coded UI Test (CUIT) – Variations and Editing with Visual Studio 2010

Posted by: Gouri Sohoni , on 6/1/2011, in Category Visual Studio, VSTS & TFS
Views: 45004
Abstract: In this article we will explore advanced features of CUIT like adding multiple UI maps, re-using code, how the CUIT Editor helps and I will also list the best practices of using CUIT in VS 2010.

In our previous articles, we have discussed How CUIT can be Created By Recording Actions and secondly By using Existing Action Recordings. In this article we will explore advanced features of CUIT like adding multiple UI maps, re-using code, how the CUIT Editor helps and I will also list the best practices of using CUIT in VS 2010.

Multiple UI Maps

While generating code using CUIT, a new class is created in the UIMap for each object that has user interaction. So if there are a large number of objects, the UIMap will grow in size and will become very bulky. Similarly if multiple users are creating tests, the application will become very large and difficult to handle as there is a single UIMap associated with each test project by default. In order to overcome this issue, multiple UI maps can be created. Splitting the UIMap will provide following benefits:

  • We can have a map for logically breaking the application
  • Every tester can work with a separate UI map and there will no issues with code check in.

It is recommended to create multiple UI maps if the application under test is a complex one with lots of User controls in it.

 

Adding a UI Map is a very straight forward process as listed in the steps below:

Step 1: Using Solution Explorer, create a folder under which multiple UI maps will be added named UIMaps

Step 2: Now right click on this folder and select Add > New Item. Select Coded UI Test Map from the dialog of adding a new item

cuit-new-ui-map

Step 3: The CUIT Builder is automatically started when a new UI Map is added. Record the actions, add assertions as required and you can continue adding as many UI Maps as required.

Many a times, certain features of the application are repeated in various UI Maps. Instead of recording this feature separately with every UI Map, it can be put in the default UI Map and the method can be called from multiple places by re-using the code. Remember that the calling methods need to be specifically taken care of, in case you are adding multiple UI maps. The calling of the method will be automatically handled for the methods which are in the default UI Map.

Important: Do not modify the designer file for UI Map (UIMap.Designer.cs) as it gets regenerated every time from the XML file. In order to write custom code, change the partial class (UIMap.cs) instead.

Re-using the code

Any code which can be repeatedly used, can be put in a common method. This method can be called from other test methods to re-use the existing code. The recording of authentication can be such an example.

CUIT Builder Best Practices

  1. Use CUIT Builder as far as possible.
  2. Never modify the designer file for UI Map
  3. Keep a modular approach for recording test methods. Use logical break in a method recording so that re-cording will remain limited.
  4. Use meaningful method names for future usage
  5. Create separate UI Map for different modules in the application
  6. Create any assertion by using CUIT Builder so that the assert method also gets added
  7. When the User Interface changes, certain features like change in color or position do not require re-cording.
  8. When you need to re-record, use the same name so that it will overwrite the previous method.

The CUIT Editor gets installed with Feature Pack 2 and can be downloaded from this site and is available for MSDN subscribers. You need to first install quick fix named KB2403277. Once the feature pack is installed, the CUIT editor will be available for usage by selecting the UIMap.UITest and later selecting Open or double clicking on it. The following menu is shown after right click

cuit-start-editor

If you select ‘Open with Option’, then following screen is displayed where the default one is with the CUIT Editor

cuit-editor-open with

With the editor, the various icons you can see are for Find, Delete, Rename, Properties, Split into a new method, Move Code, Insert Delay, Locate particular UI control and Locate All.

cuit-editor-first-view

With the CUIT Editor, you can easily modify the tests you have already created. It provides us choices like find, delete, rename, split, move code and insert delay. This is the place where providing meaningful names for the methods you have created, will come handy. You can easily spot the required methods to be changed with the suitable names. Shown below is the first view of the CUIT Editor. You can see that many of the controls are greyed currently.

As you can observe in the image shown below, all the different actions are clubbed in a single method which can be split across. Splitting various actions into multiple methods will provide a modular approach which in turn will help in maintenance. Having a modular approach also reduces the actions to be re-recorded.

cuit-editor-split into-new-method

We can introduce delay in seconds with the help of CUIT Editor as shown

cuit-editor-delay

We can set the default setting for delay as 1000 milliseconds which can be customized as per our requirement. The recorded methods can also be used for finding out a UI control. You can view the recording of a Windows Application and the control finding combined, with following screen

cuit-editor-locate-ui-control

The textbox which is found, can be seen as highlighted in the screenshot.

Conclusion

In this article, we discussed certain variations with the Coded UI Test in terms of reusing code, adding multiple UI maps and also how the CUIT editor helps. In the next article, we will discuss how a normal Coded UI Test can be converted to Data Driven CUIT.

Was this article worth reading? Share it with fellow developers too. Thanks!
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 Naresh on Tuesday, October 18, 2011 1:45 AM
can anybody give more information about codedUITest(auotmation)  with Flash projects
Comment posted by ragunath on Tuesday, November 15, 2011 5:04 AM
Gouri how to avoid assertion exception handling error and how to add .csv file with coded ui?
Comment posted by Bruce Silver on Thursday, April 19, 2012 12:55 PM
A concern for me is using CUIT while development is going on; the project team I am on wants to take the existing recordings and apply for rewrites where locations of login boxes, dropdowns, etc. will be changing.  You say above that locations can change, does that mean the objects are not based on location/coordinates?  If you have 2 similar apps that you have CUIT and the plan is for them to merge, will this still work?  The goal is to reuse auto tests in current app that is fairly stable but could change and merging another to form a new app with a same type 'login' box.  Please send me any more details on this because I need to know the limitations of V.S. UI Coded Testing where I want it not based on location but on object id, etc.

Thanks,
Bruce Silver
Comment posted by Gouri Sohon on Tuesday, April 24, 2012 1:58 AM
Hi Bruce,
I am providing a link to Mathew's blog with various CUIT related topics. http://blogs.msdn.com/b/mathew_aniyan/archive/2010/02/11/content-index-for-coded-ui-test.aspx Please go thorugh the tools added in the list.
Comment posted by Nassim on Monday, January 21, 2013 9:52 AM
Hallo Gouri,

Great post for CUIT.

I have a problem: I can't find the item Coded UI test MAP. Is a template missing with me (VS Ultimate with SP1 and FP2). I added a test project, folder but when I try to add a new ITEm, the Coded UI test Map item does not show up.

Please Gouri I would be thankful for a support from you. I need to create a multiple UIMap but this item is missing.

Thanks in advance
Nassim
Comment posted by Gouri Sohoni on Monday, February 4, 2013 3:39 AM
Hi Nassim,

With the version of VS you are using you should be able to add a new UI Map. Make sure you are adding a new UI Map in the test project. If you still do not get the option, send me the screenshot.
Comment posted by Sreeya on Wednesday, April 17, 2013 7:07 AM
Hi Gouri,

I am new to vsts and the information posted by you is helping me alot.
I have created multiple UIMaps to test functionality (Windows Application).And now i want to data drive it. I have tried adding data source file to UIMap.Designer file but it ran to errors.

Could you please put some light on how to data drive after creating Multiple UIMap files.

Thanking you inadvance,
Sreeya
Comment posted by Gouri Sohoni on Wednesday, April 24, 2013 5:39 AM
Hi Sreeya,

As the article says you should never modify the designer file. For data driven CUIT please go through the articles http://www.dotnetcurry.com/ShowArticle.aspx?ID=798 and http://www.dotnetcurry.com/ShowArticle.aspx?ID=719
Let me know if you still have any queries

Gouri Sohoni
Comment posted by Muthukumar on Friday, March 6, 2015 4:03 AM
Hi Gouri,
I have problem in HTML AREA Tag.In my application recording an BarChart ,but its not click on specific region when playback the test case.
This barchart working on co-ordinate based,this case not properly working all time. See the below HTML Code

Bar chart HTML Code:

<MAP id=map635612137028753826_0 name=map635612137028753826_0>
   <AREA onclick="doGraphDrilldown_CRWViewer__ctl4(event,'Graph1','','360','1204','1','')" shape=rect coords=0,0,734,317></MAP>

<IMG border=0 src="CrystalImageHandler.aspx?dynamicimage=cr_tmp_image_d75541af-10b6-476a-a9fa-cf993a7e8637.png" width=734 height=317 useMap=#map635612137028753826_0>

Kindly advise on this scenario.
Comment posted by Muthukumar on Friday, March 6, 2015 4:09 AM
Hi Gouri,
I have problem in HTML AREA Tag.In my application recording an BarChart ,but its not click on specific region when playback the test case.
This barchart working on co-ordinate based,this case not properly working all time. See the below HTML Code

Bar chart HTML Code:

<MAP id=map635612137028753826_0 name=map635612137028753826_0>
   <AREA onclick="doGraphDrilldown_CRWViewer__ctl4(event,'Graph1','','360','1204','1','')" shape=rect coords=0,0,734,317></MAP>

<IMG border=0 src="CrystalImageHandler.aspx?dynamicimage=cr_tmp_image_d75541af-10b6-476a-a9fa-cf993a7e8637.png" width=734 height=317 useMap=#map635612137028753826_0>

Kindly advise on this scenario.