Locating Controls Using UI Map Editor for Coded UI Tests

One of the great new features of Visual Studio 2010 and Microsoft Test Manager is the ability to record action recordings and then covert them into automated UI tests called “Coded UI Tests.” The recorded steps turn into a UI Map that is an XML-based file format that is used by Visual Studio to generate source code. Editing the UIMap was pretty tedious before so Microsoft released a new UI Map Editor in the latest feature pack: Visual Studio 2010 Feature Pack 2. Feature Pack 2 is available to active MSDN Subscribers and contains the following additional features;

Cumulative feature pack that extends testing, code visualization and modeling capabilities in Visual Studio 2010.

Testing features:

• Use Microsoft Test Manager to capture and playback action recordings for Silverlight 4 applications.
• Create coded UI tests for Silverlight 4 applications with Visual Studio 2010 Premium or Visual Studio 2010 Ultimate.
• Edit coded UI tests using a graphical editor with Visual Studio 2010 Premium or Visual Studio 2010 Ultimate.
• Use action recordings to fast forward through manual tests that need to support Mozilla Firefox 3.5 and 3.6.
• Run coded UI tests for web applications using Mozilla Firefox 3.5 and 3.6 with Microsoft Visual Studio 2010 Premium or Visual Studio 2010 Ultimate.

Code visualization and modeling features (requires Visual Studio 2010 Ultimate):

• Use the Generate Code command to generate skeleton code from elements on UML class diagrams. You can use the default transformations, or you can write custom transformations to translate UML types into code.
• Create UML class diagrams from existing code.
• Explore the organization and relationships in C, C++, and ASP.NET projects by generating dependency graphs.
• Import elements from UML sequence diagrams, class diagrams, and use case diagrams as XMI 2.1 files that are exported from other modeling tools.
• Create links and view links from work items to model elements.
• Create layer diagrams from C or C++ code and validate dependencies.
• Write code to modify layer diagrams and to validate code against layer diagrams.

Once you get the Feature Pack installed, you will be able to open the UI Map and in a new editor as shown below. It’s great because it allows you to see each of the methods that have been created and allows you to rename, remove, and edit the actions that have been recorded. It even shows you all of the windows, controls, etc. that are included in the UI Map that describe the UI components in your application that are used by the Coded UI Tests. You can also edit the properties for those so that you can maintain the automated tests to continue to work after UI changes are made in the application you are testing.

Some really cool features that I found today was the ability to locate a control on your application and also to verify that the UI Map is still correct by locating all of the controls. First, you can find a specific UI control or element by choosing the “Locate the UI Control” toolbar button after you select the control you are interested.

You’ll want to have the particular application and window running before you do this (so it can find it) but it will put a little blue rectangle around the control as shown below.

Nice! If you want to make sure that all of the UI control or elements on a window are still valid in the UI Map then you can select the window in the UI control’s tree and then choose the “Locate All” toolbar command. You’ll see it go through each of the controls in the window and verify that it can still find it and mark it with a green check mark if it can be found. How about that?

Have fun!

Ed Blankenship