2017-06-05

使用 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

  • 開啟附加元件管理員

    1plugin

  • 取得元件 --> 看看更多附加元件

    2moreplugin

  • 搜尋 selenium ide --> 切換至 Most Users --> 安裝 Selenium IDE

    搜尋 selenium ide 會出現很多 Add-ons ,切換至 Most Users 比較容易找到真正需要的,附上 url:Add-ons - Selenium IDE

    3search

  • 重新啟動 Firefox

    4restart

啟動 Selenium IDE

  1. 預設隱藏選單

    5hide

  2. 開啟選單 --> 工具 --> Selenium IDE 或是直接按下快捷鍵(Ctrl + Alt + S)

    按下 alt 可以開啟選單

    6startseleniumide

開始錄製網頁操作

  1. Selenium IDE 開啟時預設已啟動錄製

    7record

  2. 直接開啟目標網站並執行需要的操作
    • 開啟 GitHub

      8opengithub

    • 按下 Sign in

      9opensignin

    • 輸入帳號密碼
    • 執行登入

      10fillup

  3. 可以隨時執行測試

    8autoplay

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

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

  1. Selenium IDE 選單 --> 檔案 --> Export Test Suite As --> C# / NUnit /WebDriver

    11export

  2. 記得存成 .cs

    12save

  3. 使用 Visual Studio 開啟匯出的檔案
  4. 加入 NuGet 套件
    • Selenium.WebDriver

      13seleniumwebdriver

    • Selenium.Support

      14seleniumsupport

    • 需要瀏覽器 driver
      • firefox

        16ff

      • chrome

        17chrome

      • 如果沒有安裝瀏覽器 driver 的錯誤訊息

        15drivererror

  5. 接著依一般測試方法執行,Visual Studio 就會自行啟動指定瀏覽器進行測試了

心得

使用上很簡單的軟體,卻能達成很不錯的保護效果,執行速度也很快,程式有異動時都先執行幾個必要的 Web UI 測試,一旦出現錯誤,就暫緩上線作業,可以有效地讓程式碼品質獲得保障

參考資訊

  1. Add-ons - Selenium IDE

2 則留言:

  1. 作者已經移除這則留言。

    回覆刪除
  2. 從你的影片看起來是有切進去iframe裡面~建議先將code轉出來跑看看是不試點不到id

    回覆刪除