Silverlight/aspx/ajax/mvc的UI自動化測試

web前端的自動化測試，一般要能實現類比滑鼠點擊、鍵盤錄入、瀏覽器頁面自動導航等功能，而且關鍵的是要對整個測試過程能自動錄製並回放。

vs2010的SP2已經整合了內建功能，但是目前尚未正式發布，所以本文就不介紹了。有興趣的同學可參考以下文章：

http://msdn.microsoft.com/zh-cn/library/gg413374

http://www.cnblogs.com/scottxu/archive/2011/02/28/1967112.html

除了微軟自家即將推出的vs2010 sp2之外，不少第三方廠家也推出了相應的解決方案，比如Ranorex（園子裡有兄弟寫過入門文章：http://www.cnblogs.com/chenkai/archive/2010/09/28/1837457.html）

而我要介紹的是telerik的Test Studio，http://www.telerik.com/automated-testing-tools.aspx 之所以選擇它，理由很簡單：它實在太容易上手了，不管新手老手，保證5分鐘就能上手，而且支援幾乎所有前端技術，包括ajax/aspx mvc/silverlight/wpf等.

先來體驗一把，普通網站的測試：（拿百度開刀）

下載telerik的Test Studio後，它有二種運行方式，一是單獨運行，二是以外掛程式形式整合在vs2010中，為了方便起見，以下採用第二種方式

1、開啟vs2010 建立一個Test項目

2、開始錄製測試過程

預設情況下，建立的項目已經有一個web Test項，而且會自動開啟該項，如下：

點擊Record按鈕(圖中紅色圈出的部分)，預設會啟動瀏覽器，然後在瀏覽器地址欄裡輸入http://www.baidu.com/ ，注意一下vs2010中的變化

已經自動記錄下了當前動作: Navigate to :'http://www.baidu.com/'。然後我們在瀏覽器輸入框裡輸入“菩提樹下的楊過”，並點擊“百度一下”

可以看到，整個鍵盤錄入過程，以及滑鼠點擊“百度一下”的動作，已經被記錄。關掉瀏覽器，整個錄製過程結束。（是不是想起了那句廣告語：哪裡不會點哪裡，so Easy!）

3、測試回放

點擊中的“綠色按鈕”即可回放剛才的測試過程。

silverlight的UI自動化測試與普通網站的測試幾乎完全一樣，只是要事先配置silverlight的運行方式和起始頁。因為SL有二種運行方式，一是瀏覽器模式運行，二是OOB模式運行，所以要告訴Test Studio，你想怎麼玩。

項目右擊-->建立項-->Web Test

檔案名稱鍵入“SilverlightTest.tstest”（當然你可以隨便改），然後開啟這個檔案，如 :

點擊工具列中紅線圈出的按鈕進行配置，這次我們拿silverlight的官網來開刀

解釋一下:Web Url即為嵌入有Silverlight的網頁地址。點擊OK關掉視窗，剩下的事情就跟剛才測試百度完全一樣

我在頁面的ShowCase動畫上隨便點幾個，記錄下的結果如下:

夠簡單吧，OOB的測試跟這個幾乎一樣，只是配置的時候指定SL應用的捷徑路徑即可。

注意事項:

在Silverlight的測試中，我發現偶爾會出現Test Studio無法串連到Silverlihgt的情況出現，以下是Telerik工程師給出的調試建議：

Known Issues:
-  Automation only supports XAP Silverlight app deployment (the .NET method). XBAP or Javascript Silverlight deployment is not supported.
- Connecting to the Silverlight App via https in Firefox or Safari is currently not supported.
Diagnostic Steps:
1) If the Web and Silverlight app is deployed locally, try adding a period (‘.’) after localhost, as in http://localhost.:
2) Delete the entire cache for the test playback browser
- In IE select: Tools -> Internet Options -> (Under General Tab) Delete -> Choose to delete Temporary Internet Files
- In  Firefox select: Tools -> Clear Recent History -> Select Everything in ‘Time Range to Clear’ drop down menu -> Choose to delete Cache
- In Safari select: Main ToolBar Drop Down Menu -> Reset Safari… -> Choose to ‘Empty the cache’
3) Try increasing the (Settings.) SilverlightConnectTimeout if the Silverlight app has a longer load time
4) Try setting externalAccessfromCrossDomainCallers to script only in your application's AppManifest.xaml file by doing the following in your html page and Silverlight manifest:
a) Example for html page:

<param value="true" name="enableHtmlAccess"/>
<div id="silverlightControlHost">
<object height="300" width="300" type="application/x-silverlight-2" data="data:application/x-silverlight-2,">
<param value="http://a-remote-domain.com/ClientBin/SilverlightClient.xap" name="source"/>
<param value="white" name="background"/>
<param value="3.0.40723.0" name="minRuntimeVersion"/>
<param value="true" name="enableHtmlAccess"/>
<param value="visOnly=true" name="initParams"/>
<a style="text-decoration: none;" href="http://go.microsoft.com/fwlink/?LinkID=149156">
<img style="border-style: none; width: 400px; height: 200px;" alt="Install Microsoft Silverlight" src="http://storage.timheuer.com/sl4wp-ph.png"/></a></object>
<iframe style="border: 0px none ; visibility: hidden; height: 0pt; width: 0pt;"/></div>

Example for SL Manifest:

  <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
  2:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3:             ExternalCallersFromCrossDomain="ScriptableOnly"
  4: >
  5:     <Deployment.Parts>
  6:     </Deployment.Parts>
  7: </Deployment>

(see this Microsoft forum thread for more information: http://forums.silverlight.net/forums/p/101955/340407.aspx)

4

) Try setting the "windowless" property for your Silverlight app as "false"
Example (similar to Step 3 html example):
<object id="xamlHost0" width="900" height="412" type="application/x-silverlight">
    <param value="transparent" name="background"/>
    <param value="true" name="windowless"/>
    <!-- a bunch of other params go here -->
</object>

5) Check the headers your server is sending for the Silverlight Page by:
- Install/Run Fiddler and load your Silverlight page.
- Click the response for the .xap file.
- Click Inspectors -> Headers.
There should be an entry: Content-Type:application/x-silverlight-app
This must be in the response in order for the WebAii Framework, Design Canvas, or WebUI Test Studio to detect the Silverlight App.

雖然是英文，但是並不複雜，只要對照紅色標出部分一般都能解決。

最後，我提供一個小技巧，也有助於解決這個問題，測試Silverlight錄製時，如果啟動錄製後瀏覽器無法自動跳轉到指定的Web Url，可以手動在瀏覽器裡輸入網址，一般情況下Test Studio就能識別出當前頁面有Silverlight。