使用 Selenium 進行 UI 測試

Azure DevOps 服務 |Azure DevOps Server |Azure DevOps Server 2022

在發行管線中執行使用者介面 （UI） 測試是偵測非預期變更的絕佳方式，而且不需要困難。 本文說明在持續部署發行和測試自動化期間，使用 Selenium 測試您的網站。 執行UI測試時適用的特殊考慮會在UI測試考慮中討論。

一般而言，您會在組建工作流程中執行單元測試，並在您的應用程式部署至 QA 環境之後，於發行工作流程中執行功能 （UI） 測試。

如需 Selenium 瀏覽器自動化的詳細資訊，請參閱：

• 硒
• Selenium 檔

建立測試專案

由於沒有 Selenium 測試的範本，最簡單的開始使用方式是使用單元測試範本。 這會自動新增測試架構參考，並可讓您從Visual Studio測試總管執行和檢視結果。

1. 在 Visual Studio 中，開啟 [ 檔案 ] 選單，然後選擇 [ 新增專案]，然後選擇 [ 測試 ]，然後選取 [ 單元測試專案]。 或者，開啟方案的快捷方式功能表，然後選擇 [新增]、[新增專案] 和 [單元測試專案]。

2. 建立項目之後，請新增瀏覽器用來執行測試的 Selenium 和瀏覽器驅動程序參考。 開啟單元測試專案的快捷方式功能表，然後選擇 [ 管理 NuGet 套件]。 將下列套件新增至您的專案：

   • Selenium.WebDriver
   • Selenium.Firefox.WebDriver
   • Selenium.WebDriver.ChromeDriver
   • Selenium.WebDriver.IEDriver

   

3. 建立您的測試。 例如，下列程式代碼會建立名為 MySeleniumTests 的預設類別，以在 Bing.com 網站上執行簡單的測試。 將 TheBingSearchTest 函數的內容替換為測試您的 Web 應用程序或網站所需的 Selenium 代碼。 將 SetupTest 函式中的瀏覽器指派變更為您想要用於測試的瀏覽器。

   using System;
   using System.Text;
   using Microsoft.VisualStudio.TestTools.UnitTesting;
   using OpenQA.Selenium;			
   using OpenQA.Selenium.Firefox;	
   using OpenQA.Selenium.Chrome;	
   using OpenQA.Selenium.IE;
   
   namespace SeleniumBingTests
   {
     /// <summary>
     /// Summary description for MySeleniumTests
     /// </summary>
     [TestClass]
     public class MySeleniumTests
     {
       private TestContext testContextInstance;
       private IWebDriver driver;
       private string appURL;
   
       public MySeleniumTests()
       {
       }
   
       [TestMethod]
       [TestCategory("Chrome")]
       public void TheBingSearchTest()
       {
         driver.Navigate().GoToUrl(appURL + "/");
         driver.FindElement(By.Id("sb_form_q")).SendKeys("Azure Pipelines");
         driver.FindElement(By.Id("sb_form_go")).Click();
         driver.FindElement(By.XPath("//ol[@id='b_results']/li/h2/a/strong[3]")).Click();
         Assert.IsTrue(driver.Title.Contains("Azure Pipelines"), "Verified title of the page");
       }
   
       /// <summary>
       ///Gets or sets the test context which provides
       ///information about and functionality for the current test run.
       ///</summary>
       public TestContext TestContext
       {
         get
         {
           return testContextInstance;
         }
         set
         {
           testContextInstance = value;
         }
       }
   
       [TestInitialize()]
       public void SetupTest()
       {
         appURL = "http://www.bing.com/";
   
         string browser = "Chrome";
         switch(browser)
         {
           case "Chrome":
             driver = new ChromeDriver();
             break;
           case "Firefox":
             driver = new FirefoxDriver();
             break;
           case "IE":
             driver = new InternetExplorerDriver();
             break;
           default:
             driver = new ChromeDriver();
             break;
         }
   
       }
   
       [TestCleanup()]
       public void MyTestCleanup()
       {
         driver.Quit();
       }
     }
   }
   

