Walkthrough: Creating a Web Test that Requires a Login and Logout

  • Article

In this walkthrough you create a simple Web application that contains a login step and a logout step. The application simulates a shopping application, but does not contain functional code. Finally, you create a Web test to test the application.

In this walkthrough, you will perform the following tasks:

  • Create a simple Web application.

  • Create a Web test.

  • Extract new Web tests from an existing Web test.

  • Compose a new Web test from existing Web tests.

Prerequisites

For this walkthrough you will need:

  • Microsoft Visual Studio 2005

  • Visual Studio Team System Test Edition

Creating the Web Application

To create the Web application

  1. In Microsoft Visual Studio 2005, on the File menu, click New and then click Web Site.

    The New Web Site dialog box appears.

  2. Under Visual Studio installed templates, click ASP.NET Web Site.

  3. In the Location box, select File System, and then type the name of the folder where you want to keep the Web application. Make the end of the folder name ShoppingWebApp\ShoppingWebApp. For example, type the folder name C:\WebSites\ShoppingWebApp\ShoppingWebApp.

    Note

    Include the name two times so that you can add a Web test project to the first folder, and it will be separated from the Web application itself in the second folder.

  4. In the Language list, select the programming language you prefer.

    Note

    You will write minimal code in this walkthrough.

  5. Click OK.

  6. On the File menu, click Save All.

To create the home page for the Web application

  1. In Solution Explorer, right-click Default.aspx and click 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 five buttons onto the page. Use the following table to complete this step.

    Note

    Double-click each button to open the button click event and add the code.

    Control

    Text Property

    Button Click Code

    Button1

    Go to Log In

    Response.Redirect("Login.aspx")

    Button2

    Product 1

    Response.Redirect("Product1.aspx")

    Button3

    Product 2

    Response.Redirect("Product2.aspx")

    Button4

    Shopping Cart

    Response.Redirect("Cart.aspx")

    Button5

    Go to Log Out

    Response.Redirect("Logout.aspx")

  4. On the File menu, click Save All.

To add pages to the Web application

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

  2. In the Add New Item dialog box, click the Web Form template, name it Login.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 button onto the page.

  5. Drag a text box onto the page.

  6. Repeat steps 1 through 4 four more times. Use the following table to complete this step:

    Web Page

    Control

    Text Property

    Button Click Code

    Login.aspx

    TextBox1

    -

    -

    Login.aspx

    Button1

    Log In

    Response.Redirect("Default.aspx")

    Product1.aspx

    Button1

    Add to Cart

    Response.Redirect("Default.aspx")

    Product2.aspx

    Button1

    Add to Cart

    Response.Redirect("Default.aspx")

    Cart.aspx

    Button1

    Buy

    Response.Redirect("Default.aspx")

    Logout.aspx

    Button1

    Log Out

    Response.Redirect("Default.aspx")

    Note

    There is no real functionality in this Web application. Submitting each page returns the user to the home page. This functionality is sufficient for the purposes of this walkthrough.

  7. On the File menu, click Save All.

To test the Web application manually

  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 home page, Default.aspx.

    Note

    This starts the ASP.NET Development Server that runs the Web application your Web test will test. You will see the ASP.NET Development Server icon in the notification area, at the far right of the taskbar.

  3. Copy the address of the Web application to the clipboard or a notepad file. You will need the address for a later step in the walkthrough. For example, the address might resemble this: https://localhost:<PortNumber>/ShoppingWebApp/Default.aspx

  4. Click Go to Log In. The page Login.aspx opens.

  5. Type your name in the text box and then click Log In. The home page opens.

  6. Click Product 1. The page Product1.aspx opens.

  7. Click Add to Cart. The home page opens.

  8. Click Product 2. The page Product2.aspx opens.

  9. Click Add to Cart. The home page opens.

  10. Click Shopping Cart. The page Cart.aspx opens.

  11. Click Buy. The home page opens.

  12. Click Go to Log Out. The page Logout.aspx opens.

  13. Click Log Out. The home page opens.

  14. Close the Web browser.

Creating the Web Test

Now you are ready to create a Web test that enables you to test this application.

To create the Web test application

  1. In a new instance of Test Edition, on the File menu, point to New and then click Project.

    The New Project dialog box appears.

  2. Under Projects, expand Visual Basic or Visual C# according to your preference, and select the Test node.

  3. Under Visual Studio installed templates, click Test Project.

  4. In the Name box, type ShoppingWebAppTest.

  5. In the Location box, type the name of the folder where you saved the Web application. For example, type the folder name C:\WebSites\ShoppingWebApp.

  6. Click OK.

    The test project is created.

    Note

    By default, Visual Studio will add a unit test file and a text file that has information about authoring tests. You do not need these files for this walkthrough. Therefore, you can delete them. If you do not delete the files, they will not affect the walkthrough.

  7. On the Test menu, click New Test.

    The Add New Test dialog box appears.

  8. In the Add New Test dialog box, select Web Test, name the test WebTest1.webtest, and click OK.

    A new Web test file that is named WebTest1.webtest is added to your project, and the Web Test Recorder opens inside a new instance of Internet Explorer.

  9. In the browser's address bar, type the address of the Web application that you copied in a previous step, and press enter.

    Note

    Visual Studio starts to display the Web test URLs in the Web Test Recorder as it is recording.

  10. Click Go to Log In. The page Login.aspx opens.

  11. Type your name in the text box and then click Log In. The home page opens.

  12. Click Product 1. The page Product1.aspx opens.

  13. Click Add to Cart. The home page opens.

  14. Click Product 2. The page Product2.aspx opens.

  15. Click Add to Cart. The home page opens.

  16. Click Shopping Cart. The page Cart.aspx opens.

  17. Click Buy. The home page opens.

  18. Click Go to Log Out. The page Logout.aspx opens.

  19. Click Log Out. The home page opens.

  20. Click Stop on the Web Test Recorder to stop recording.

    Internet Explorer will close and you will see the Web test in the Web Test Editor as a list of URLs. After you stop recording, you can modify the test.

  21. On the File menu, click Save All.

