利用 Visual Studio 2013 進行跨瀏覽器、編碼 UI 測試

在過去幾年中，基於 Web 的解決方案為全世界使用者提供便利的訪問，因而非常受歡迎。使用者喜歡它們的另一個原因是它們的方便性。使用者無需安裝單獨的應用程式；僅憑瀏覽器就能從任何串連 Internet 的裝置串連自己的帳戶。但是，從軟體開發人員和測試者的角度看，使用者可以選擇任何 網頁瀏覽器會帶來這樣一個問題：解決方案必須經過多種瀏覽器的測試。本文將介紹如何通過簡單的方法解決這個問題，即只使用 C# 建立任何新型瀏覽器都可以執行的編碼 UI 測試案例。

新 Visual Studio

幾年前，當 Visual Studio 2010 發布時，它最有趣的功能之一是能夠測試基於 Web 的解決方案的 UI。但是，當時這種技術的使用有一定限制；例如，唯一支援的 網頁瀏覽器是 Internet Explorer。再者，UI 測試依賴於記錄 Web 網站上的使用者操作，然後重現這些操作來類比實際使用者操作，這是許多開發人員無法接受的。

Visual Studio 2013 候選版版本 (RC) 在許多不同方面進行諸多改進，從新 IDE 功能到擴充測試架構（bit.ly/1bBryTZ 提供了 RC 版本的詳細變化列表）。從我的角度來看，有兩個新功能特別有趣。第一個，現在不僅可以測試 Internet Explorer（包括 Internet Explorer 11）的 UI，還可以測試所有其他新型瀏覽器，例如 Google Chrome 和 Mozilla Firefox。第二個，從測試開發的角度來看甚至更為重要，就是 Microsoft 所稱的“可配置瀏覽器編碼 UI 測試屬性”。從根本上看，這個新功能定義了一組 UI 元素的搜尋條件。本文後面將詳細介紹這些功能。

被測系統

我將使用這兩個新功能來建立跨瀏覽器、完全自動程式化 UI 測試。對於我的待測試系統 (SUT)，我需要一個公開的、大家熟知的、基於 Web 的應用程式，因此我選擇了 Facebook。我準備介紹兩個基本使用者方案。第一個方案是正測試案例，成功登入後將顯示設定檔頁面。第二個方案是負測試案例，我輸入無效的使用者憑證來嘗試登入。此時，我希望使用者響應中顯示某種錯誤訊息。

我需要解決幾項挑戰。首先，需要啟動正確的瀏覽器（根據測試組態），而且它必須能夠提供對特定 URL 的訪問。其次，在運行期間，必須從 HTML 文檔中提取特定的控制項元素，以便為類比的使用者提供輸入。必要時，必須輸入控制項元素的值，並單擊正確的按鈕向伺服器提交 HTML 表單。代碼還應能夠處理伺服器的響應，驗證響應，並在測試案例完成時最終關閉瀏覽器（利用測試的清理方法）。

編碼前

開始編碼前，我需要準備環境，這非常簡單。首先，我需要從 bit.ly/137Sg3U 下載 Visual Studio 2013 RC。預設情況下，可通過 Visual Studio 2013 RC 只針對 Internet Explorer 建立自動程式化 UI 測試，但這不是我感興趣的；我要針對所有新型瀏覽器建立測試。當然，只要我在代碼中指定用 Internet Explorer 以外的瀏覽器運行測試，將不會發生編譯錯誤，但是在運行時會引發未處理的異常。之後我還將示範如何更改瀏覽器。為避免編碼過程出現問題，我需要下載並安裝一個名為“編碼 UI 跨瀏覽器測試 Selenium 組件”(bit.ly/Sd7Pgw) 的 Visual Studio 擴充，通過它我可以對安裝在電腦中的任何瀏覽器執行測試。

代碼探討

一切就緒後，即可示範如何建立新的編碼 UI 項目。開啟 Visual Studio 2013，單擊“檔案”|“建立項目”|“模板” |“Visual C#”|“測試”|“自動程式化 UI 測試項目”。輸入項目名稱，按“確定”查看新解決方案，如圖 1 所示。

圖 1 建立一個自動程式化 UI 測試項目