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