4. 使用測試總管在本機執行 Selenium 測試，並檢查它是否正常運作。

定義組建管線

您需要持續整合 （CI） 建置管線來建置 Selenium 測試。 如需詳細資訊，請參閱 建置適用於 Windows 的 .NET 傳統型應用程式。

建立 Web 應用程式

您需要 Web 應用程式進行測試。 您可以使用現有的應用程式，或在持續部署 （CD） 發行管線中部署一個應用程式。 上述程式代碼範例會針對 Bing.com 執行測試。 如需如何設定自己的發行管線來部署 Web 應用程式的詳細資訊，請參閱 部署至 Azure Web Apps。

決定如何部署和測試您的應用程式

您可以使用 Azure 中的Microsoft裝載代理程式，或您在目標伺服器上安裝的自我裝載代理程式，來部署及測試您的應用程式。

• 使用 Microsoft裝載的代理程式時，您應該使用預安裝在 Windows 代理程式上的 Selenium Web 驅動程式（名為 Hosted VS 20xx 的代理程式），因為它們與安裝在Microsoft裝載代理程式映射上的瀏覽器版本相容。 包含這些驅動程式的資料夾路徑可以從名為 IEWebDriver （Internet Explorer）、 ChromeWebDriver （Google Chrome） 和 GeckoWebDriver （Firefox） 的環境變數取得。 驅動程式 不會 預安裝在其他代理程式上，例如Linux、Ubuntu和macOS代理程式。 另請參閱 UI測試考慮。

• 使用 您在目標伺服器上部署的自我裝載代理程式時，代理程式 必須設定為以互動方式執行，並啟用自動記錄。 請參閱建置和發行代理程式和 UI測試考慮。

在發行中包含測試

1. 如果您沒有部署 Web 應用程式的現有發行管線：

   • 在 Azure DevOps 的 [Azure Pipelines] 區段中開啟 [發行] 頁面，或在 TFS 中開啟 [建置和發行] 中樞（請參閱入口網站導覽），然後選擇+圖示，然後選擇 [建立發行管線]。

     

   • 選取 [Azure App 服務 部署範本]，然後選擇 [套用]。

   • 在 [管線] 索引標籤的 [成品] 區段中，選擇 [+ 新增]。 選取您的組建成品，然後選擇 [ 新增]。

     

   • 在 [管線] 索引標籤的 [成品] 區段中，選擇 [持續部署觸發程式] 圖示。在 [持續部署觸發程式] 窗格中，啟用觸發程式，以便從每個組建建立新版本。 新增預設分支的篩選。

     

   • 開啟 [工作] 索引標籤，選取 [階段 1] 區段，然後輸入您的訂用帳戶資訊，以及您要在其中部署應用程式和測試的 Web 應用程式名稱。 這些設定會套用至部署 Azure App 服務 工作。

     

2. 如果您要將應用程式和測試部署到裝載代理程式的目標電腦未安裝 Visual Studio 的環境：

   • 在發行管線的 [工作] 索引標籤中，選擇 + [在代理程序上執行] 區段中的圖示。 選取 Visual Studio Test Platform Installer 工作，然後選擇 [新增]。 保留所有設定的預設值。

     

     您可以使用 [搜尋] 文本框，更輕鬆地找到工作。

3. 在發行管線的 [工作] 索引標籤中，選擇 + [在代理程序上執行] 區段中的圖示。 選取 Visual Studio 測試工作，然後選擇 [新增]。

   

4. 如果您將 Visual Studio Test Platform Installer 工作新增至管線，請將 Visual Studio 測試工作的 [執行選項] 區段中的 [測試平臺版本] 設定變更為 [工具安裝程式安裝]。

   

   如何? 從組建管線將參數傳遞至我的測試程序代碼？

5. 儲存發行管線並啟動新版本。 您可以排入新的 CI 組建佇列，或從發行管線中的 [發行] 下拉式清單中選擇 [建立發行] 來執行此操作。

   

6. 若要檢視測試結果，請從 [發行 ] 頁面開啟發行摘要，然後選擇 [ 測試] 連結。

下一步