Tutorial – Coded UI Test [Beta2]

Overview

This tutorial guides you through the creation of a Coded UI Test in Visual Studio 2010.

Steps

1. In Visual Studio 2010, click on Test menu and choose New Test

image

2. In 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.

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

image

4. In the Generate Code for Coded UI Test dialog, choose Record actions, edit UI Map or add assertions

image

5. The Coded UI Test Builder will start up.

image

6. Click on Start Recording button to start the recorder.

Note: There is a slight delay when the recorder starts. Ensure that the button changes to the Pause Recording before recording test steps.

image

7. Now perform the desired test steps.

For the purposes of this tutorial, we are going to test the Add function in Calculator.

NOTE: Coded UI Test works on Web (IE 7 & 8), WinForms & WPF apps. I am choosing Calculator as an application which anyone who is evaluating has access to.

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 Recorded Actions window.The Recorded Actions window can be pinned if you want to see the actions being recorded. It will become semi-transparent when you move focus away from it.

image

8. Click on the Generate Code button and change the name of the method to TestAdd.

image

Click on the Add and Generate button to add this method to the project.

9. Now drag the cross-hair and drop it on result field in the calculator. A blue rectangle is drawn around the selected control.

image

10. Properties of the selected control are shown in the Coded UI Test Builder Window. Right click on the Display Text field and choose Add Assertion.

image

11. In the Add assertion for DisplayText dialog, click OK.

image

12. Click on the Generate Code Button and change the Method Name to AssertSum.

image

Click on the Add and Generate button to add this method to the project.

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

17. The Coded UI Test 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, the methods we created are invoked.

 

18. Note the following in the Solution Explorer.

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

b. 5 files are added to the Test Project

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

ii. UIMap.uitest – XML Representation of the UI Map (a container of UI Controls) and the recorded actions.

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

iv. UIMap.cs – empty file where UIMap customizations may be added.

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

image

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

image

20. The code is compiled and then the test is run.

21. All actions recorded earlier will now be played back.

22. After the test run is completed, right-click on the Test Run and choose View Test Results Details.

image

image

Congratulations. You have successfully created and run a Coded UI Test.