Coded UI 101 - Understanding Coded UI Tests: July 2011

Many of us find that as we spend time with a particular tool, the more comfortable we become with understanding the abilities of that tool. We also tend to look for ways to use those tools efficiently to make our jobs all the more easier.

This tutorial aims to help us become comfortable with CodedUI and will demonstrate how to go about creating a basic CodedUI test based on a simple application that was created for this exercise. For the purpose of this exercise we will create the test using the CodedUI Test Builder. The Test Builder will allow us to record actions, add assertions and even generate code from our interaction with the UI of that application.

During this tutorial we will cover the following areas:

Creating test projects
Adding CodedUI tests to that project
Using the CodedUI Test Builder to drive the interface
Adding assertions to our test
Executing the CodedUI_Demo test

Step 1 - Prepping the test environment

We need to ensure that we have the following pre-requisites deployed onto our test machine. We will be using the CodedUI_Demo application as our Application Under Test and for the purpose of transparency, we have included the source code as part of the download.

Visual Studio 2010 Premium or Ultimate needs to be installed on your test machine
CodedUI_Demo application needs to be downloaded to your machine and extracted to the working directory where we will store our CodedUI tests.

Step 2 - Creating a new Test Project

Creating a Test Project which is separate from the development code base is usually a good idea. This allows us to use our projects a bit more flexibly when we want to execute our CodedUI tests, both as test packs through Visual Studio and also through automated deployments using Lab Manager.

2.1. To create a test project do the following:

Launch Visual Studio 2010
Click File -> New, and select Project from the menu.
Click on Installed Templates, choose the language of your choice (VB.net for this exercise), and click on Test. Select Test Project from the results menu.
Thereafter you need to complete Name of the project which will automatically populate the solution name.
Click the OK button and you will have a brand spanking new Test Project.

Figure 1: Create Test Policy

Step 3 - Adding CodeUI tests to a project

Now that we have our project, we want to start adding lots of lovely tests. We can do this either by adding the CodedUI test directly from the Test drop down menu or we could add it to the project by right-clicking on the project and adding the test there.

3.1. To add a CodedUI test from the Test drop down menu we will need to do the following:

Open test project.
Click Test -> New Test and select CodedUI test.
Input an appropriate Test Name and ensure that the test will be added to the correct project.
Click OK

At this stage we are ready to commence creating our automated test and a code generation form is displayed with two options. A CodedUI test can either be created by recording actions using the CodedUI Test Builder or by using previously created action recordings from Test Manager. There is also another means to create CodedUI tests which will cater to the more technically advanced individuals. We will discuss this later on in the series.

Using the recording options above offers us two different ways to create automated tests. Each has its advantages and disadvantages but they in essence provide us with the ability to create detailed automated tests.

After adding the CodedUI test structure to the project, a code generation form is displayed which asks the user to choose an appropriate generation technique, which we will discuss in the next step.

Step 4 - Using the CodedUI Test Builder to drive the user interface.

As mentioned in the step above we have the two main options with which to create a CodedUI test. For this example we will use the following option "Record Actions, edit UI Map or add assertions". This option will give us quite a lot of control over what we want to record and how we create methods and assertions.

4.1. We will be creating a test using the CodedUI Demo application which was mentioned in Step 1 and test methods will be generated for the following actions:

Launch CodedUI_Demo.
Input a First Name.
Input a Surname.
Input an Age.
Click on Submit to concatenate all strings and output to a control.
Verify that the concatenated string is displayed.
Close CodedUI_Demo

4.2. We will now begin recording the actions mentioned above.

Select "Recorded Actions, edit UIMap or add assertions" and click OK.
A small floating toolbar is displayed at the bottom right hand corner of the screen. This is the Test Builder. Click on the Record button.
Go to Start ->Search bar -> {path of CodedUI_Demo} and launch the test application.
Click on Generate Code button. Enter "LaunchApplication" as the method name and click on Generate.
Enter a First Name into the First Name text box and click on Generate Code. Name this method "InputFirstName".
Enter a Surname into the Surname text box and click on Generate Code. Name this method "InputSurname".
Enter an Age into the Age text box and click on Generate Code. Name this method "InputAge".
Click on the Submit button. The concatenated output is displayed on the disable text box. Click Generate Code and name this method "ClickSubmit"

At this point out CodedUI_Demo app should look something like this after all the data has been entered and submitted.

Step 5 - Adding Assertions to our test

Next we need to add the assertion on the disable text box, which is essentially a verification point for this test.
Click the Cross hair on Test Builder and drag it onto the text box. It should look like this with a blue boxy highlight around the selected control.

Click Generate Code and name the assertion "VerifyIfOutputIsDisplayed". Click on Generate thereafter.
Finally we should close the application. All we have to do at this stage is click the Close button on the demo application and Click Generate Code. Name this method "CloseApplication". Click on Generate and close the Test Builder.

After we close the Test Builder, the CodedUITest1.vb file is displayed along with all the generated method invocations within a Test Method, which is within a Test Class. This is what the test looks like at this stage. Note the references that are automatically added to the test as well as the comments in green which I added to neaten up the test a bit.

A UIMap.uitest file was also created during the recording phase which stores a XML representation of the Window/control/property hierarchy. Visual Studio 2010 Feature Pack 2 allows us to view the UIMap.uitest as a tree structure. This is especially handy if the UIMap becomes quite expansive, although we can have multiple UIMaps - More on that later on in the series.

Step 6 - Executing the CodedUI_Demo test

Now that we have completed the recordings and have added assertions to the test, it is now ready for execution.

To execute the test, Click Test -> Run -> Tests in Current Context or use the hot keys (Ctrl + R,T).

The test will begin execution and execute all the methods, keeping a record of the execution. After the test run has completed, the results can be viewed and will look like this: