Web測試任重道遠

隨着Internet和Intranet/Extranet的快速增長，Web已經對商業、工業、教育、政府和娛樂及我們的工作和生活產生了深遠的影響。因爲Web能提供支持所有類型內容連接的信息發佈，容易爲最終用戶存取，更多傳統的信息和數據庫系統正在被移植到互聯網上：電子商務正迅速增長，範圍廣泛的、複雜的分佈式應用也正在Web環境中出現。基於Web的系統在變得越來越複雜的同時，Web應用軟件的缺陷危機也更加嚴重、更加廣泛。

在Web工程過程中，基於Web系統的測試、確認和驗收已成爲一項重要而富有挑戰性的工作。Web測試也毫無例外地必須進行自動化測試。以期能通過自動化測試工具按照測試工程師的預定計劃進行自動化測試，來減輕手工測試的勞動量，從而達到提高軟件質量的目的。

兩種基於Web的測試方法

筆者長期以來一直從事Exchange Server 2007、E14（未來的Exchange Server 2009）的基於Web的幫助功能及UI測試，OWA（Outlook Web Access）的功能和UI測試。在實際工作中也深感各種應用Web化已經是大勢所趨。

Microsoft Exchange的Web功能和UI測試大部分是基於自動化測試，在此希望和大家一起討論和分享一下Web自動化測試的方法和經驗。

基於Web的測試基本上採用兩種思路和方法：一種可以稱爲“Browsers測試”（瀏覽器端測試）。這種測試通常是模擬瀏覽器端的一些操作，比如在TextBox輸入一些文本，選擇ComboBox中的某個選項。因爲可以得到具體的操作界面，這種方法更多地應用到UI和Localization方面的測試。在進行OWA的46種語言的Localization方面測試時，我們就採用了這種方法，對各種操作產生出來的界面進行抓圖，然後對這些screenshot進行分析，以發現一些UI和Localization方面的問題。

另一種方法稱爲“Protocol測試”（協議測試）。這種方法是建立在HTTP協議級的測試，通過POST或Web Service向服務器發送請求，然後對服務器響應回來的數據進行解析、驗證。對一些功能測試，會更多地採用這種方法。最簡單的應用就是檢查鏈接的有效性，向服務器發送URL請求，檢查響應回來的數據，來判斷鏈接是否指向正確的頁面。

在實際項目中，我們可以根據具體需求進行選擇。以下是這兩種方法優缺點的比較：

測試方法 優點 缺點
瀏覽器測試 能夠測試客戶真實的操作場景 慢
協議測試 快，穩定 不能對UI和一些腳本進行測試


覽器端測試的具體應用

對於這種模擬瀏覽器端操作的測試，微軟已經有了非常成熟的測試框架，其中應用比較廣泛的是ECHO和KAF。ECHO是一個可以驅動Web UI的、面向對象的測試架構，它允許終端用戶使用XML或受.Net託管的編程語言，如C#來編寫自動化測試用例。而KAF可謂ECHO的後繼者，目前基於ECHO的測試項目都在逐漸向KAF遷移。這是因爲KAF不但包括ECHO的大部分功能，而且支持多種瀏覽器（目前支持IE和Firefox），對頁面上的動態元素也有很好的支持，靈活性更強。當然這些測試架構都是微軟內部使用的工具，是不允許對外發布的。但大部分的Web UI測試架構都是建立在如下的設計思路，按照這樣的設計思路，我們完全可以構建封裝適合自己項目的Web UI測試架構進行瀏覽器端的測試（見圖1）。


圖1

（1）UI Element

Web頁面是由一系列的對象元素組成的，比如按鈕、文本框等。UI Element就代表了這些通用的網頁接口元素。UI Element類一般都是super class（超類），這個類通常會有以下的類成員：

string Name: UI Element元素的名稱。作爲這個元素的唯一標識。
Driver UIDriver: 是對UI Element所使用的UI驅動實施的一個引用。針對不同的瀏覽器會選擇不同的驅動方法。
List<List<UIElementAttr>>AttributeLists: UI Element屬性的集合，UI Driver將遍歷所有的屬性列表去定位匹配的Element。當某個元素在不同的狀態可能會有不同的屬性時，例如我們熟知的button的三態，我們就需要有多個屬性列表。UIElementAttr通常是一個集合，一般包含有屬性名稱、屬性值、是否準確匹配等。
string ContainerName: UI Element所在的容器名稱。對於Web頁面，就是指元素所在的框架的名稱。
以上只是一些基本的類成員，可以根據實際情況對這個類進行補充。通常我們會創建一些UIElement子類內置到我們的測試架構中，這此子類主要是如下的一些常見的Web控件：

