Greetings

2015-01-29T04:23:00.001-08:00

Hi there everyone.

Many thanks for supporting my blog over there years even though I had only posted two articles.

I do hope that they are still relevant even though Coded UI has changed a bit.

I have noticed in the last couple of weeks that there has been an increase in activity on the blog and I really hope that the contents are useful.

Also please do not click on any ads unless you really are interested in it. It throws off the stats quite a bit.

Other than that, please do have fun and remember if anyone wants to be a guest blogger, please do let me know.

Regards
Tim

Want to be a guest writer on our blog?

2011-08-15T00:31:00.000-07:00

Hi All,

We are looking for guest bloggers to write regular features for our blog.

If you are a subject matter expert and if you have what it takes, then feel free to send us links to any of your published work, or even just a mock article so that we can assess your skills.

If anyone is interested, please inbox me.

Regards

Lefty

Creating our first Coded UI test

2011-07-10T18:02:00.000-07:00

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:

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!

Lefty

What is Coded UI?

2011-07-09T16:54:00.000-07:00

For many years the QA industry has used been dominated by HP, IBM and other software vendors that offered up their solutions to automated testing, and more specifically automated testing of user interfaces.

Now Microsoft has joined in the fray and wants a piece of the valuable candy, a piece of the QA industry. With the introduction of CodedUI as an integrated component of Visual Studio Premium and Ultimate, Microsoft now has the ability to offer a fresh alternative to HP's QuickTest Professional, IBM Rational Functional Tester and other lovely tools.

The anatomy of a CodedUI test is quite simple and can be broken down into the following files:

UIMap.uitest: Contains an XML representation of the UIMap class which includes windows, controls, properties, methods, assertions and actions.

Figure 1: UIMap.uitest

UIMap.designer.vb: The designer contains the code view of the UIMap which is usually generated when a tester records some UI interaction or when objects are manually added to the UIMap.

Figure 2: UIMap.Designer.vb

UIMap.vb: Any customization done to the UIMap are to be stored in this file. If changes are made directly to the UIMap.designer.vb file, those changes will be lost if a recording is done, as the file is regenerated. The screenshot below shows essentially a blank file. We will populate this file in the future parts of the tutorial.

Figure 3: UIMap.vb

CodedUITest1.vb: Contains the actual CodedUI test class, method invocation, and assertion invocation. All methods and assertions are by default invoked from the UIMap.designer.vb file.

Figure 4: CodedUITest1.vb

As you can see, the overall structure of a test is very simple and logically outlined. This makes the initial phases of UI automation fairly quick while offering great flexibility with the ability to write customized code behind the test methods.

Anyways, I hope this serves as a good introduction to CodedUI. The next post in this series will cover creation of CodedUI tests using the CodedUI Test Builder.

Happy testing!

Lefty

Coded UI 101 - Understanding Coded UI Tests

Greetings

Want to be a guest writer on our blog?

Creating our first Coded UI test

What is Coded UI?