2018年2月28日 星期三

[Tool] 初探Katalon Recorder搭配MSTest建構Web UI測試教學

前言:
近幾年來,測試成為顯學,去年3月在.Net社群研討會,
見識到91哥介紹了3套測試工具,最有印象的就是Selenium IDE了,
直到近期才研究使用,以下是我的使用紀錄。


正文開始:
首先,Selenium IDE是Firefox的附加元件(add-on)裡的擴充套件(Extension),
可用來錄製、編輯、回放與偵錯測試。
遺憾的是,Selenium IDE只支援到Firefox 54.x版,
因此,若要使用IDE,可使用54.0.1或以下的免安裝版本。

而且預設沒有C#+MSTest的範本(雖然可使用91哥的MSTest範本),
加上用舊版的Firefox難免有些不便,因此改用Katalon Recorder來試試。

先拿Chrome來測試,到chrome應用程式或google搜尋Katalon Recorder結果第一筆,
找到後,點選加到CHROME。



Chrome右上角應該會出現圖示,點擊打開Katalon Recorder,點選New,輸入Test Case's name。


打開要測試的網頁,再點選Record,使用錄製功能來產生測試腳本,
再微調Command,這樣的方式較快。

那什麼是Command呢? 以Selenese來講,有以下3種:
  • Actions:對element操作,常見的有type、open、clickAndWait等。
  • Accessors:儲存element的value。
  • Assertions:驗證測試的條件是否滿足。有Assert、Verify與WaitFor,其中Assert跟Verify差異在Assert fail,則測試中斷,Verify則是log起來繼續執行。
再來是Target(Locator),讓Selenium能擷取到target element,
有以下6種方式(簡單範例):

Locator Html Target
ID <input id="email"> id=email
Name <input name="email"> name=email
Link Text <a href="#">Mail</a> link=Mail
CSS Selector <input class="form-group">
<span data-toggle="collapse"></span>
css=input.form-group
css=span[data-toggle=collapse]
DOM <input id="email"> document.getElementById("email")
XPath <html><body>
<table>
<tr>
<td>123</td>
<td>456</td>
</tr>
</table>
</body></html>
//html/body/table/tr/td[2]


只要點選Record,可自動產生上述說的Command、Target與Value(It depends.)


以下是實際錄製的過程。另assertText等Command,跟Selenium一樣,
在元素上右鍵,就可看到相關Command。



產出測試腳本後,可以再微調command,例:將click 表單欄位的command移除。



接著可將測試腳本Export出來,選擇要跑測試的語言與測試framework,
本例選擇C#+MSTest,即可將產生的程式碼貼進專案,
如果點選Save As File...,會以Test case名稱去掉底線命名,再加進專案即可。
另外,Katalon儲存是以Test Suite為單位。Export則是Test Case為單位。


測試專案需參考3個package:
  • Selenium.WebDriver
  • Selenium.Support
  • Selenium.WebDriver.ChromeDriver(若使用Chrome測試,預設是Firefox)


to be continued...


參考資料:
https://addons.mozilla.org/zh-TW/firefox/addon/selenium-ide/
https://www.guru99.com/locators-in-selenium-ide.html

2017年12月26日 星期二

[.Net Tool] 使用bootstrap-multiselect實作帶checkbox與optGroup的DropDownList(使用ajax with json或model binding)

說明:
下拉式選單(DropDownList)是網頁常見的元素(element),
如果要做出帶有群組(optGroup),且項目前都有核取方塊(checkbox),如下圖:


該怎麼做呢?


這裡使用bootstrap-multiselect套件,使用BSD 3-Clause License,
商業使用須加上作者的版權聲明。

本例資料來源從Localdb產生,table為Country,如下圖:



並將資料整理成bootstrap-multiselect需要之格式,
如:
var data = [{
    label: 'America',
    children: [{ label: 'Canada', value: '2042101B-A6AF-4603-B04A-10D9257821CD' },
                    { label: 'American', value: '7E35A8AC-D415-4ED3-B572-725ACF7074FB' }]
    }, {
    label: 'Asia',
    children: [{ label: 'Taiwan, ROC', value: 'EB9A0E48-A541-430B-AAEA-C85D98DBA384' },
                    { label: 'Singapore', value: '0A5D7D14-9698-4AAA-B3F6-586EED21D0CD' }]
}];


定義GetAll方法來做這件事:


以下兩張圖是自訂的類別(轉換成Json用)


Controller部分,其中LoadAllCountries取得CountryService中的GetAll,
Update則是取得選擇的country Ids:


View部分,使用jQuery.ajax取得下拉式選單的資料,
使用form表單post選擇的country Ids:


呈現結果:

送出表單後,可取得多選的Ids:


to be continued...

2017年12月5日 星期二

[Network] TCP建立連線與關閉連線機制(connection establishment / termination)

TCP protocol屬於傳輸層(Transport Layer),提供可靠傳輸與流量控制,
host與host溝通需先建立連線,過程共需3次封包傳遞:

用2個封包,可能會發生:
第1次送出的封包delay,client等不到回應,只好再送出SYN封包,
server先收到第2個SYN封包,且完成工作並關閉連線了。
後來第1個SYN封包送到server了,server就會建立多餘的連線...
因此,使用3次封包來回較可靠,俗稱3向交握(3-way handshaking)機制。

交握流程如下圖:



