共用方式為

逐步解說：建立需要登入和登出的 Web 測試

  • 發行項

更新：2007 年 11 月

在本逐步解說中，您會建立一個簡單的 Web 應用程式，內含一個登入步驟和登出步驟。這個應用程式看似購物應用程式，但並未包含功能程式碼。最後，您會建立 Web 測試來測試此應用程式。

在這個逐步解說中，您將執行下列工作：

  • 建立簡單 Web 應用程式。

  • 建立 Web 測試。

  • 從現有的 Web 測試擷取新的 Web 測試。

  • 從現有的 Web 測試撰寫新的 Web 測試。

必要條件

在本逐步解說中，您將會需要：

  • Microsoft Visual Studio 2005

  • Visual Studio Team System Test 版

建立 Web 應用程式

建立 Web 應用程式

  1. 在 Microsoft Visual Studio 2005 中的 [檔案] 功能表上，按一下 [新增] 然後按一下 [網站]。

    [新網站] 對話方塊隨即出現。

  2. 在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  3. 在 [位置] 方塊中，選取 [檔案系統]，然後輸入您想要用來保存 Web 應用程式的資料夾名稱。請使用 ShoppingWebApp\ShoppingWebApp 做為資料夾名稱的結尾。例如，請輸入資料夾名稱 C:\WebSites\ShoppingWebApp\ShoppingWebApp。

    注意事項：

    將名稱包含兩次，以便您將 Web 測試專案加入至第一個資料夾，而且可以和第二個資料夾中的 Web 應用程式區分。

  4. 在 [語言] 清單中，選取您慣用的程式語言。

    注意事項：

    在此逐步解說中，您將會撰寫最小的程式檔。

  5. 按一下 [確定]。

  6. 在 [檔案] 功能表上按一下 [全部儲存]。

若要建立 Web 應用程式的首頁

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [Default.aspx]，然後按一下 [設計工具檢視]。

    空白網頁隨即出現。

  2. 如果沒看到工具箱，請按一下 [檢視]，然後按一下 [工具箱]。

  3. 從 [標準] 群組中，將五個按鈕拖曳到網頁上。請使用下表來完成此步驟。

    注意事項：

    請按兩下要開啟的每個按鈕，以開啟按鈕動作事件並加入程式碼。

    控制項

    Text 屬性

    按鈕動作程式碼

    Button1

    移至登入

    Response.Redirect("Login.aspx")

    Button2

    產品 1

    Response.Redirect("Product1.aspx")

    Button3

    產品 2

    Response.Redirect("Product2.aspx")

    Button4

    購物車

    Response.Redirect("Cart.aspx")

    Button5

    移至登出

    Response.Redirect("Logout.aspx")

  4. 在 [檔案] 功能表上按一下 [全部儲存]。

將網頁加入至 Web 應用程式

  1. 在 [網站] 功能表上，按一下 [加入新項目]。

  2. 在 [加入新項目] 對話方塊中，按一下 [Web Form] 範本，將它命名為 Login.aspx，然後按一下 [加入]。

  3. 在文件視窗的下方，按一下 [設計] 索引標籤切換至 [設計] 檢視。

  4. 將按鈕拖曳到網頁上。

  5. 將文字方塊拖曳到網頁上。

  6. 重複執行步驟 1 至 4 連續四次。請使用下表來完成此步驟：

    網頁

    控制項

    Text 屬性

    按鈕動作程式碼

    Login.aspx

    TextBox1

    -

    -

    Login.aspx

    Button1

    登入

    Response.Redirect("Default.aspx")

    Product1.aspx

    Button1

    加入購物車

    Response.Redirect("Default.aspx")

    Product2.aspx

    Button1

    加入購物車

    Response.Redirect("Default.aspx")

    Cart.aspx

    Button1

    購買

    Response.Redirect("Default.aspx")

    Logout.aspx

    Button1

    登出

    Response.Redirect("Default.aspx")
    注意事項：

    此 Web 應用程式並無任何實際功能。送出每個頁面都會讓使用者回到首頁。這項功能對本逐步解說的目的而言已經足夠。

  7. 在 [檔案] 功能表上按一下 [全部儲存]。

手動測試 Web 應用程式

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [Default.aspx]，然後按一下 [設定為起始頁]。

  2. 按下 CTRL+F5，即可在瀏覽器中執行 Web 應用程式。首頁 Default.aspx 會出現在畫面上。

    注意事項：

    這會啟動 ASP.NET 程式開發伺服器，該伺服器會執行您的 Web 測試所要測試的 Web 應用程式。您會在工作列最右邊的告知區域中看到「ASP.NET 程式開發伺服器」圖示。

  3. 將 Web 應用程式的位址複製到剪貼簿或記事本檔案中。在本逐步解說後面的步驟中，您會用到這個位址。例如，此位址可能與下例類似：https://localhost:<PortNumber>/ShoppingWebApp/Default.aspx

  4. 按一下 [移至登入]。Login.aspx 網頁隨即開啟。

  5. 在文字方塊中輸入您的名稱，然後按一下 [登入]。首頁隨即開啟。

  6. 按一下 [產品 1]。Product1.aspx 頁面隨即開啟。

  7. 按一下 [加入購物車]。首頁隨即開啟。

  8. 按一下 [產品 2]。Product2.aspx 頁面隨即開啟。

  9. 按一下 [加入購物車]。首頁隨即開啟。

  10. 按一下 [購物車]。Cart.aspx 頁面隨即開啟。

  11. 按一下 [購買]。首頁隨即開啟。

  12. 按一下 [移至登出]。Logout.aspx 頁面隨即開啟。

  13. 按一下 [登出]。首頁隨即開啟。

  14. 關閉 Web 瀏覽器。

建立 Web 測試

現在您可以建立 Web 測試，使您可以測試這個應用程式。

