使用 Selenium IDE 與 C# 做 Web UI 測試

網頁 UI 及前端技術變化很快，也愈來愈專業，分工愈來愈細，除了前後端獨立的 unit test 之外，前後端介接完成後的整合測試也是重點之一也因為更貼近使用者，測試的真實性及重要性更高。使用者看見錯誤畫面時不會在意前端或是後端單元測試是否正常，使用者只覺得我們沒做好，所以不論錯誤的嚴重性，只要出現錯誤畫面都會造成商譽損失、使用者信任度降低。

除了前後端的整合驗證外， Web UI 測試也很適合用來針對還沒有落實 unit test 的團隊做基本保護：針對較重要或是使用率較高的操作流程進行 Web UI 的自動化測試，在每次更版或是每天，甚至是覺得網站異常時執行自動化測試，確認結果是否合乎預期，這樣一來網站至少開始有了基本的保障，接著只要畫面或是程式被改壞時，馬上就知道，避免明顯錯誤直接在使用者面前裸奔

雖然知道 Selenium IDE 好幾年了，但 Firefox 47 版開始跟 Selenium IDE 並不相容，搞了好久，上 TDD 課程聽 91 大提到 Firefox 53(2017/4/19) 之後問題已獲得解決，備忘一下順便祈禱不會再出現相同的問題了

下載 Selenium IDE

Selenium IDE 目前只支援 Firefox

請使用 Firefox
開啟附加元件管理員
取得元件 –> 看看更多附加元件
搜尋 selenium ide –> 切換至 Most Users –> 安裝 Selenium IDE
搜尋 selenium ide 會出現很多 Add-ons ，切換至 Most Users 比較容易找到真正需要的，附上 url：Add-ons - Selenium IDE
重新啟動 Firefox

啟動 Selenium IDE

預設隱藏選單
開啟選單 –> 工具 –> Selenium IDE 或是直接按下快捷鍵(Ctrl + Alt + S)
按下 alt 可以開啟選單

開始錄製網頁操作

Selenium IDE 開啟時預設已啟動錄製
直接開啟目標網站並執行需要的操作
- 開啟 GitHub
- 按下 Sign in
- 輸入帳號密碼
- 執行登入
錄製腳本後可以隨時執行測試

如何讓 C# 也能執行自動測試

如果需要有 Selenium IDE 才能執行自動化測試，不免增加使用困難度，這時候我們就可以將 Selenium IDE 錄製的結果轉換為 C# 程式

Selenium IDE 選單 –> 檔案 –> Export Test Suite As –> C# / NUnit /WebDriver
記得存成 .cs 檔
使用 Visual Studio 開啟匯出的檔案
加入 NuGet 套件
- Selenium.WebDriver
- Selenium.Support
- 需要瀏覽器 driver
  - firefox
  - chrome
  - 如果沒有安裝瀏覽器 driver 的錯誤訊息
接著依一般測試方法執行，Visual Studio 就會自行啟動指定瀏覽器進行測試了