圖中的SYN與ACK,代表該封包的旗標(flag),
在TCP封包的header中,用一6 bits的segment來表示:
[SYN]:000010。
[ACK]:010000。
[SYN,ACK]:010010。

其他segment:
seq:封包序號,由host自己維護,建立連線時+1。
len:封包的資料長度,不包含header。
ack:封包的確認號,建立連線時,為host接收到的序號+1。

對照使用Wireshark截取的封包。

Win:接收視窗,為該host陳述自己的可接受資料的快取byte。
MSS(Maximun Segment Size):表封包一次最大裝載資料byte。
同樣Win下,MSS愈大,傳遞的封包愈少。


下圖是關閉連線的機制。




參考資料:
http://www.inetdaemon.com/tutorials/internet/tcp/3-way_handshake.shtml

2017年11月1日 星期三

[.Net MVC] 使用MVC BundleConfig的{version} wildcard的注意事項


使用ASP.Net MVC預設範本的BundleConfig,
會使用{version}來bundle jQuery套件,如:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));


之前看微軟文件, 使用{version}萬用字元的好處其一是:
  • debug組態:會自動bundle full debug版本。
  • release組態:就bundle min版本。
看起來也很直覺。

但有一次在release組態,我將full debug(jquery-x.x.x.js)的版本拿掉,
發現jquery沒有正確載入,才發現MVC預設會忽略min版本(in the bundles.IgnoreList),
所以應是使用full debug版本bundle與minify,
再加入HttpRuntime.Cache,如下圖紅框處。



因此,在Scripts資料夾下放full debug版本的js或css應該就沒問題了。
to be continued...


參考資料:
https://stackoverflow.com/questions/29254181/bundling-not-working-in-mvc5-when-i-turn-on-release-mode
https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
https://stackoverflow.com/questions/21270834/asp-net-mvc-bundle-not-rendering-script-files-on-staging-server-it-works-on-dev
http://www.mytecbits.com/microsoft/dot-net/asp-net-mvc-bundle-rendering
http://demo.tc/post/779

2017年10月24日 星期二

[.Net/VS] Could not load file or assembly 'Microsoft.Web.Deployment'與莫名發行失敗(fail no output message)


● 使用VS針對web application使用發行,
出現Could not load file or assembly 'Microsoft.Web.Deployment, Version=9.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35', 究竟發生什麼事??

原以為是web application需要參考Microsoft.Web.Deployment,
經過一番嘗試之後,
發現在本機(client端)安裝web deploy即可。

安裝完到路徑C:\Program Files,會出現IIS\Microsoft Web Deploy V3資料夾,
裡面會有Microsoft.Web.Deployment.dll,如下圖。



● 發行後,VS左下角狀態列出現發行失敗,且無其他訊息。

可將專案實體資料夾下bin內檔案手動清除,再發行看看。

2017年10月22日 星期日

[.Net/VS] Web Deployment 工作失敗:Microsoft.Web.Deployment.DeploymentManager的類型初始設定式發生例外狀況(threw an exception type initializer)

說明:
使用VS內建發行,點選「驗證連接(Validate Connection)」,
出現如下錯誤訊息。


解法:
搜尋網路解法,有人說要解除Microsoft Web Deploy dbSqlPackage Provider(如下圖所示),
但是我的Server並無安裝該程式。


又看到重新安裝Server上Web deploy的解法,

於是使用Web Platform Installer 5.0安裝:
● web deploy 3.6
● web deploy 3.6 for Hosting Servers
● web deploy 3.6 without bundled SQL support(latest)

再到控制台->解除安裝程式,
找到web deploy 3.6後,點選「變更」,
改成完全安裝就可以了,如下圖。



參考資料:
https://docs.microsoft.com/en-us/iis/publish/using-web-deploy/web-deploy-automatic-backups
https://stackoverflow.com/questions/6351289/web-deployment-task-failed-the-type-initializer-for-microsoft-web-deployment
http://blog.sanc.idv.tw/2014/08/aspnet-web-deploymvciis.html

2017年10月17日 星期二

[.Net MVC] 使用ValidationAttribute與IClientValidatable自訂前後端驗證 (Input Date isn't greater than today)

說明:
之前提過Remote驗證預設沒有後端驗證,
雖然可以自行實作後端驗證。
但MVC提供了自訂驗證(Custom validation),
可自訂驗證邏輯,並含括前後端驗證,
既然是預設的,就來試看看吧。

實作:
首先,新增一類別做驗證,並宣告為sealed,
因該類別單純用來做驗證,
再繼承ValidationAttribute,並override IsValid(object value)方法,
方法內,編寫驗證邏輯。

P.S. 帶ValidationContext的isValid方法,
可存取ViewModel該驗證屬性的資訊。



掛上剛新增的類別,記得要using類別所在namespace。


但沒有觸發前端驗證??


因為繼承ValidationAttribute只有後端驗證,
所以要補上前端驗證,在驗證類別再加上實作IClientValidatable介面,
也就是實作GetClientValidationRules方法。
方法內,需建構ModelClientValidationRule instance,
其中ValidationType傳入字串需要小寫,用來連結前端的html attribute與js方法。


這個rule會render到該html element的attribute。


最後,透過實作jQuery.validator的自訂驗證方法。


前端驗證也觸發了。


參考資料:
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/enabling-client-side-validation-on-custom-data-annotations-w/
http://demo.tc/post/687
https://jqueryvalidation.org/jQuery.validator.addMethod/