Share via


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

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

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

  • 建立簡單 Web 應用程式。

  • 建立 Web 效能測試。

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

  • 從現有的 Web 效能測試組合新的 Web 效能測試。

必要條件

本主題包含您需要:

  • Visual Studio Ultimate

建立 Web 應用程式

建立 Web 應用程式

  1. 在 Visual Studio Ultimate中,在 [檔案] 功能表上選擇 [新增] ],然後選取 [專案]。

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

  2. 在 [已安裝的範本] 底下,展開您偏好的程式語言,然後按一下 [Web]。

  3. 在 Web 專案類型清單中,選取 [ASP.NET 空白應用程式]。

    注意事項注意事項

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

  4. 在 [名稱] 方塊中,輸入 ShoppingWebApp。

  5. 在 [位置] 方塊中,指定您想要儲存 Web 應用程式的資料夾。

  6. 選取 [為方案建立目錄]。

  7. 選擇 [確定]。

  8. 在 [專案] 功能表上,選擇 [加入新項目]。

    [加入新項目] 對話方塊隨即出現。

  9. 在項目清單中,選擇 [Web Form]。

  10. 在 [名稱] 文字方塊中,輸入 Default.aspx,然後按一下 [加入]。

若要建立 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 應用程式的位址複製到剪貼簿或記事本檔案中。 在本逐步解說後面的步驟中,您會用到這個位址。 例如,此位址可能與下例類似:http://localhost:<PortNumber>/ShoppingWebApp/Default.aspx

  4. 選取 [移至登入]。 Login.aspx 頁面隨即開啟。

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

  6. 選取 Product 1. Product1.aspx 頁面隨即開啟。

  7. 選取 [加入購物車]。 首頁隨即開啟。

  8. 選取 [產品 2]。 Product2.aspx 頁面隨即開啟。

  9. 選取 [加入購物車]。 首頁隨即開啟。

  10. 選取 [購物車]。 Cart.aspx 頁面隨即開啟。

  11. 選取 Buy. 首頁隨即開啟。

  12. 選取 [移至登出]。 Logout.aspx 頁面隨即開啟。

  13. 選取 [登出]。 首頁隨即開啟。

  14. 關閉 Web 瀏覽器。

建立 Web 效能測試

現在您可以建立 Web 效能測試,讓您可以測試這個應用程式。

若要建立 Web 效能測試應用程式

  1. 在 Visual Studio Ultimate的執行個體,請在 [檔案] 功能表上指向 [新增] ],然後選取 [專案]。

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

  2. 在 [已安裝的範本] 底下,根據您的偏好,展開 [Visual Basic] 或 [Visual C#],並選取 [測試] 節點。

  3. 在範本清單中,選取 [Web 效能和負載測試專案]。

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

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

  6. 選擇 [確定]。

    包含 Web 效能測試採用名為 WebTest1.webtest 的 Web 效能測試和負載測試專案隨即建立。

  7. 在方案總管中,以開啟捷徑功能表並選擇 [重新命名] 選取 WebTest1.webtest,。 將測試命名為 WebTest1.webtest。

  8. 在方案總管中,選取 WebTest1.webtest,開啟捷徑功能表,然後選擇 [開啟]。

    Web 效能測試編輯器隨即顯示。

  9. 在 Web 效能測試編輯器],從工具列上的 [加入記錄] 。

    您的瀏覽器會開啟並顯示於 Web 測試錄製器加入。

    注意事項注意事項

    如果您沒有看到 Web 測試錄製器,您必須在瀏覽器中附加中。

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

    注意事項注意事項

    在錄製期間,Visual Studio 會在 [Web 效能測試錄製器] 中開始顯示 Web 效能測試 URL。

  11. 選取 [移至登入]。 Login.aspx 頁面隨即開啟。

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

  13. 選取 Product 1. Product1.aspx 頁面隨即開啟。

  14. 選取 [加入購物車]。 首頁隨即開啟。

  15. 選取 [產品 2]。 Product2.aspx 頁面隨即開啟。

  16. 選取 [加入購物車]。 首頁隨即開啟。

  17. 選取 [購物車]。 Cart.aspx 頁面隨即開啟。

  18. 選取 Buy. 首頁隨即開啟。

  19. 選取 [移至登出]。 Logout.aspx 頁面隨即開啟。

  20. 選取 [登出]。 首頁隨即開啟。

  21. 按一下 [Web 效能測試錄製器] 上的 [停止] 即可停止錄製。

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

  22. 在 [檔案] 功能表上,選擇 [儲存所有]。

若要執行 Web 效能測試應用程式

  1. Web Performance Test Editor中,選取工具列上的Run Test

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

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

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

擷取新的 Web 效能測試

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

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

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

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

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

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

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

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

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

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

  6. 選擇 [確定]。

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

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

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

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

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

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

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

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

  11. 選擇 [確定]。

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

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

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

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

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

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

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

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

  16. 選擇 [確定]。

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

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

  18. 在 [檔案] 功能表上,選擇 [儲存所有]。

若要執行 Web 效能測試應用程式

  1. Web Performance Test Editor中,選取工具列上的Run Test

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

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

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

    注意事項注意事項

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

組成新的 Web 效能測試

您可以透過組合現有的 Web 效能測試來建立新的 Web 效能測試。 如需詳細資訊,請參閱HOW TO:在 Web 效能測試中插入另一個 Web 效能測試的呼叫

若要從現有的 Web 效能測試組合新的 Web 效能測試

  1. 在方案總管中,在 [ShoppingWebAppTest] 中開啟 Web 效能測試和負載測試專案的捷徑功能表並選擇 [加入]。 然後選取 [Web 效能測試]。

    名為 WebTest2.webtest 的新 Web 效能測試檔便會加入至您的專案和 [Web 效能測試錄製器] 會在 Internet Explorer 的新執行個體。

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

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

  3. 在要求樹狀目錄中,以滑鼠右鍵按一下 [WebTest2] 然後選擇 [對 Web 測試中加入呼叫。]。

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

  4. 選取登入然後選取 [確定]。 Login Web 效能測試隨即加入至要求樹狀目錄。

  5. 在要求樹狀目錄中,以滑鼠右鍵按一下 [WebTest2] 然後選擇 [對 Web 測試中加入呼叫。]。

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

  6. 選取 然後選取 [確定]。 BrowseAndBuy Web 效能測試隨即加入至要求樹狀目錄。

  7. 在要求樹狀目錄中,以滑鼠右鍵按一下 [WebTest2] 然後選擇 [對 Web 測試中加入呼叫。]。

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

  8. 選取登出然後選取 [確定]。 Logout Web 效能測試隨即加入至要求樹狀目錄。

  9. 在 [檔案] 功能表上,選擇 [儲存所有]。

若要執行 Web 效能測試應用程式

  1. Web Performance Test Editor中,選取工具列上的Run Test

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

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

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

後續步驟

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

請參閱

工作

HOW TO:使用 Web 效能測試錄製器建立新的 Web 效能測試

HOW TO:使用 Web 效能測試編輯器編輯現有的 Web 效能測試

概念

執行 Web 效能測試

Web 效能測試逐步解說