Walkthrough: Playing Back Coded UI Tests Using Firefox

You can create automated tests of the user interface (UI) known as coded UI tests. These tests provide functional testing of the UI and validation of UI controls. Coded UI tests let you test the functionality of user interface Using the Microsoft Visual Studio 2010 Feature Pack 2, you can record UI actions on a website or on a Web-based application and create coded UI tests. You can use Windows Internet Explorer to record the actions and then play back the tests using the Mozilla Firefox browser.

For more information about coded UI tests, see Testing the User Interface with Automated UI Tests.

Prerequisites

For this walkthrough you will need:

• Visual Studio 2010 Ultimate, Visual Studio 2010 Premium or Test Professional 2010.

• Mozilla Firefox Web browser version 3.5 or 3.6.

• Verify that you have installed Microsoft Visual Studio 2010 Feature Pack 2 and the Test Helper Extension for Mozilla Firefox. Information about installation is included in the introduction.

Creating a Web Application

To create the Web application

1. InVisual Studio 2010, on the File menu, click New and then click Project.

   The New Project dialog box appears.

2. Under Installed templates, expand the programming language that you prefer and then click Web.

3. In the list of Web project types, select ASP.NET Empty Web Application.

   Note

   You will write minimal code in this walkthrough.

4. In the Name box, type ColorWebApp.

5. In the Location box, specify the folder where you want to create your Web application.

6. Select Create directory for solution.

7. Click OK.

8. In Solution Explorer, verify that the new ColorWebApp project is selected.

9. On the Project menu, choose Add New Item.

   The Add New Item dialog box appears.

10. In the list of items, choose Web Form.

11. In the Name text box, type Default.aspx and then click Add.

Adding Controls to the Web Application

To add controls to the Web application

1. In Solution Explorer, right-click Default.aspx and choose View Designer.

   A blank page is displayed.

2. If the toolbox is not visible click View and then click Toolbox.

3. From the Standard group, drag a RadioButtonList onto the page.

   A RadioButtonList control is added to the design surface.

4. On the RadioButtonList Tasks action tag pane, click the EditItems link.

   A ListItem Collection Editor appears.

   Note

   You can also display the ListItem Collection Editor by editing the Items collection on the Properties window.

5. Click Add to add a new item.

6. Under ListItem properties:

   1. Change the Text property to Red.

   2. Set the Selected property to True.

      

7. Click Add to add another item.

8. Under ListItem properties change the Text property to Blue.

9. Click OK to close the ListItem Collection Editor.

10. Drag a Button onto the page. In the Properties window, change the Text property to Submit.

    

11. On the File menu, click Save All.

Adding Pages to the Web Application

To add pages to the Web application

1. On the Project menu, click Add New Item.

2. In the Add New Item dialog box, select Web Form from the list of templates. In Name type Red.aspx, and then click Add.

3. At the bottom of the document window, click the Design tab to switch to design view.

4. Drag a Label onto the page. In the Properties window, set the Text property to Red. Set the ForeColor property to Red.

5. On the Project menu, click Add New Item.

6. In the Add New Item dialog box, click the Web Form template and name it Blue.aspx. Click Add.

7. At the bottom of the document window, click the Design tab to switch to design view.

8. Drag a Label onto the page. In the Properties window, set the Text property to Blue. Set the ForeColor property to Blue.

9. On the File menu, click Save All.

Adding Functionality to the Web Application

To add functionality to the Web application

1. In Solution Explorer right-click Default.aspx and click View Designer.

2. Double-click the Submit Button. Visual Studio switches to the page code, and creates a skeleton event handler for the Button control's Click event.

3. Add the following code to the event handler:

   if (this.RadioButtonList1.SelectedValue == "Blue")
   {
       Response.Redirect("Blue.aspx");
   }
   else
   {
       Response.Redirect("Red.aspx");
   }
   

   If RadioButtonList1.SelectedValue = "Blue" Then
       Response.Redirect("Blue.aspx")
   Else
       Response.Redirect("Red.aspx")
   End If
   

4. On the File menu, click Save All.

Verify the Web Application Runs Correctly

To run the Web application

1. In Solution Explorer, right-click Default.aspx and then click Set As Start Page.

2. Press CTRL+F5 to run the Web application in the browser. You will see the first page.

3. Click Red and then click Submit. If the application is working correctly, you will go to the page with the Label that says Red.

4. Go back to the first page.

5. Click Blue and then click Submit. If the application is working correctly, you will go to the page with the Label that says Blue.

6. Copy the address of your Web application to the clipboard or a notepad file. For example, the address might look like this: https://localhost:<PortNumber>/ Default.aspx

7. Close the browser.

Create and Run a Coded UI Test for the Web Application

To Create and Run a Coded UI Test

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

   The Add New Project dialog box appears.

2. In the Installed Templates pane, expand either Visual C# or Visual Basic, and then select Test.

3. In the middle pane, select the Test Project template.

4. Click OK.

   In Solution Explorer, the new test project named TestProject1 is added to your solution and 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.

5. In Solution Explorer, right-click TestProject1, click Add and then select Coded UI test.

   The Generate Code for Coded UI Test dialog box appears.

6. Select the Record actions, edit UI map or add assertions option and 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.

7. Click Start Recording on the UIMap – Coded UI Test Builder. In a few seconds, the Coded UI Test Builder will be ready.

   

8. Launch Internet Explorer.

9. In Internet Explorer’s address bar, enter the address of the Web application that you copied in a previous procedure. For example:

   https://localhost:<PortNumber>/ Default.aspx

   (Optional) navigate through the Web application by pressing the Red, Blue and the browser’s back button.

10. Close Internet Explorer.

11. On the UIMap - Coded UI Test Builder, click Generate Code.

12. In the Method Name type SimpleWebAppTest and click Add and Generate. In a few seconds, the Coded UI test appears and is added to the Solution.

    

13. Close the UIMap – Coded UI Test Builder.

    The CodedUITest1.cs file appears in the Code Editor.

Confirm the Coded UI Test Plays Back Properly in Internet Explorer

• In the CodedUITest1.cs file, locate the CodedUITestMethod1 method, right-click and select Run Tests.

  While the coded UI test runs, the ColorWebApp is visible. It conducts the steps that you did in the previous procedure.

Add a Property to SpecifyFirefox Playback and Rerun the Coded UI Test

1. In the CodedUITest1.cs file, locate the MyTestInitialize() method which uses the TestInitializeAttribute uncomment the code and add the CurrentBrowser property with its value assigned as “FireFox” as shown in the following code:

   Tip

   Optionally, instead of adding the BrowserWindow property, you can create an environment variable called CodedUITestCurrentBrowser that has a value of “Firefox” and then restart Visual Studio.

   ////Use TestInitialize to run code before running each test 
           [TestInitialize()]
           public void MyTestInitialize()
           {        
           //    // 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
               BrowserWindow.CurrentBrowser = "Firefox";
           }
   

   ' Use TestInitialize to run code before running each test
       <TestInitialize()> Public Sub MyTestInitialize()
           '
           ' 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
           '
           BrowserWindow.CurrentBrowser = "Firefox"
   
   
       End Sub
   

   For more information about using the TestInitialze() attribute, see How to: Generate a Coded UI Test by Recording the Application Under Test.

2. 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 run using Mozilla Firefox.

See Also

Tasks

Walkthrough: Playing Back Manual Tests Using Firefox

How to: Play Back a Web-Based Coded UI Test Using Firefox

Concepts

Testing the User Interface with Automated UI Tests

Other Resources

Recording Tests Using Windows Internet Explorer and Playing Back Using Mozilla Firefox