To run the Web test application

  1. In the Web Test Editor, click Run Test on the toolbar.

    The test starts to run, and a Web Test Viewer displays each request in the test. A Test Results window displays the result for the entire test.

  2. In the Test Results window verify that the test passed.

  3. In the Web Test Viewer select some of the requests in the list and then examine the results that are shown in the Web browser in the lower pane. Verify that the test is running correctly.

Extracting New Web Tests

You can create new Web tests by extracting individual requests from an existing Web test. For more information, see How to: Extract a Web Test.

To extract new Web tests from an existing Web test

  1. Open WebTest1 in the Web Test Editor.

  2. In the request tree, right-click WebTest1 and then click Extract Web Test.

    The Extract Web Test dialog box appears.

  3. In Web test name type Login.

  4. In the Choose first item for the Web test drop-down select the first request. The request should resemble the following:

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

  5. In the Choose last item for the Web test drop-down select the third request. The request should resemble the following:

    https://localhost:<PortNumber>/ShoppingWebApp/Login.aspx

  6. Click OK.

    A new Web test is created named Login. In the Web Test Editor, Login is added to the request tree in place of the individual requests that you extracted. In Solution Explorer, Login.webtest is added to the project list.

  7. In the request tree, right-click WebTest1 and then click Extract Web Test.

    The Extract Web Test dialog box appears.

  8. In Web test name type BrowseAndBuy.

  9. In the Choose first item for the Web test drop-down select the first request after Login. The request should resemble the following:

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

  10. In the Choose last item for the Web test list select the sixth request. The request should resemble the following:

    https://localhost:<PortNumber>/ShoppingWebApp/Cart.aspx

  11. Click OK.

    A new Web test named BrowseAndBuy is created. In the Web Test Editor BrowseAndBuy is added to the request tree in place of the individual requests that you extracted. In Solution Explorer, BrowseAndBuy.webtest is added to the project list.

  12. In the request tree, right-click WebTest1 and then click Extract Web Test.

    The Extract Web Test dialog box appears.

  13. In Web test name type Logout.

  14. In the Choose first item for the Web test list select the first request after BrowseAndBuy. The request should resemble the following:

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

  15. In the Choose last item for the Web test list select the last request. The request should resemble the following:

    https://localhost:<PortNumber>/ShoppingWebApp/Logout.aspx

  16. Click OK.

    A new Web test is created named Logout. In the Web Test Editor Logout is added to the request tree in place of the individual requests that you extracted. In Solution Explorer, Logout.webtest is added to the project list.

  17. Confirm that there are no individual requests remaining in the Web test request tree. That is, WebTest1 now consists completely of calls to other Web tests.

  18. On the File menu, click Save All.

To run the Web test application

  1. In the Web Test Editor, click Run Test on the toolbar.

    The test starts to run, and a Web Test Viewer displays each request in the test. A Test Results window displays the result for the entire test.

  2. In the Test Results window verify that the test passed.

  3. In the Web Test Viewer select some of the requests in the list and then examine the results that are shown in the Web browser in the lower pane. Verify that the test is running correctly.

    Note

    In Web Test Viewer there are now collapsible nodes named WebTest1.Login, WebTest1.BrowseAndBuy, and WebTest1.Logout in the tree. This helps you review the parts of your test more easily.

Composing New Web Tests

You can create a new Web test by composing existing Web tests. For more information, see How to: Insert a Call to Another Web Test.

To compose a new Web test from existing Web tests

  1. On the Test menu, click New Test.

    The Add New Test dialog box appears.

  2. In the Add New Test dialog box, select Web Test, name the test AllTest.webtest, and click OK.

    A new Web test file that is named AllTest.webtest is added to your project, and the Web Test Recorder opens inside a new instance of Internet Explorer.

  3. Click Stop on the Web Test Recorder to stop recording without browsing.

    Internet Explorer will close and you will see the Web test in the Web Test Editor. The test is empty because you did not browse.

  4. In the request tree, right-click AllTest and then click Add Call to Web Test.

    The Choose Test dialog box appears.

  5. Click Login and then click OK. The Login Web test is added to the request tree.

  6. In the request tree, right-click AllTest and then click Add Call to Web Test.

    The Choose Test dialog box appears.

  7. Click BrowseAndBuy and then click OK. The BrowseAndBuy Web test is added to the request tree.

  8. In the request tree, right-click AllTest and then click Add Call to Web Test.

    The Choose Test dialog box appears.

  9. Click Logout and then click OK. The Logout Web test is added to the request tree.

  10. On the File menu, click Save All.

To run the Web test application

  1. In the Web Test Editor, click Run Test on the toolbar.

    The test starts to run, and a Web Test Viewer displays each request in the test. A Test Results window displays the result for the entire test.

  2. In the Test Results window verify that the test passed.

  3. In the Web Test Viewer select some of the requests in the list and then examine the results that are shown in the Web browser in the lower pane. Verify that the test is running correctly.

Next Steps

Now that you have a Web test, you can add it to a load test. You can create a load test that performs the Login and Logout steps only one time per virtual user, and tests the BrowseAndBuy step multiple times per virtual user.

See Also

Tasks

How to: Record a Web Test

How to: Edit an Existing Web Test

Concepts

Running and Viewing a Web Test

Other Resources

Web Test Walkthroughs