➤ 本篇文將會使用 Visual Studio 作為開發工具，以 C# 撰寫程式範例。前言
相信時常接觸網頁開發的人一定遇過這樣的感受：每當網頁製作好後總得一個一個頁面手動檢查，一個一個按鈕做點擊測試。
當要檢查測試的網頁很單純、只有一兩頁時，手動檢查相對快速容易，
但當操作流程越來越複雜，或者動輒上百個畫面時，若程式每更新一次就得全部重新檢查，光測試完天就黑一半啦（又容易眼花沒發現錯誤～）
而到底這樣的流程有沒有更自動化、更省時省力又聰明的方式呢？
只要運用網頁自動化測試就能解決上述問題～～～
網頁自動化測試是DevOps其中一種概念，當我們寫好程式後並寫出測試方法，往後只要執行這些測試方法，就可以一次驗證網站程式是否正確無誤。
而我們更可以將這些測試綁入CI/CD流程中，只要程式更新並push，就自動去執行測試，產生測試報表，並且當測試皆通過時就直接部署到server上。
當專案需要快速迭代時，就可以大大節省每次更新重複手動測試部署的時間人力成本浪費（灑花轉圈 🎉
而提到網頁自動化測試，今天要介紹的是 Selenium 這套開源的老牌工具。
Selenium 簡介
Selenium支援了多種程式語言(Python, C#, PHP, JavaScript, Ruby etc.)及多種瀏覽器，是套可以讓程式直接驅動瀏覽器進行各種網站操作的自動化測試工具（也可以拿來做為爬蟲工具）。
Selenium 2.0 主要包含以下這些工具：
- Selenium IDE：目前是在Firefox上的一個Plugin，可以用GUI的方式，像按鍵精靈一樣透過點擊直接產生出測試流程。
- Selenium WebDriver：提供了强大的元素定位方法可以選取DOM Element，並且能驅動多種不同的瀏覽器，在執行測試時能夠看到程式真實操作畫面的樣子。
- Selenium Grid：能一次在多個瀏覽器中執行多個測試，採用Hub/Node方式，在Node上跑Webdriver並統一透過Hub一次管控。
但其實當初在公司執行專案期間選擇了Selenium的真正原因，只是因為它有周邊IDE，不需寫程式也能讓PM及其他同事都很好上手 XD
規劃測試案例
在開始測試之前，需要清楚知道目前要測試的目標與涵蓋範圍，因此我使用表格來紀錄訂定的測試案例。
Getting Started
🚀 事前準備
讓我們在 Visual Studio 建立一C#單元測試專案。
🚀 所需元件與元件
在 Visual Studio 中安裝以下NuGet套件。
【工具】 > 【NuGet 封裝管理員】 > 【管理方案的NuGet套件】
並且於專案中安裝如下圖這些套件。
🚀 建立第一支測試
在一開始我們先以MSTest（是為 Visual Studio 帶有由 Microsoft 支持的內建測試框架）來撰寫，較為簡單容易理解。
首先必須了解一下MSTest的屬性如下：
在程式中我們可以定義變數 baseURL 為主要測試的目標網站位址，
然後在屬性 ClassInitialize 的初始 function 中定義 driver 為 ChromeDriver，
並且讓 driver 跳轉到 baseURL 頁面。
接下來我們就可以開始寫測試案例囉！
Selenium提供了多種方式來查找元素(FindElement)，包括：
- By ID
- By Name
- By ClassName
- By TagName
- By LinkText & PartialLinkText
- By XPath
而這邊示範一個測試案例：
1. 訪問首頁（www.google.com.tw）。
2. 點選「隱私權」連結。
3. 檢查「下載 PDF」連結是否顯示於頁面上。這裡範例我們用 LinkText 來檢查「隱私權」連結元素是否存在於頁面當中。
而除了 FindElement 外，Selenium WebDriver 也提供了許多 Command，例如：ElementIsPresent、Click等等。
最後的最後，我們寫一個屬性為 ClassCleanup 的 function，定義當Unit Test Class要結束前執行關閉driver的動作。
最後我們的程式碼就會像這樣～
寫完測試方法後，點開【測試】>【視窗】>【測試總管】就可以查看所有我們撰寫的測試方法。
然後點選【全部執行】可以進行建置，並掃描存在的測試方法然後執行。
當執行時就可以看見瀏覽器被自動開啟並執行程式定義的動作囉！
執行完成能清楚得知測試結果是否為成功，若測試失敗了也將會顯示錯誤訊息以便於debug～
使用IDE
Selenium IDE 類似按鍵精靈，可以幫助我們不須寫程式就能建立網頁自動化測試。
使用Firefox瀏覽器開啟安裝：
安裝後即可開啟Selenium IDE視窗。
按下右上角紅色圓鈕就可以開始錄製動作，同剛剛的測試案例：
1. 訪問首頁（www.google.com.tw）。
2. 點選「隱私權」連結。
3. 檢查「下載 PDF」連結是否顯示於頁面上。第1~2步驟可以透過滑鼠點擊來完成，但第3步就要透過手動方式加入。
使用Selenium IDE錄製即可快速得到如下圖的結果，按下視窗上方的▷按鈕就可以執行這份測試案例並得到測試結果。
Selenium IDE 操作簡單，連工讀生也能很輕易的上手，由於他能自動化快速操作網站的特性，網路上更有人運用Selenium IDE來搶火車票 😂
以上我們對網頁自動化測試完成了一些測試案例規劃與基本實作。
透過網頁自動化測試我們可以模擬出使用者操作網站的方式，進而發現錯誤、增加對產品的信心以及提升使用者體驗。
而客戶/使用者通常不會只有單純使用同一種瀏覽器，
因此下一篇將繼續分享有關於：如何利用 Selenium Grid 在多家瀏覽器中平行測試多個測試案例，以及我自身專案測試的經驗分享。
希望喜歡這篇文章的朋友可以於底下留言互相交流或幫我拍拍手👏，乾蝦大家！
