Sunday, 10 July 2011

Creating our first Coded UI test

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 ( 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: 

Congratulations, you have now created your first CodedUI test :) I hope that you have found the experience fun, informative and just plain simple.

My next post in the series will cover UIMap customisation and writing additional code to make our tests more maintainable.

Happy Testing!


  1. Hi! I would like to know if there is a way to record an script oriented to objects instead coordinates. Thanks!

  2. Hi Patty,

    Yes it would depend on the application that you are attempting to record against.

    You will be able to define objects and add specific search properties to those objects, after which you will be able to manipulate them more easily than using the standard recording functionality of VS.


  3. Great posts, but I was hoping you'd write the UIMap customization blog, that is what I'm currently stuck on. Manually modifying UIMap.Designer.vb is definitely not the way to go (as you mentioned).

  4. Hi Jehrin,

    Thanks for the feedback. I will write a follow up post in the coming days around customisation of Uiimaps and assertions.

    Is there any specific you would like to see in further posts? I would be happy to offer some guidance where possible,

    Do you have Feature Pack 2 installed for VS2010?

  5. I just installed Feature Pack 2, it is a big help. I now understand that I need to move my methods which are automatically generated in UIMap.Designer.vb to UIMap.vb in order to modify them.

    However, this is where I'm having a problem: I have a drop down menu and I want to verify that certain menu items are disabled and others are not. I use the Coded UI Test Builder with the cross hair tool to select the menu, but I can't navigate down and select each individual menu item.

    Any help is appreciated, thanks!

  6. Great, feature pack 2 certainly minimises some of the frustration around UIMap customisation.

    Okay anyways the solution below is what you could do to verify if a dropdown list item exists and is either disabled or enabled.

    One would have to call the function below and write an assertion to report on the result if the idea is to data drive this test.

    Public Function checkDropdownItemEnabled(ByRef cboTemp As HtmlControls.HtmlComboBox, ByRef val As String, ByRef enabled As Boolean)

    Dim result As Boolean
    Dim combo As HtmlControls.HtmlComboBox

    combo = cboTemp

    For Each c As HtmlControls.HtmlListItem In combo.GetChildren.OfType(Of HtmlListItem)()

    If c.DisplayText = val Then
    If (c.Enabled = enabled) Then
    result = True
    End If
    End If

    Return result
    End Function

    Please note that the above function is for a web app written in VB.Net, but one could easily hack it into the language of choice.

  7. Hi,
    I am trying to automate WPF application(wpf with 3rd party devexpress) using coded ui(VS 2012) in my local machine (windows server 2008 R2).

    I am facing issues while identifying controls under dynamically generating content of the window.Tried different hierarchical levels to hit the control,But still not able to hit the control.

    Till some level I am getting the handle,but after I am not getting the handle.

    Application is huge hierarchically structured application with windows and wpf application.

    Tried coded UI record and play feature to generate the UI Map. Used same structure to identify the controls.It worked while debugging line by line code but its failing while running.

    e.g. Below is the one hierarchy,

    LayoutPanel --> Till this level I am able to get the handle and late I am not able to hit the control
    ........(all tiles)

    This issue is not only with one page,I am getting for all pages.So this is blocking our automation.

    Please any one help me on this.


Note: only a member of this blog may post a comment.