Partager via

How to: Create a Web Client UI Test Using Coded UI Test

  • Article
Overview | Prerequisites | Steps | Outcome | Further Reading

Overview

The following How-to topic will walk you through the creation of an automated test for your web application by creating a coded UI test using Coded UI Test in Microsoft Visual Studio 2010 Premium or Ultimate edition. The coded UI test performs actions on the user interface (UI) controls and verifies that the correct controls are displayed with the correct values. For this topic, a default ASP.NET MVC 3 web application will be the targeted application used for testing.

Prerequisites

This topic requires you to have the following prerequisites:

  1. Microsoft Visual Studio 2010 Premium or Ultimate edition
  2. Microsoft Visual Studio 2010 SP1
  3. Windows Internet Explorer 9
  4. ASP.NET MVC 3

Steps

  1. In Visual Studio, create a new project. To do this, point to New on the File menu, and then click Project. In the New Project dialog, select Visual C# under Installed Templates, and then select ASP.NET MVC 3 Web Application. You can create applications using either Microsoft Visual Basic or Microsoft Visual C#. Name your project MVC3SampleApp, then click OK.

    Hh404082.3c04a2ce-2b3b-4b06-bbbe-d1ccf24cdb2c(en-us,PandP.10).png

    1. In the New ASP.NET MVC 3 Project dialog box, select Internet Application. Select Razor as the view engine. Click OK.

      Hh404082.785f0456-58b0-4882-9d43-dfbda663c810(en-us,PandP.10).png

    2. Select Start Debugging from the Debug menu. Visual Studio will launch a browser and open the application's home page. Notice that the address bar of the browser says localhost. That's because localhost points to your own local computer, which is running the application you just built. When Visual Studio runs a web project, a random port is used for the web server. In the image below, the random port number is 25857. When you run the application, you'll probably see a different port number.

      Hh404082.229ce148-2e98-44e7-8dbd-08de07c5e9c1(en-us,PandP.10).png

    3. Click the Log On link on the Home page.

    4. Click the Register link and register an account by entering a User name and Password. Click the Register button.

      Hh404082.64bbfb08-7866-47f5-9057-a6541ee40495(en-us,PandP.10).png

  2. Add a test project to the solution using the Test Project template. Right-click the MVC3SampleApp solution in Solution Explorer, point to Add, and select New Project. In the New Project dialog, select Test Documents under Test Projects. Set the project's name to TestProject, specify a valid location, and then click OK.

  3. Add a coded UI test. To do this, in Solution Explorer, right-click the TestProject project, point to Add, and select New Test. In the Add New Test dialog, select the Coded UI Test. Name the coded UI test MyCodedUITest and click OK.

  4. In the Generate Code for Coded UI Test dialog, select Record actions, edit UI map or add assertions, and click OK.

    Hh404082.ee7d9830-f6c3-4fe5-9ded-b723fc7f9a6c(en-us,PandP.10).png

    The Coded UI Test Builder dialog box appears. You can use the Coded UI Test Builder to add a UI control to the UIMap for your test, or to generate code for a validation method that uses an assertion for a UI control.

    Click the red Record button to start recording steps.

    Hh404082.6a433b08-7cac-4c88-b937-b397c0554b1f(en-us,PandP.10).png

  5. Record the UI Test as follows:

    1. Navigate to the home page
    2. Click the Log on link on the top-right corner.
    3. Enter the user name and password.
    4. Click the Log on button.

  6. Click the record button to stop recording. Click the Show Recorded Steps button to check if the steps are recorded correctly. The result should look like the screenshot below:

    Hh404082.eb5b42e8-5f16-4be0-8460-9ad1020ac85b(en-us,PandP.10).png

  7. Click the Generate Code button in UIMap - Coded UI Test Builder. In the Coded UI Test Builder-Generate Code dialog box, change the method name to LogOn and click the Add and Generate button.

  8. The code, which will be generated to the UIMap.Designer.cs file, is shown in the following code snippet.

    Note

    If you record a new method, the generated code will overwrite the code in UIMap.Designer.cs.

    [GeneratedCode("Coded UITest Builder", "10.0.40219.1")]
public partial class UIMap
{

