Editing Coded UI Tests Using the Coded UI Test Editor
The Coded UI Test Editor lets you easily modify your coded UI tests. Using the Coded UI Test Editor, you can locate, view, and edit the properties of your test methods and UI actions. In addition, you can use the UI control map to view and edit their corresponding controls.
Visual Studio Ultimate, Visual Studio Premium
Using the Coded UI Test Editor is quicker and more efficient than editing the code in your coded UI test methods using the Code Editor. With the Coded UI Test Editor, you can use the toolbar and shortcut menus to quickly locate and modify property values associated with UI actions and controls. For example, you can use the Coded UI Test Editor’s toolbar to perform the following commands:
Find helps you locate UI actions and controls.
Delete removes unwanted UI actions.
Rename changes the names for test methods and controls.
Properties opens the Properties Window for selected item.
Split into a new method lets you modularize the UI actions.
Move Code adds custom code to your test methods.
Insert Delay Before adds a pause prior to a UI action, specified in milliseconds.
Locate the UI Control identifies the location of the control in the UI of application under test.
Locate All helps you verify control property and significant changes to the application’s controls.
In Visual Studio 2012, opening the UIMap.uitest file affiliated with your coded UI test in your coded UI test project will automatically display the coded UI test in the Coded UI Test Editor. The following procedures describe how you can then locate and edit your test methods, and properties for the UI actions, and controls using the editor’s toolbar and shortcut menus.
You can view and edit your Visual C# and Visual Basic-based coded UI test using the Coded UI Test Editor.
In Solution Explorer, open the shortcut menu for UIMap.uitest and choose Open. The coded UI test is displayed in the Coded UI Test Editor. You can now view and edit the recorded methods, actions, and corresponding controls in the coded UI test.
When you select a UI action that is located in a method in the UI Actions pane, the corresponding control is highlighted. You can also modify the UI action or the controls properties.
Using the Coded UI Test Editor, you can quickly locate and view all the UI actions in your test methods. When you select the UI action in the editor, the corresponding control is automatically highlighted. Likewise, if you select a control, the associated UI actions are highlighted. When you select either a UI action or a control, it is then easy to use the Properties window to modify the properties that correspond with it.
To modify the properties for a UI action, in the UI Action pane, expand the test method that contains a UI action that you want to edit the properties for, select the UI action, and then modify the properties using the Properties window.
For example, if a server is unavailable, and you have a UI action associated with your Web browser that states Go to Web page ‘http://Contoso1/default.aspx’, you could change the URL to ‘http://Contoso2/default.aspx’.
Modifying the properties for a control is done in the same way as the UI actions. In the UI Control Map pane, select the control that you want to edit and modify its properties using the Properties window.
For example, a developer might have changed the (ID) property on a button control in the source code for the application being tested from “idSubmit” to “idLogin.” With the (ID) property changed in the application, the coded UI test will not be able to locate the button control and will fail. In this case, the tester can open the Search Properties collection and change the Id property to match the new value that the developer used in the application. The tester could also change the Friendly Name property value from “Submit” to “Login.” By making this change, the associated UI action in the Coded UI Test Editor is updated from “Choose ‘Submit’ button” to “Choose ‘Login’ button.”
After completing your modifications, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.
You can split a test method to refine or to modularize the UI actions. For example, your test might have a single test method with UI actions in two container controls. The UI actions might be better modularized in two methods that correspond with one container.
In the UI Action pane, expand the test method that you want to split into two separate methods and select the UI action where you want the new test method to begin. Either open the shortcut menu for the UI action and then choose Split into a new method, or choose the Split into a new method button on the Coded UI Test Editor toolbar. The new test method appears in the UI Actions pane. It contains the UI actions starting from the action where you specified the split.
After you are done splitting the method, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.
If you determine that one of your test methods in your coded UI test requires custom code, you must move it into either the UIMap.cs or UIMap.vb file. Otherwise, your code will be overwritten whenever the coded UI test is recompiled. If you do not move the method, your custom code will be overwritten each time the test is recompiled.
In the UI Action pane, select the test method that you want to move to the UIMap.cs or UIMap.vb file to facilitate custom code functionality that won’t be overwritten when the test code is recompiled. Next, choose the Move Code button on the Coded UI Test Editor toolbar, or open the shortcut menu for the test method and choose Move Code. The test method is removed from the UIMap.uitest file and no longer is displayed in the UI Actions pane. To edit the test file that you moved, open the UIMap.cs or the UIMap.vb file from Solution Explorer.
After you are done moving the method, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.
Sometimes, it can be difficult to visualize where controls are located in the UI of the application under test. One of the capabilities of the coded UI Test Editor is that you can select a control listed in the UI control map and view its location in the application under test. Using the Locate the UI Control feature on the application under test can also be used to verify search property modifications you have made to a control.
In the UI Control Map pane, select the control that you want to locate in the application associated with the test. Next, open the shortcut menu for the control and then choose Locate the UI Control. In the application that is being tested, the control is designated with a blue border.
You can verify that all the controls under a container can be correctly located in the UI of the application under test. This can be helpful in verifying search property changes you may have made on the container. Additionally, if there have been significant changes in the UI of the application under test, you can validate that the existing control search properties are still correct.
In the UI Control Map pane, select the container control that you want to locate and view all the descendants for. Next, open the shortcut menu for the control and choose Locate All. The container control, and all its descendant controls, are marked in the Coded UI Test Editor with either a green check mark or a red ‘X’. These marks let you know if the controls were successfully located in the application under test.
Sometimes, you might want to make the test wait for certain events to occur, such as a window to appear, the progress bar to disappear, and so on. Using the Coded UI Test Editor, you can accomplish this by inserting a delay before a UI action. You can specify how many seconds you want the delay to be.
In the UI Action pane, expand the test method that contains the UI action that you want to insert a delay before. Select the UI action. Next, open the shortcut menu for the UI action and choose Insert Delay Before. A delay is inserted and highlighted before the selected UI action with the following text: Wait for 1 seconds for user delay between actions. In the Properties window, change the value for the Delay property to the desired number of milliseconds.
After you are done inserting the delay, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.