Exercise 2: Introduction to Code Generation using Coded UI Test Builder

In this exercise, you will learn how to use the Coded UI Test Builder to generate test code for the Tailspin Toys Web application and modify the generated code in order to enable data driven testing.

1. Open Internet Explorer and click on the Tailspin Toys button from the favorites bar.

   Figure 11

   Tailspin Toys link

2. Select the Model Airplanes link.
3. Select the Fourth Coffee Flyer link.
4. Select the Add To Cart link to load the shopping cart.

5. Return to Visual Studio, locate the CodedUITestMethod1 method in the CodedUITest1.cs file, and add a blank line after the call to the “this.UIMap.Clickonwhitespaceinwebsite” method.

   Figure 12

   Adding blank line to test source

6. Right-click at the location of the blank line and select Generate Code for Coded UI Test | Use Coded UI Test Builder… from the context menu. This will load the Coded UI Test Builder window (which is always displayed over other windows) and the Internet Explorer instance that we previously left open.

   Figure 13

   Starting the Coded UI Test Builder

   Note:

   The Coded UI Test Builder is used to record actions and assertions within the user interface which are then converted to code.

7. Now we will add an assertion to verify that the Quantity textbox is equal to 1. Drag and drop the crosshair from the Coded UI Test Builder tool window onto the Quantity textbox in Internet Explorer. This action will load a window showing the control properties.

   Figure 14

   Selecting an element to use for assertion

8. Select the Text property and click the Add Assertion button. This will load a dialog to finalize the assertion options to use.

9. Verify that the Comparator to use is AreEqual and that the comparison value is ‘1’. Select the OK button to continue.

   Figure 15

   Selecting the comparator type and value

10. Verify that a checkbox has been added to the Text property row in the Coded UI Test Builder window.

    Figure 16

    Text property showing assertion checkbox

11. Click on the Generate Code button in the Coded UI Test Builder tool window.

    Figure 17

    Generate Code button location

12. In the Generate Code window, use QuantityEqualsOne for the Method Name and select the Add and Generate button to generate the validation code.

    Figure 18

    Generating assertion code

13. Remove the “Fourth Coffee Flyer” item from the shopping cart.
14. Close the Coded UI Test Builder.
15. Close the Internet Explorer window and return to Visual Studio.

16. Note that the assertion code generation has added the new validation step.

    Figure 19

    Newly created assertion step for coded UI test

17. Right-click and select Run Tests to run the tests with the new validation steps.

Next Step

Exercise 3: Data Driven Demonstration for Coded UI Test