 /// <summary>
 /// LogOn - Use 'LogOnParams' to pass parameters into this method.
 /// </summary>
 public void LogOn()
 {
  #region Variable Declarations
   HtmlHyperlink uILogOnHyperlink = this.UIBingWindowsInternetEWindow.UIHomePageDocument.UILogOnPane.UILogOnHyperlink;
   HtmlEdit uIUsernameEdit = this.UIBingWindowsInternetEWindow.UILogOnDocument.UIUsernameEdit;
   HtmlEdit uIPasswordEdit = this.UIBingWindowsInternetEWindow.UILogOnDocument.UIPasswordEdit;
   HtmlInputButton uILogOnButton = this.UIBingWindowsInternetEWindow.UILogOnDocument.UIMainPane.UILogOnButton;
  #endregion
  // Go to web page 'https://localhost:9926/' using new browser instance
  this.UIBingWindowsInternetEWindow.LaunchUrl(new System.Uri(this.LogOnParams.UIBingWindowsInternetEWindowUrl));

  // Click 'Log On' link
  Mouse.Click(uILogOnHyperlink, new Point(8, 11));

  // Type 'Test Account' in 'User name' text box
  uIUsernameEdit.Text = this.LogOnParams.UIUsernameEditText;

  // Type '{Tab}' in 'User name' text box
  Keyboard.SendKeys(uIUsernameEdit, this.LogOnParams.UIUsernameEditSendKeys, ModifierKeys.None);

  // Type '********' in 'Password' text box
  uIPasswordEdit.Password = this.LogOnParams.UIPasswordEditPassword;

  // Click 'Log On' button
  Mouse.Click(uILogOnButton, new Point(17, 16));
 }
...   
...

}

  9. Use the UIMap -Coded UI Test Builder to create an assert method to validate properties of the UI control. In this case, you will verify if logging on to the default site was successful by following these steps:

    1. Add an assertion to the UI control. To do this, drag the crosshairs onto the UI control in your application that you want to test. When the box outlines your control, release the mouse. In this case, draw a box around the Log-on portion of the home page.

      Hh404082.0c824d96-9fcd-4a24-8811-5078b597bdbf(en-us,PandP.10).png

      The properties for this control are now listed in the Coded UI Test Builder - Add Assertions dialog box.

    2. Right-click the Display Text property and select Add Assertion. Keep all values as default and click OK.

      Hh404082.a30895e2-6505-4175-b245-d19ffc01ed43(en-us,PandP.10).png

    3. Click the Generate Code button in the Coded UI Test Builder. Name the assertion method VerifyLogOn. This method will be auto generated and added to the CodedUITestMethod1 in the MyCodedUITest.cs file, as shown below:

      [TestMethod]
public void CodedUITestMethod1()
 {
 // To generate code for this test, select "Generate Code for Coded UI 
 // Test" from the shortcut menu and select one of the menu items.
 // For more information on generated code, see   // https://go.microsoft.com/fwlink/?LinkId=179463
    this.UIMap.LogOn();
    this.UIMap.VerifyLogOn();
 }

  10. Modify the generated code as follows:

    1. Copy the code in UIMap.Designer.cs and paste it into UIMap.cs.

    2. In UIMap.cs, if it is not already present, add the following using statement:

      using Microsoft.VisualStudio.TestTools.UITesting.HtmlControls;

    3. If you want to close the browser window automatically after each test case runs, add a CloseBrowserWindow function in the UIMap.cs partial class, as follows:

      public partial class UIMap
 {

    ...
    ...
    public void CloseBrowserWindow()
    {
     #region Variable Declarations
      BrowserWindow currentBrowserWindow = this.mUIBlankPageWindowsInteWindow;
     #endregion

      currentBrowserWindow.Close();
    }

     ...

 }

    4. Add the following code snippet to the MyCodedUITest class in MyCodedUITest.cs file. The TestCleanup attribute in this method marks this method to be executed every time a test method completes its run.

      //Use TestCleanup to run code after each test has run
 [TestCleanup()]
  public void MyTestCleanup()
  {
  // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
  // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
     this.UIMap.CloseBrowserWindow();
  }

  11. To run the test, close all browser windows. Right-click inside the MyCodedUITest.cs file and click Run Tests. The coded UI test will begin to execute; this will open a browser, will run the application programmatically based on the recorded steps, and will assert if the conditions are met. Once the test completes, the results will be shown in the Test Results window.

Outcome

The Automation test project is created and can be used to automate UI testing of your web application.

Further Reading

Testing the User Interface with Automated UI Test on MSDN.

How to: Create a Coded UI Test on MSDN.

For other topics about testing in Project Silk, see the following:

Next | Previous | Home | Community