若要建立 Web 測試應用程式

  1. 在 Visual Studio Test 版的新執行個體 (Instance) 中，從 [檔案] 功能表指向 [新增]，然後按一下 [專案]。

    [新增專案] 對話方塊隨即出現。

  2. 在 [專案] 之下，根據您的偏好，展開 [Visual Basic] 或 [ Visual C#]，並選取 [測試] 節點。

  3. 在 [Visual Studio 安裝的範本] 底下，按一下 [測試專案]。

  4. 在 [名稱] 方塊中，輸入 ShoppingWebAppTest。

  5. 在 [位置] 方塊中，輸入儲存 Web 應用程式的資料夾名稱。例如，請輸入資料夾名稱 C:\WebSites\ShoppingWebApp。

  6. 按一下 [確定]。

    隨即建立測試專案。

    注意事項：

    根據預設，Visual Studio 會加入單元測試檔案，以及內含撰寫測試相關資訊的文字檔。在這個逐步解說中，您不需要這些檔案，因此可以將它們刪除。如果您不刪除那些檔案，它們也不會影響逐步解說。

  7. 在 [測試] 功能表上按一下 [新增測試]。

    [加入新測試] 對話方塊隨即出現。

  8. 在 [加入新測試] 對話方塊中，選取 [Web 測試]，將測試命名為 WebTest1.webtest，然後按一下 [確定]。

    您的專案中隨即新增一個名為 WebTest1.webtest 的 Web 測試檔案，而且 [Web 測試錄製器] 會在 Internet Explorer 的新執行個體中開啟。

  9. 在瀏覽器的網址列中，輸入您在先前步驟中複製的 Web 應用程式位址，然後按下 ENTER。

    注意事項：

    Visual Studio 會在 [Web 測試錄製器] 中開始顯示所錄製的 Web 測試 URL。

  10. 按一下 [移至登入]。Login.aspx 頁面隨即開啟。

  11. 在文字方塊中輸入您的名稱，然後按一下 [登入]。首頁隨即開啟。

  12. 按一下 [產品 1]。Product1.aspx 頁面隨即開啟。

  13. 按一下 [加入購物車]。首頁隨即開啟。

  14. 按一下 [產品 2]。Product2.aspx 頁面隨即開啟。

  15. 按一下 [加入購物車]。首頁隨即開啟。

  16. 按一下 [購物車]。Cart.aspx 頁面隨即開啟。

  17. 按一下 [購買]。首頁隨即開啟。

  18. 按一下 [移至登出]。Logout.aspx 頁面隨即開啟。

  19. 按一下 [登出]。首頁隨即開啟。

  20. 按一下 [Web 測試錄製器] 上的 [停止] 停止錄製。

    Internet Explorer 隨即關閉，而且您會在 [Web 測試編輯器] 中看到該 Web 測試顯示成 URL 清單。停止錄製之後，您就可以修改測試。

  21. 在 [檔案] 功能表上按一下 [全部儲存]。

執行 Web 測試應用程式

  1. 在 [Web 測試編輯器] 中，按一下工具列上的 [執行測試]。

    接著會開始執行測試，而且 [Web 測試檢視器] 會顯示測試中的每一個要求。[測試結果] 視窗會顯示整個測試的結果。

  2. 在 [測試結果] 視窗中，確認測試是否成功。

  3. 在 [Web 測試檢視器] 中，選取清單中的某些要求，然後檢查下方窗格中 Web 瀏覽器顯示的結果。驗證測試是否正確執行。

擷取新的 Web 測試

您可以從現有的 Web 測試中擷取個別要求，藉以建立新的 Web 測試，如需詳細資訊，請參閱 HOW TO：擷取 Web 測試。

若要從現有的 Web 測試擷取新的 Web 測試

  1. 在 [Web 測試編輯器] 中開啟 WebTest1。

  2. 在要求樹狀結構中，以滑鼠右鍵按一下 WebTest1，然後按 [擷取 Web 測試]。

    [擷取 Web 測試] 對話方塊隨即出現。

  3. 在 [Web 測試名稱] 中輸入 Login。

  4. 在 [選擇 Web 測試的第一個項目] 下拉式清單中選取第一項要求。此要求應該與下例類似：

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

  5. 在 [選擇 Web 測試的最後一個項目] 下拉式清單中選取第三項要求。此要求應該與下例類似：

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

  6. 按一下 [確定]。

    隨即建立名為 Login 的新 Web 測試。在 [Web 測試編輯器] 中，Login 會加入要求樹狀目錄中，代替您所擷取的個別要求。在 [方案總管] 中，Login.webtest 也會加入專案清單中。

  7. 在要求樹狀結構中，以滑鼠右鍵按一下 WebTest1，然後按 [擷取 Web 測試]。

    [擷取 Web 測試] 對話方塊隨即出現。

  8. 在 [Web 測試名稱] 中輸入 BrowseAndBuy。

  9. 在 [選擇 Web 測試的第一個項目] 下拉式清單中選取 Login 之後的第一項要求。此要求應該與下例類似：

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

  10. 在 [選擇 Web 測試的最後一個項目] 清單中選取第六項要求。此要求應該與下例類似：

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

  11. 按一下 [確定]。

    隨即建立名為 BrowseAndBuy 的新 Web 測試。在 [Web 測試編輯器] 中，BrowseAndBuy 會加入要求樹狀目錄中，代替您所擷取的個別要求。在 [方案總管] 中，BrowseAndBuy.webtest 也會加入專案清單中。

  12. 在要求樹狀結構中，以滑鼠右鍵按一下 WebTest1，然後按 [擷取 Web 測試]。

    [擷取 Web 測試] 對話方塊隨即出現。

  13. 在 [Web 測試名稱] 中輸入 Logout。

  14. 在 [選擇 Web 測試的第一個項目] 清單中選取 BrowseAndBuy 之後的第一項要求。此要求應該與下例類似：

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

  15. 在 [選擇 Web 測試的最後一個項目] 清單中選取最後一項要求。此要求應該與下例類似：

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

  16. 按一下 [確定]。

    隨即建立名為 Logout 的新 Web 測試。在 [Web 測試編輯器] 中，Logout 會加入要求樹狀目錄中，代替您所擷取的個別要求。在 [方案總管] 中，Logout.webtest 也會加入專案清單中。

  17. 確認 Web 測試要求樹狀目錄中未留下任何個別要求，也就是 WebTest1 現在完全是由其他 Web 測試的呼叫所組成。

  18. 在 [檔案] 功能表上按一下 [全部儲存]。

執行 Web 測試應用程式

  1. 在 [Web 測試編輯器] 中，按一下工具列上的 [執行測試]。

    接著會開始執行測試，而且 [Web 測試檢視器] 會顯示測試中的每一個要求。[測試結果] 視窗會顯示整個測試的結果。

  2. 在 [測試結果] 視窗中，確認測試是否成功。

  3. 在 [Web 測試檢視器] 中，選取清單中的某些要求，然後檢查下方窗格中 Web 瀏覽器顯示的結果。驗證測試是否正確執行。

    注意事項：

    在 [Web 測試檢視器] 中，此時樹狀目錄中會有名為 WebTest1.Login、WebTest1.BrowseAndBuy 和 WebTest1.Logout 的可摺疊節點。這可幫助您更輕鬆地檢視測試各個部分。

組成新的 Web 測試

您可以透過組合現有的 Web 測試來建立新的 Web 測試。如需詳細資訊，請參閱 HOW TO：將呼叫插入至其他 Web 測試。

若要從現有的 Web 測試組成新的 Web 測試

  1. 在 [測試] 功能表上按一下 [新增測試]。

    [加入新測試] 對話方塊隨即出現。

  2. 在 [加入新測試] 對話方塊中，選取 [Web 測試]，將測試命名為 AllTest.webtest，然後按一下 [確定]。

    您的專案中隨即新增一個名為 AllTest.webtest 的 Web 測試檔案，而且 [Web 測試錄製器] 會在 Internet Explorer 的新執行個體中開啟。

  3. 按一下 [Web 測試錄製器] 上的 [停止]，直接停止錄製而不進行瀏覽。

    Internet Explorer 隨即關閉，而且您會在 [Web 測試編輯器] 中看到該 Web 測試。該測試是空的，因為您並未進行瀏覽。

  4. 在要求樹狀結構中，以滑鼠右鍵按一下 AllTest，然後按 [加入 Web 測試的呼叫]。

    [選擇測試] 對話方塊隨即出現。

  5. 按一下 Login，再按一下 [確定]。Login Web 測試隨即加入至要求樹狀目錄。

  6. 在要求樹狀結構中，以滑鼠右鍵按一下 AllTest，然後按 [加入 Web 測試的呼叫]。

    [選擇測試] 對話方塊隨即出現。

  7. 按一下 BrowseAndBuy，再按一下 [確定]。BrowseAndBuy Web 測試隨即加入至要求樹狀目錄。

  8. 在要求樹狀結構中，以滑鼠右鍵按一下 AllTest，然後按 [加入 Web 測試的呼叫]。

    [選擇測試] 對話方塊隨即出現。

  9. 按一下 Logout，再按一下 [確定]。Logout Web 測試隨即加入至要求樹狀目錄。

  10. 在 [檔案] 功能表上按一下 [全部儲存]。

執行 Web 測試應用程式

  1. 在 [Web 測試編輯器] 中，按一下工具列上的 [執行測試]。

    接著會開始執行測試，而且 [Web 測試檢視器] 會顯示測試中的每一個要求。[測試結果] 視窗會顯示整個測試的結果。

  2. 在 [測試結果] 視窗中，確認測試是否成功。

  3. 在 [Web 測試檢視器] 中，選取清單中的某些要求，然後檢查下方窗格中 Web 瀏覽器顯示的結果。驗證測試是否正確執行。

後續步驟

現在您已擁有 Web 測試，可以將它加入負載測試中。您可以建立負載測試，使其只針對每個虛擬使用者執行一次 Login 和 Logout 步驟，並針對每個虛擬使用者多次測試 BrowseAndBuy 步驟。

請參閱

工作

HOW TO：記錄 Web 測試

HOW TO：編輯現有的 Web 測試

概念

執行及檢視 Web 測試

其他資源

Web 測試逐步解說