How to: Generate a Coded UI Test by Recording the Application Under Test

Article
02/04/2013

Recording the user interface elements is an efficient way to create coded UI tests.

Generate a Coded UI Test by Recording the Application Under Test

To generate a coded UI test by recording the application under test

In Solution Explorer, right-click a test project, point to Add, and then click Coded UI Test.

- or -

In the Test View window, right-click the surface of the window and then click New Test. In the Add New Test dialog box, click Coded UI Test and then click OK.

- or -

On the Test menu, click New Test. In the Add New Test dialog box, click Coded UI Test and then click OK.

The New Test Project dialog box appears.
Type a name for the new coded UI test and click Create.
Click Record actions, edit UI map or add assertions.

The Coded UI Test Builder dialog box appears.
To start recording, click the Record icon. Perform the actions that you want to record in your application including starting the application if required.

Note

By installing Microsoft Visual Studio 2010 Feature Pack 2, you can use Windows Internet Explorer 7 (or later versions) to record UI actions on a website or a Web-based application and then play back the tests using the Mozilla Firefox browser version 3.5 or 3.6. To download the feature pack, you must have either Visual Studio 2010 Ultimate, Visual Studio 2010 Premium or Test Professional 2010 with an MSDN subscription, Microsoft BizSpark, or MSDN Academic Alliance. For more information, see Recording Tests Using Windows Internet Explorer and Playing Back Using Mozilla Firefox and Microsoft Visual Studio 2010 Feature Pack 2.
To view the actions, click the Show Recorded Steps icon

The actions are displayed in the Coded UI Test Builder - Recorded Actions dialog box.

Note

If you do not want to record the actions to start your application under test, you must start your application before you click the Record icon.

To finish recording, click the Generate Code icon. Type a name for your coded UI test method in Method Name, and then click Add and Generate.

This generates code as follows if the name that you entered is, for example, AddTwoNumbers:

Adds the controls and to your UI map (UIMap.uitest)

Adds a method called AddTwoNumbers to your UI map. You can view the method in the UIMap.Designer.cs file. This method performs the actions that you recorded when you run the test.

public void AddTwoNumbers()
{
    #region Variable Declarations
    WinEdit textInput1Edit = 
        this.DemoCalculatorWindowWindow.InputNumber2Window.TextInput1Edit;
    WinEdit textInput2Edit = 
        this.DemoCalculatorWindowWindow.TextInput2Window.TextInput2Edit;
    WinButton addButton = 
        this.DemoCalculatorWindowWindow.AddWindow.AddButton;
    #endregion

    // Launch '%USERPROFILE%\Desktop\SimpleWinformsCalculator.exe'
    ApplicationUnderTest demoCalculatorWindowWindow = 
        ApplicationUnderTest.Launch(
            this.AddTwoNumbersParams.DemoCalculatorWindowWindowExePath,
            this.AddTwoNumbersParams.DemoCalculatorWindowWindowAlternateExePath);

    // Type '3' in 'textInput1' text box
    textInput1Edit.Text = 
        this.AddTwoNumbersParams.TextInput1EditText;

    // Type '4' in 'textInput2' text box
    textInput2Edit.Text = 
        this.AddTwoNumbersParams.TextInput2EditText;

    // Click 'Add' button
    Mouse.Click(addButton, new Point(83, 18));
}

Adds a test method to your coded UI test file that calls your AddTwoNumbers method

      [TestMethod]
      public void CodedUITestMethod1()
      {
          // To generate code for this test, select "Generate Code" 
          // from the shortcut menu and select one of the menu items.
          this.UIMap.AddTwoNumbers();
      }

When you choose a name for the recorded method, choose a name that is descriptive for the actions that you recorded.

If the actions that you recorded were not what you want to keep, you can click the Show Recorded Steps icon. Select the actions that you do not want to keep and click the Delete icon.
To generate assertions for your UI controls, click the crosshairs icon and drag it to the control that you want to verify is correct.

