Walkthrough: Creating, Editing and Maintaining a Coded UI Test for Silverlight Application

Article
11/07/2011

Using Microsoft Microsoft Visual Studio 2010 Feature Pack 2, you can create coded UI tests or action recordings for Silverlight 4 applications. Action recordings let you fast forward through steps in a manual test. For more information about action recordings or coded UI tests, see How to: Create an Action Recording or How to: Create a Coded UI Test.

In this walkthrough, you will learn the procedures that are required to test a Silverlight control in a Silverlight based application. The walkthrough takes you through the following procedures:

Prepare for the Walkthrough Verify that you have the Silverlight developer runtime installed and create a simple Silverlight application that uses a Silverlight grid control on which to perform coded UI tests. You will follow the steps in Walkthrough: Creating a RIA Services Solution.
Add Microsoft.VisualStudio.TestTools.UITest.Extension.SilverlightUIAutomationHelper.dll to your Silverlight project.
Create a Coded UI Test Create a coded UI test on the Silverlight application.
Run Coded UI Test Verify that the coded UI test functions correctly on the Silverlight application.

Prerequisites

For this walkthrough you will need:

Visual Studio 2010 Ultimate, Visual Studio 2010 Premium or Test Professional 2010.
Silverlight Developer 4 for Developers.
Complete the procedures in Walkthrough: Creating a RIA Services Solution.

Prepare for the Walkthrough

To prepare the walkthrough

Verify that you have the Silverlight 4 developer runtime available at Silverlight Developer 4 for Developers.
Verify that you have completed the procedures in Walkthrough: Creating a RIA Services Solution.

The result will be a simple Silverlight application that uses a Silverlight grid control. Later, you will use the grid control in this walkthrough and perform coded UI tests on it.

Tip

For more information about supported and unsupported Silverlight controls, see How to: Set Up Your Silverlight Application for Testing.

Note

The Walkthrough: Creating a RIA Services Solution will install WCF RIA Services for Visual Studio 2010 and AdventureWorksLT sample database.
With the RIAServicesExample you created in Walkthrough: Creating a RIA Services Solution running, copy the address of the Web application to the clipboard or a notepad file. For example, the address might resemble this: https://localhost: <port number>/RIAServicesExampleTestPage.aspx.

Add the SilverlightUIAutomationHelper.dll to Your Silverlight 4 Project

To test your Silverlight applications, you must add Microsoft.VisualStudio.TestTools.UITest.Extension.SilverlightUIAutomationHelper.dll as a reference to your Silverlight 4 application so that the Silverlight controls can be identified. This helper assembly instruments your Silverlight application to enable the information about a control to be available to the Silverlight plugin API that you use in your coded UI test or is used for an action recording.This assembly cannot be redistributed. Therefore, you must add this reference conditionally when you want to build the application. By taking this approach the assembly is not redistributed when you deploy your software to a customer.

To add the SilverlightUIAutomationHelper.dll

For each Silverlight project in your solution that you want to test, you must add the SilverlightUIAutomationHelper.dll. In Solution Explorer, right-click the RIAServicesExample project, select Unload Project.

The project is displayed in Solution Explorer as RIAServicesExample (unavailable).
Right-click the project again and then click Edit RIAServicesExample.csproj.

The RIAServicesExample.csproj file is opened in the Code Editor. You will see <PropertyGroup> nodes followed by <ItemGroup> nodes. You must make the following two modifications:
1. To set the production condition, add the following entry to the first <PropertyGroup> node:
```
<Production Condition="'$(Production)'==''">False</Production>
```
2. To add the DLL when the build is not a production build, insert the following <Choose> node after the <PropertyGroup> nodes, but before the <ItemGroup> nodes:
```
<Choose>
   <When Condition=" '$(Production)'=='False' ">
         <ItemGroup>
           <Reference Include="Microsoft.VisualStudio.TestTools.UITest.Extension.SilverlightUIAutomationHelper">
           </Reference>
         </ItemGroup>
       </When>
 </Choose>
```
To save the file, click Save.
To reload these changes, right-click the server project and then click Reload Project

Warning

If you have multiple Silverlight projects that you want to test, you must follow these steps for each project.

Important

To remove the SilverlightUIAutomationHelper.dll so that it is not redistributed with your production code, set the production condition value to true in the first <PropertyGroup> node. In in this manner, the DLL is no longer added as a reference by the Choose node that you added to the project in the previous procedure. You can also set an environment variable named Production to the value True. Then you can use msbuild to build the Silverlight project and remove the SilverlightUIAutomationHelper.dll.

Create a Coded UI Test for RIAServicesExample Silverlight Application

To Create a Coded UI Test

In Solution Explorer, right-click the solution, click Add and then select New Project.

The Add New Project dialog box appears.
In the Installed Templates pane, expand either Visual C# or Visual Basic, and then select Test.
In the middle pane, select the Test Project template.
Click OK.

In Solution Explorer, the new test project named TestProject1 is added to your solution. Either the UnitTest1.cs or UnitTest1.vb file appears in the Code Editor. You can close the UnitTest1 file because it is not used in this walkthrough.
In Solution Explorer, right-click TestProject1, click Add and then select Coded UI test.

The Generate Code for Coded UI Test dialog box appears.
Select the Record actions, edit UI map or add assertions option and then click OK.

The UIMap – Coded UI Test Builder appears.

For more information about the options in the dialog box, see How to: Create a Coded UI Test.
Click Start Recording on the UIMap – Coded UI Test Builder. In several seconds, the Coded UI Test Builder will be ready.
Launch Internet Explorer.
In Internet Explorer’s address bar, enter the address of the Web application that you copied in a previous procedure. For example:

https://localhost: <port number>/RIAServicesExampleTestPage.aspx
Click one or two of the column headers to sort the data.
Close Internet Explorer.
On the UIMap - Coded UI Test Builder, click Generate Code.
In the Method Name type SimpleSilverlightAppTest and then click Add and Generate. In several seconds, the Coded UI test appears and is added to the Solution.
Close the UIMap – Coded UI Test Builder.

The CodedUITest1.cs file appears in the Code Editor.

Note

You can assign a unique automation property based on the type of Silverlight control in your application. For more information, see Set a Unique Automation Property for Silverlight Controls for Testing.

Run the Coded UI Test on the RIAServicesExample Silverlight Application

To run the coded UI test

On the Test menu, select Windows and then click Test View.In Test View, select CodedUITestMethod1 under the Test Name column and then click Run Selection in the toolbar.

The coded UI test should successfully run using the Silverlight data grid control.

Share via

Walkthrough: Creating, Editing and Maintaining a Coded UI Test for Silverlight Application

Prerequisites

Prepare for the Walkthrough

To prepare the walkthrough

Add the SilverlightUIAutomationHelper.dll to Your Silverlight 4 Project

To add the SilverlightUIAutomationHelper.dll

Create a Coded UI Test for RIAServicesExample Silverlight Application

To Create a Coded UI Test

Run the Coded UI Test on the RIAServicesExample Silverlight Application

To run the coded UI test

See Also

Tasks

Reference

Concepts

Other Resources

Additional resources