Microsoft® Visual Studio® Team System 2010 introduces a new Test Template named "Coded UI Test".  You can verify the functionality of user interfaces with Coded UI Test. You can create a  Coded UI Test  by recording actions and generating code. You can also add assertions on properties of controls.

 

In this article, I will describe the steps to create a Coded UI Test, run it and view the results. I will also briefly describe the structure of a Coded UI Test Project.

 

Create a Coded UI Test Project

In Visual Studio Team System 2010, click on Test menu and choose New Test

image

This brings up the Add New Test Dialog. Choose Coded UI Test and click OK.

image

NOTE:- You can choose to create a Visual C# test project or a Visual Basic test project.

In the New Test Project dialog, change the Test Project name and click Create.

image

This creates a Coded UI Test Project and adds the required references. In addition it also creates blank Coded UI Test files which can now be populated with the test code.

 

In the Coded UI Test dialog, choose Use the Recorder. Other options are available on the screen to create a Coded UI Test from an action recording created in Microsoft Test and Lab Manager or Use the UI Control locator to add User interface controls to a UI Control map and then write code against them.

image

 

Record Actions and Generate Code

In the previous step, you have created a Coded UI Test Project and chose to use the recorder to generate code. This will start the  Coded UI Test Builder.

image

Click on Record Actions button to bring up the recorder.

image

Now perform the desired test steps. The Recorder window will become semi-transparent when you move focus away from it.

For this article, we are going to test the Add function in Calculator

The Test steps are

a. Launch Calculator

b. Click 7

c. Click the + sign

d. Click 2

e. Click = button

Note that a text description of actions will be shown in the recorder window.

image

Change the Method Name to TestAdd and click Generate Method.

Recorder dialog is closed and Coded UI Test Builder dialog opens up. The name of the generated method is shown.

image

Status bar will show messages from the last action performed.

 

Add Assertions to the Coded UI Test

In the previous steps, you have recorded actions and generated code. Now you can add assertions to validate controls on the user interface.

Click on the Add Assertions tab.

image

Click on the UI Control Locator button to launch the locator and add UI controls to the UI Control Map. You can then add validations on these controls.

image

Drag the crosshair over the calculator edit box and drop it when the edit box is highlighted in blue.

image

The Control Type and the name of the selected UI Control will be shown in the UI Control Locator dialog.

image

Click on Add Control to add it to the UI Control Map. Click on Show Properties button to show the properties of this control and add assertions.

image

In the UI Control Properties list, click on the Checkbox next to Text and click OK.

Now we have added an assertion that the result of the operation is equal to 9.

The UI Control Properties overlay is closed and the Coded UI Test Builder dialog comes up.

Click on the Save button to save the UI map and assertions.

image

Close the Coded UI Test Builder dialog by clicking on the X button.

Structure of a Coded UI Test Project

In the previous steps, you have created a coded ui test by recording actions and added assertions. The Coded UI Test file is now opened within the Visual Studio IDE.

image

NOTE the following characteristics about the generated code.

a. The CodedUITest1 class is tagged with a Coded UI Test attribute.

b. The CodedUITetMethod1 method is tagged with a Test Method attribute.

c. In the CodedUITestMethod1, there is an invokation of the TestAdd method we created from Coded UI Test Builder.

d. Also in the CodedUITestMethod1, we have the code for the assertion we added with the UI Control Locator.

 

Note the following in the Solution Explorer.

a. All required references for Coded UI Test are added automatically.

b. 4 files are added to the Test Project

i. CodedUITest1.cs - main Coded UI Test class, Test Methods and Assertions.

ii. RecordedMethods.cs - code for actions performed while recording

iii. UIMap.uitest - Representation of the UI Map (a container of UI Controls)

1. UIMap.Designer.cs - Code generated for the UIMap

iv. UserControls.cs - Specialized classes representing various UI Controls referenced in the Test.

 

image

Run Coded UI Test

Right-click inside the Coded UI Test Method and choose Run Tests

clip_image034

The code is compiled and then the test is run.

image

All actions recorded earlier will now be played back.

image

After the test run is completed, choose the Test Run and view Test Results from the context menu.

image

 

Summary

In this article, you saw how to

  • Create a Coded UI Test
  • Record actions and generate Code
  • Locate Controls and add assertions
  • Run the Coded UI Test

You were also introduced to the structure of a Coded UI Test.

Additional information is available on MSDN.

Try out these features in Beta1 and send us your feedback.

 

Mathew Aniyan – I am a Program Manager in Visual Studio Team System – Test Edition and focus on Coded UI Test and the Functional Testing Automation API. I work out of Hyderabad in India.