TextBox
Button
RadioButton
Link
Label
Image
Checkbox
SelectItem
ComboBox
DropDownMenu
我們通常會將靜態的UI Element存儲到XML文檔，這樣做的好處是當UI Element元素髮生變化時，只需要修改這個XML文檔，而不必修改我們的測試代碼。

有時候可能在Test Cases運行期間，用來確定UI Element唯一性的屬性會變化，這時候我們也需要用編碼動態地去更新屬性列表，來創建這個UI Element。

（2）Browser Agent

　　我們設計Web測試框架最主要的目的就是能夠讓測試代碼在不同的瀏覽器，比如IE、Firefox中都能自動地、正常地運行。提供Browser Agent可以更靈活設置瀏覽器的類型，以及完成一些常規的瀏覽器功能，比如清除瀏覽器的緩存及載入頁面等。

（3）UI Driver Interface

　　爲了實現測試代碼在不同瀏覽器都能夠自動執行這個目的，可以抽象出一個UI的驅動層。在這一層裏可以設計出能在各種瀏覽器裏執行的、所有可能的UI動作，而且我們設計的Test Cases也只與這一層進行交互。這樣可以將驅動的實現與Test Cases進行分離，將來Test Cases的修改不會影響到Driver Implement層代碼的實現部分，而且UI Driver Implement層的改變也會不影響到測試代碼。常見的一些方法如下：

Click(…):
Select(…):
DragAndDrop(…)
GetTitle(…):
PressKey(…):
（4）UI Driver Implement
這是建立一個Web測試架構的基礎，對於不同的瀏覽器可能會採用不同的驅動實現方法。


協議級測試的具體應用


協議測試主要包括以下幾個方面：

（1）Html源代碼解析

通過Protocol Client利用HTTPWebRequestObject從Server端獲得相應頁面源代碼，對於每一個Http Web請求都會有一個cookie管理器。以下是一些實現的代碼：

HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
request.Method = method;
request.Accept = defaultAcceptHeader;
request.KeepAlive = true;
request.UserAgent = defaultUserAgent;
request.AllowAutoRedirect = false;
request.Headers.Add("Accept-Language", defaultAcceptLanguage);
request.CookieContainer = new CookieContainer();
.Proxy = null;

if(method.Equals("POST", StringComparison.InvariantCultureIgnoreCase))
{
request.ContentType = @"application/x-www-form-urlencoded";
}

當數據請求完畢後，我們需要從源代碼數據中解析出Web控件。我們一般要對這些控件設置兩個方法：verifyExists和RaisePostback。

在verifyExists多采用正則表達式去匹配物理屬性和特定字串來唯一驗證控件的存在與否。

RaisePostback對應於典型的ASP.NET中的doPostBack函數的Html控件，比如：

function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
theform = document.Form1;
　 }
else {
　 theform = document.forms["Form1"];
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}

我們將解析Html源代碼中具體的string，比如

<SELECT language=javascript id=cmbLanguage onchange="__doPostBack('cmbLanguage','')" name=cmbLanguage> <OPTION value=2052 selected>Chinese (China)</OPTION><OPTION value=1033>English</OPTION> <OPTION value=1036>French</OPTION> <OPTION value=1041>Japanese</OPTION></SELECT>

構建以下的postback的參數值：

__EVENTTARGET = 2052,
__EVENTARGUMENT = “”,
__VIEWSTATE = dDwxOTkxNzQ3MzYzO3Q8O2w8aTwyPjtpPDM+Oz47bDx0PEA8ZW47Pjs7Pjt0PDtsPGk8MT47aTwzPjs+O2w8dDx0PDtwPGw8aTwwPjtpPDE+O2k8Mj47aTwzPjtpPDQ+O2k8NT47aTw2PjtpPDc+O2k8…..XZlbnQgRGV0YWlsczs+Pjs+Ozs+Oz4+Oz4+Oz4+Oz4+Oz7iSD2R0wFRR8N23W+zhPjmz0hB2Q==

以上是在實際項目中對Web進行測試時採用的一些方法和思路，希望能對大家的測試工作帶來幫助。當然具體的實現還需要根據實際的項目進行調整和完善以得到最好的測試結果。