Coded UI Test Basic Walkthrough

1.       Open Visual Studio 2010 and create a new Test Project.

 
2.       Add a new CodedUI Test and click on OK button.

 
A new window gets opened for selecting how do you want to create your coded UI test.

• “Record actions edit UI map or add assertions” option allows you to do the recording on your application      and then generates code for the recording. 
• “Use an existing action recording” allows the code generation for already recorded action. 

3. Select the first option “Record actions edit UI map or add assertions”. It will open the Coded UI Test builder for creating the recording.

Click on the left most red button for recording, the icon will change to pause/stop button as shown below.

 
4. Perform all the operations on your application which you want to record. As a sample I am recording the steps of searching for Visual Studio 2010 in Bing web site. 

•  Open  Internet Explorer (Start -> Run ->Enter -> Type iExplore in the Run text box ->Click OK} and type www.Bing.com in address bar and press enter button. 
                                               
•  Type Visual Studio 2010 in the Search textbox and click on Search button. 
              
• See the results and fnally close the Internet Explorer. 
  

                                                   
 
5. Once you are done with recording, press stop button (left most). 

           

  
  And then click on Generate code button (right most). 
  
            
Provide appropriate name for the generated method and click on Add and Generate button.
 
6. If you want to add some assertion on some control’s property or you want to rename the objects, click on   the cross hair (second last button) present just left to Generate code button. 
         
 
It will show the object hierarchy in the left pane as below and the properties of the selected object in right pane. 
         

You can click on Add Assertion button to create an assertion for the selected control’s selected property.
See below the list of possible assertions: 

      

Create the assertion and again click on Generate Code button which will pop up a window to provide the Method Name, give appropriate name and generate the code for the created assertion. 

  
 
  
  
  7.       Now open the UIMap.Designer.cs file and see the code generated by Coded UI for you. 
   

/// <summary>

/// RecordedMethod3 - Use 'RecordedMethod3Params' to pass 
parameters into this method.

/// </summary>

public void RecordedMethod1()

{
#region Variable Declarations

HtmlEdit uIEnteryoursearchtermEdit = this.UIExercise3DataDrivenDWindow.UIBingDocument.UIEnteryoursearchtermEdit;

HtmlDiv uIItemPane = this.UIExercise3DataDrivenDWindow.UIBingDocument.UISb_formCustom.UIItemPane;

HtmlInputButton uISearchButton = this.UIExercise3DataDrivenDWindow.UIBingDocument.UISearchButton;

WinButton uICloseButton = this.UIExercise3DataDrivenDWindow.UIVisualstudio2010BingTitleBar.UICloseButton;

#endregion
// Go to web page 
'http://www.bing.com/' using new browser instance

this.UIExercise3DataDrivenDWindow.LaunchUrl(new System.Uri(this.RecordedMethod3Params.UIExercise3DataDrivenDWindowUrl));

// Set flag to 
allow play back to continue if non-essential actions fail. (For example, if a 
mouse hover action fails.)

Playback.PlaybackSettings.ContinueOnError = true;

// Mouse hover 
'Enter your search term' text box at (213, 5)

Mouse.Hover(uIEnteryoursearchtermEdit, new Point(213, 5));

// Reset flag to 
ensure that play back stops if there is an error.

Playback.PlaybackSettings.ContinueOnError = false;

// Click 'Unknown 
Name' pane

Mouse.Click(uIItemPane, new Point(151, 34));

// Type 'visual 
studio 2010' in 'Unknown Name' pane

Keyboard.SendKeys(uIItemPane, this.RecordedMethod3Params.UIItemPaneSendKeys, ModifierKeys.None);

// Type 'visual 
studio2010' in 'Enter your search term' text box

uIEnteryoursearchtermEdit.Text = this.RecordedMethod3Params.UIEnteryoursearchtermEditText;

// Click 'Search' 
button

Mouse.Click(uISearchButton, new Point(21, 20));

// Click 'Close' 
button

Mouse.Click(uICloseButton, new Point(18, 8));

}

8. See the code generated by Coded UI in “CodedUITestMethod1”

[TestMethod]

public void CodedUITestMethod1()

{

this.UIMap.RecordedMethod1();

// To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.

// For more information on generated code, see http://go.microsoft.com/fwlink/?LinkId=179463

}

Open the Test List Editor (Test -> Windows ->Test list Editor) and run the ‘CodedUITestMethod1” present in CodedUITest.cs file.



  
  
 

Coded UI File Structure

Coded UI maintains a specific file structure as follows:

·         CodedUITest.cs  file

·         UIMap.uitest file

·         UIMap.Designer.cs file

·         UIMap.cs file

 

CodedUITest.cs file: 
CodedUITest.cs file is a unit test file having TestClass decorated with [CodedUITest] attribute and contains multiple methods decorated with [TestMethod] attribute.

UIMap.uitest file:
UIMap.uitest is an xml file containing all the windows, controls, properties, methods, actions and assertions etc used for playback.

UIMap.Designer.cs file:
UIMap.Designer.cs file is a partial class which contains the classes for various controls and their fields, properties and methods.

UIMap.cs file:
UIMap.cs is also a partial class of UIMap.Designer.cs. It can contain all the recorded methods which need customization. 
 

Conclusion

Coded UI provides an easy to use graphical way to write the test automation. User can also write his own custom code leveraging all .Net features instead of going with coded ui generated code. We will discuss about working with custom code in my next article.