[C#.NET] 使用 Selenium IDE 進行 Web UI 手動/自動測試

2014-12-15

14454
0
Selenium
2015-12-28

Selenium IDE 是一套火狐的外掛，http://www.seleniumhq.org/download/，幾年前參加 91 哥的研討會認識了它，也照著 twMVC 的影片實作過，今天在 SkillTree 課程中再次在現場感受 91 哥的渲染力

https://www.youtube.com/watch?v=dZ_uZmoO2Aw

未來，也希望我能把這套測試工具導入企業內部，以便提昇軟體品質、縮短開發及維護時間。

本文章節：

前言
Selenium IDE 簡介
測試案例
UI 手動測試
UI 自動測試
Web Driver

前言

Selenium IDE 能做什麼?

它用來進行 UI 手動/自動探索測試，並把你在 Web UI 上所做的動作錄製起來，然後轉成程式碼

UI手/自動測試

不需要原始碼，也能進行測試，UI測試比較偏向使用者驗証測試，由使用者驗証資料呈現的位置以及內容，由 Selenium IDE 手動錄製腳本，再把腳本轉成 C#

下載位置及安裝

路徑：http://www.seleniumhq.org/download/

由於它是 Firefox 的 plugin ，請用 Firefox 點選連結

安裝成功後會在 Firefox 的工具列處看到 Selenium IDE，把它打開

Selenium IDE 簡介

紅色按鈕有被按下才會錄製腳本

在 Firefox 所作的動作都會被錄製成腳本

Selenium 可以針對 html 產生查詢語法，語法很多 Show All Available Commands 會看到更多

另外，這理有不錯的使用說明

http://www.guru99.com/first-selenium-test-script.html

assert 前綴詞代表驗証，沒有驗証腳本是不具測試意義，只是單純的測表單填入而已

測試案例

我們就用一個簡單的案例來練習

前往 https://mail.google.com

輸入帳號、密碼

按下登入

驗証登入成功後的網址 https://mail.google.com /mail/u/0/#inbox

驗証右上角顯示登入名為"+小章"，hyper link為 https://plus.google.com/u/0/?tab=mX

按下右上角的登出

驗証Email

PS.這案例做了兩件事表示，這不是一個好的案例

UI 手動測試

錄製好的腳本，按下撥放，它就會按照我剛剛的操作跑過一遍，確定腳本跟使用者案例一樣，代表手動測試已經完成

錄製的方式很簡單，若有問題可以觀看以下影片

https://www.youtube.com/watch?v=XewTSuXCFyk

錄好的 Selenium 如下，先修改帳號密碼

https://dotblogsamples.codeplex.com/SourceControl/latest#Simple.SeleniumGmailTest/Simple.SeleniumGmailTest/LoginGmail.html

UI 自動測試

接下來要把剛剛錄製的腳本轉成 C# ，Selenium IDE 支援 C#，但沒有 MsTest 測試專案範本，91哥已經把 MsTest 準備好了，請先到以下連結下載範本，並依步驟加入 MsTest 範本

ttp://www.dotblogs.com.tw/hatelove/archive/2013/11/26/selenium-ide-export-to-csharp-webdriver-mstest.aspx

再來把測試案例轉成 C# / MsTest

開啟 Unit Test 專案

在 Nuget Server 加入 Selenium.WebDriver

再把剛剛的 Selenium 測試案例貼到VS2013的測試專案

鼠標停在 TheLoginGmailTest ，Ctrl+R、T 運行單一測試，或是在Test Explorer 按右鍵，

這時候 Firefox 自動打開，然後在表單填上資料，最後亮綠燈，這一連串的動作就是UI自動測試，將來可以把它弄到 CI Server 讓它自己跑

PS.若有Google二次驗証的問題，請先自行解決