The Coded UI Test Builder - Add Assertions dialog box is displayed.
Click the vertical bar to view the UI map.

The UI control that you want to verify should be highlighted.
Right-click the property for the UI control that you want to verify, and then point to Add Assertion.

The Add assertion dialog box is displayed.
Select the Comparator for your assertion.
Type the value for your assertion in Comparison Value.
To add the assertion, click OK.
When you have added all your assertions for your test, close the Coded UI Test Builder - Add Assertions dialog box.
To generate the code for your assertions, click the Generate Code icon.

The Coded UI Test Builder - Generate Code dialog box is displayed.

Type a name for your coded UI test method in Method Name, and then click Add and Generate.

This generates code as follows if the name you entered is, for example, AssertForAddTwoNumbers:

Adds a method called AssertForAddTwoNumbers to your UI map (UIMap.uitest). You can view the method in the UIMap.Designer.cs file. This method performs the assert statements that you added.

      public void AssertForAddTwoNumbers()
      {
          #region Variable Declarations
          WinEdit textAnswerEdit = 
              this.DemoCalculatorWindowWindow.AnswerWindow.TextAnswerEdit;
          #endregion

          // Verify that the 'textAnswer' text box's Text property 
          // is '40'
          Assert.AreEqual(
               this.AssertForAddTwoNumbersExpectedValues.TextAnswerEditText, 
              textAnswerEdit.Text);
      }

Adds a call to the assert method AssertForAddTwoNumbers to the test method in your coded UI test file

      [TestMethod]
      public void CodedUITestMethod1()
      {
          // To generate code for this test, select "Generate Code" 
          // from the shortcut menu and select one of the menu items.
          this.UIMap.AddTwoNumbers();
          this.UIMap.AssertForAddTwoNumbers();
      }

When you choose a name for the method that has your assert statements, choose a name that is descriptive for these assertions that you created.

Click the Close icon to close the Coded UI Test Builder.
(Optional) To add code to start your application when the coded UI test runs, record the startup sequence for your application and save that to a method. You can call that method at the start of your test.

Note

You can add a test initialize method, identified by a [TestInitialize] attribute, which runs code at the start of each test method. For example, the method to start the application could be called from the TestInitialize method.
(Optional) To add code to close your application when the coded UI test runs, record the closing sequence for your application and save that to a method.

If you do not close the browser or application, it will remain open after your test is finished.

Note

You can add a test cleanup method, identified by a [TestCleanup] attribute, which runs code at the end of each test method. For example, the method to close the application could be called from the TestCleanup method.
To run the test, right-click in the test method, and then click Run Tests. For more information about how to run coded UI tests, see Running Automated Tests.

Note

After you create your coded UI test with specific data, you might want to run your coded UI test several times with different sets of data to test different conditions. To do this you can add parameters from a data source to your coded UI test to create a data-driven coded UI test. For more information, see How to: Create a Data-Driven Coded UI Test.

You can now optionally add additional controls and validate them using the UI Test Builder. For more information, see How to: Add UI Controls and Validation Code Using the Coded UI Test Builder.

Note

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 your test methods. You can also edit UI actions and their associated controls in the UI control map. The Coded UI Test Editor is included in the Microsoft Visual Studio 2010 Feature Pack 2. To download the feature pack, you must have either Visual Studio 2010 Ultimate, Visual Studio 2010 Premium or Test Professional 2010 with an MSDN subscription, Microsoft BizSpark, or MSDN Academic Alliance. For more information, see Editing Coded UI Tests Using the Coded UI Test Editor and Microsoft Visual Studio 2010 Feature Pack 2.

How to: Generate a Coded UI Test by Recording the Application Under Test

Generate a Coded UI Test by Recording the Application Under Test

To generate a coded UI test by recording the application under test

See Also

Tasks

Reference

Concepts

Additional resources