作者：京東零售 杜興文
随着前端技術的不斷發展和應用程式的日益複雜，前端自動化測試也在不斷演進。
Web 前端 UI 自動化測試發展史可以追溯到 2000 年，當時最早的 Web 應用程式越來越複雜，開發人員開始使用自動化測試工具來確定應用程式的正确性和可靠性。
在早期，自動化測試是通過使用腳本或腳本來模拟使用者的操作來完成的。這些測試工具通常基于 JavaScript 編寫，并且需要對 Web 應用程式的互動方式進行深入了解。
随着 Web 應用程式變得越來越複雜，自動化測試的需求也越來越高。2005 年，Selenium 開始流行，它是一種基于 Java 的自動化測試架構，可以用于模拟使用者操作并進行 Web 應用程式的自動化測試。
Selenium 和其他自動化測試工具的出現使得 Web 前端 UI 自動化測試變得更加容易和高效。随着 Web 應用程式的不斷演變，自動化測試工具也在不斷更新和發展。如今，自動化測試已經成為 Web 應用程式開發過程中不可或缺的一部分，它們可以幫助開發人員更快地發現和修複錯誤，提高應用程式的性能和可靠性。
下面是前端自動化測試經曆的階段:
1. 手動測試：早期的前端開發過程中，開發人員需要手動測試代碼的正确性，這需要大量的時間和精力。
2. 單元測試：随着前端技術的不斷發展，單元測試開始出現。單元測試是一種自動化測試方法，它測試代碼中的最小可測試單元，例如函數或子產品。單元測試可以幫助開發人員更快地發現和修複代碼中的錯誤。
3. 內建測試：內建測試是單元測試的進一步發展，它将單元測試內建到整個應用程式的測試中。這種方法可以更快速地發現整個應用程式中的錯誤。
4. 端到端測試：端到端測試是一種自動化測試方法，它測試從輸入到輸出整個端到端應用程式的過程。這種方法可以幫助開發人員更快地發現和修複應用程式中的整個端到端錯誤。
5. 持續內建和持續傳遞：持續內建和持續傳遞是一種自動化測試方法，它将測試內建到整個開發周期中，包括代碼送出、建構、測試、部署等環節。這種方法可以幫助開發人員更快地傳遞高品質的應用程式。
6. 自動化測試架構和庫：随着前端自動化測試的不斷發展，出現了許多自動化測試架構和庫。這些架構和庫可以幫助開發人員更快速地編寫和運作測試用例，提高測試效率和品質。
7. 人工智能和機器學習：最近這些年來，人工智能技術和機器學習方法逐漸應用于前端自動化測試中。這些方法可以幫助開發人員更快速地識别和修複錯誤，提高測試效率和品質。
總之，前端自動化測試是一個不斷發展的領域，随着前端技術的不斷發展和應用程式的日益複雜，測試人員需要不斷地學習新技術和方法來跟上變化。
同時呢，我們在做前端自動化的時候又會伴随着一些挑戰
編寫 UI 測試腳本可能會很耗時，因為這部分工作需要測試循環之前就要做好。但這份辛苦是值得的；隻不過，UI 腳本本質上是脆弱的。大多數測試是通過 Selenium 測試腳本完成的，這些腳本可以用多種語言編寫，例如 Java、Python 和 C++。
下面列舉一些挑戰事項：
- 重知識。編寫腳本的人必須具有該方面的技術知識和經驗。
- 耗時。由于流程的原因，一項測試可能需要 5 – 10 多分鐘才能運作。加載浏覽器 > 執行任務 > 設定和解析測試 > 資料加載等等。
- 維護。現代應用程式具有動态前端 UI。當同一頁面重新加載時，其中的元素定位器和連結可能會在背景更改它們的定義方式。等待條件可能會破壞測試。如果頁面加載時間更長，則會傳回一個損壞的測試。
- 處理多個錯誤。複雜的場景意味着巨大的資料量。篩選這個可能很麻煩。
- 故障排除。根據問題的頻率和修複它所花費的時間，找出是什麼破壞了測試可能很困難。
- 動态應用。由于靈活開發，Web 應用程式以及應用程式本身一直在發生變化。測試必須從維護角度和結果角度來考慮。
前端自動化測試最佳實踐又是什麼呢，下面列舉一些：
由于使用者界面是使用者觸摸和看到的，是以實作自動化測試以縮短釋出周期至關重要。與開發一樣，所有團隊都可以遵循一些類似的最佳實踐，以確定從他們的自動化投資中獲得豐厚的投資回報。
1. 遵循一緻的命名約定。
2. 檢視哪些測試用例應該自動化。
3. 建立品質測試資料。
4. 保持測試獨立。
5. 不要隻依賴一種類型的測試。
6. 當您實際上應該暫停 UI 測試時，請避免系統休眠。
7. 并非所有測試都必須在所有目标浏覽器中使用。
8. 研究無頭浏覽器測試。
9. 考慮使用 BDD 架構。
10. 使用資料驅動與重複測試。
11. 簡單化測試。
12. 截取螢幕截圖以改進故障調查。
13. 使用正确的自動化測試工具。
在過去的幾年裡，至少出現了十幾種全新的 UI 測試自動化工具。由于每個工具都有自己的重點和政策，是以很難從中選擇。不過您可以參考 10 個必不可少的 Web UI 測試工具，隻需要辨識哪一個有您的團隊所需要的功能。
正如任何一個 UI 測試人員可能會争論的那樣，UI 測試相對簡單，隻要您的 GUI 中沒有任何變化，但問題是…… 界面一直在變化。根據您為 UI 測試選擇的解決方案，不斷變化的條件可能是具有自我修複和 AI 定位器的革命性體驗，也可能是複雜的手動工作流程的嚴重失敗。
以下是一些常用的 Web 前端 UI 自動化測試工具:
1. Parasoft Selenic
2. Katalon
3. Selenium IDE
4. mabl
5. TestIM
6. Functionize
7. Perfecto
8. TestCraft
9. Squish
10. AutonomIQ
1. Parasoft Selenic
Parasoft Selenic 最亮的功能莫過于自我修複和 AI 驅動建議，可幫助團隊有效維護其現有的 Selenium 腳本，無需退出 Selenium 即可從進階 UI 測試穩定性中受益，通過将簡單的單行代碼更改為指令行執行，即可激活适合現有 CI / CD 管道的功能； 一個智能的測試建立工作流程，使測試人員可以使用頁面對象模型快速建立可維護的 Selenium 測試。
優點：
- 智能記錄器可以輕松建立使用頁面對象模型的 Selenium 測試
- 可以對現有的 Selenium 測試執行故障恢複，并在現有的 Selenium 測試中推薦智能定位器
- 通過利用您現有的 Selenium 腳本或建立新的 Selenium 腳本，直接內建到您的 CI/CD 管道中
- 提供測試影響分析技術，自動識别需要在 CI/CD 管道中執行哪些 Selenium 測試以驗證新的代碼更改
- 提供各個級别的客戶支援（不僅僅是企業）
- 支援 BDD。專注于底層 Java（JUnit 和 TestNG）Selenium 測試代碼的維護
缺點：
- 此商業産品沒有免費許可證，但可以免費試用。
- 這個産品還是比較新的。目前版本支援 Java、JUnit 4 & 5、TestNG、Cucumber、Eclipse 和 IntelliJ。未來版本将考慮其他支援。
2. Katalon
katalon 是近幾年來比較流行的自動化測試工具，在自動化測試工具年度評選中僅次于 selenium 位居第二，他與 selenium 有着很多相似的地方又有很多不同，比如說他們有如下相同點：
他們都可以進行網頁自動化測試。katalon 的 recorder 對标于 selenium IDE，都可以進行網頁的自動化腳本錄制
他們都可以導出代碼，其中 katalon 的 recorder 也可以導出 selenium 的代碼
katalon 的 recorder 與 seleniumIDE 的功能有很多相同。
Katalon 的優點：
- 推薦智能定位器
- 使用頁面對象模型（但僅用于在 IDE 中生成和管理的測試）
- 具有故障恢複功能（通過付費插件）
- 能夠導出到多種不同類型的測試腳本
- 支援 BDD。功能檔案執行 Katalon 測試代碼
缺點：
- 雖然您可以将測試導出為 Selenium 和其他測試腳本，但是一旦導出，将失去 Katalon 的所有可用性，并且導出不包括頁面對象模型，這意味着測試變得難以重用和維護
- 他們的客戶支援僅在企業級别可用，而且非常昂貴
- 不直接內建到您現有的執行架構中（使用專有架構，CI 內建可用作插件）
3. Selenium IDE
Selenium IDE 應該說是我們用的最多的 web 自動化測試工具了，Selenium IDE (內建開發環境) 是套件中可用的最簡單的架構。 它用作為 Firefox 插件，是以安裝和使用非常簡單。 通過極少的程式設計知識和接近零的教育訓練，就可以開始使用 Selenium IDE。 對于初學者，要了解 Selenese 指令，還要了解腳本文法，這是一個很好的工具。
它提供了一個 GUI (圖形使用者界面)，用于在 Firefox 浏覽器中記錄必要的操作。選擇在 Firefox 浏覽器目前顯示的頁面上顯示的 UI 元素時，Selenium IDE 運作時的右鍵單擊将根據所選 UI 元素的上下文顯示具有預定義參數的 Selenium 指令清單。這使腳本變得更加容易！
更多請閱讀：https://www.yiibai.com/hotnews/tempa/ide-benefits-limitations.html
優點：
- 很容易安裝和使用。
- 不需要程式設計經驗。
- 具有内置的幫助功能，并顯示所選或輸入的指令的文檔
- 通過顯示資訊和錯誤消息幫助調試。
- 它允許在必要時設定斷點，插入指令和注釋。
- 為擴充提供良好的支援，有助于導出可在 Selenium RC 和 WebDriver 中執行的測試。
缺點：
- 作為 Firefox 插件，它不支援 Mozilla Firefox 以外的任何浏覽器。
- 它沒有明确提供幫助來支援警報，彈出視窗和導航。
- 它不支援監聽器。
- 不支援錯誤處理和資料庫測試。
- 它不能用于測試 iPhone 和 Android 應用程式。
- 不支援從外部檔案讀取和上傳檔案。
- 不支援疊代和條件操作。
// 更多請閱讀：https://www.yiibai.com/hotnews/tempa/ide-benefits-limitations.html
關鍵要點：Selenium IDE 使用簡單，讓使用者能夠快速建立針對其 Web UI 的測試。它對 Selenium 非常友好，對于習慣了該架構的人來說會感覺很便利。
4. mabl
優點：
- 推薦智能定位器（但對使用者來說有點模糊）
- 故障恢複功能運作良好
- SaaS 解決方案；易于通路和入門
- 可擴充的定價模型
缺點：
- 記錄流程時不使用頁面對象模型
- 使用自己的架構，沒有測試腳本的導入導出
- 雖然存在 CI 內建，但您無法将解決方案直接內建到現有架構中
- 如果某些事情沒有按您預期的方式工作，則很難通路 “代碼” 以進行配置或操作
- 對 “流程” 的關注使得建立 “功能驗證”（即帶有斷言的測試）感到尴尬
- 僅 SaaS 解決方案；沒有内部部署，也無法通路公共網際網路中不可用的應用程式
- 沒有對 BDD 的内置支援
5.TestIM
優點：
- 測試非常容易建立，具有直覺的使用者界面
- 推薦智能定位器，以及維護它們的絕佳政策
- 多種測試模式：TestIM 提供了多種測試模式，包括單元測試、內建測試、端到端測試等，可以滿足不同場景和需求的測試需求。
- 自動化測試：TestIM 支援自動化測試，可以使用 Python、Java 等程式設計語言編寫測試腳本，提高測試效率和準确性。
- 測試報告：TestIM 提供了可視化的測試報告，可以實時展示測試結果和缺陷數量，幫助開發人員快速了解測試進展情況。
- 團隊協作：TestIM 支援團隊協作和任務配置設定，可以友善地管理和協調測試任務，提高測試效率和品質。
- 雲環境支援：TestIM 支援雲環境部署和運作，可以友善地在不同裝置和環境中進行測試和部署。
缺點：
- 在他們的測試中不使用頁面對象模型
- 缺乏導入和導出測試腳本的能力
- 使用者無法通路代碼或從 TestIM 中進行測試
- 供應商鎖定架構 —— 腳本在 TestIM 架構中
- 對 BDD 的支援不明确
6. Functionize
優點：
- 出色的測試流程可視化顯示
- 為元素推薦多個定位器
- 簡單易用：Functionize 的文檔和 API 非常清晰易懂，使得初學者可以快速上手。
- 功能強大：Functionize 支援多種 Web 應用程式自動化功能，如請求攔截器、響應攔截器、請求工廠、資料可視化等。
- 可擴充性：Functionize 支援自定義插件和擴充，使得開發人員可以輕松地添加和自定義功能。
- 跨平台支援：Functionize 可以在 Windows、macOS 和 Linux 等多個作業系統上運作，使得開發人員可以在不同的環境下進行開發。
缺點：
- 不能使用頁面對象模型
- 供應商鎖定架構
- 沒有導入和導出測試腳本
- 學習曲線較陡峭：Functionize 的文檔和 API 較為複雜，需要開發人員有一定的 Python 程式設計基礎才能了解和運用。
- 需要大量的配置：Functionize 的功能非常豐富，但這也需要大量的配置和設定，可能會讓開發人員感到繁瑣。
7. Perfecto
優點：
- 使用頁面對象模型（但僅在其生成的測試中）
- 為記錄的 Web 元素提供多個定位器
- 最近引入了故障恢複（雖然有點不清楚它的作用或性能如何）
缺點：
- 測試腳本采用基于 TCL 的專有語言
- 不能導入自己的 Selenium 腳本
- 雖然它們提供 CI 內建，但它并未直接內建到您現有的架構中
- BDD 通過第三方實施支援，Project Quantum
8. TestCraft
優點：
- 使用頁面對象模型（但僅在其生成的測試中）
- 推薦智能定位器，稱為 “智能綁定”
- 功能強大：TestCraft 提供了許多功能，能夠滿足不同類型的測試需求。
- 易于使用：TestCraft 的安裝和使用方法比較簡單，可以快速上手。
- 跨平台支援：TestCraft 可以在不同的作業系統上運作，包括 Windows、macOS 和 Linux 等。
- 支援多種測試語言：TestCraft 可以與多種測試語言內建，包括 Python、Java、c 等。
- 可以內建到其他工具中：TestCraft 可以與許多其他工具內建，例如 Git、Jenkins 等。
缺點：
- 使用專有架構
- 您不能導入 / 導出測試腳本
- 不直接內建到您現有的架構中（CI 內建可用作插件）
- 學習曲線較陡峭：TestCraft 的功能很多，是以需要一定的學習曲線，需要花費一定的時間來了解它的使用方法。
- 複雜度比較高：TestCraft 的使用需要一定的技術能力，如果不熟悉測試理論、方法和工具，可能會感到複雜和困難。
- 費用較高：TestCraft 是一種商業測試架構，需要支付一定的費用。
9. Squish
優點：
- 廣泛的跨平台測試支援
- 強大的光學字元識别 (OCR) 功能
- 獨立于螢幕布局的可靠對象識别和驗證
- 對腳本語言的良好支援
缺點：
- 可能需要改進最終使用者教育訓練和技術支援，盡管大多數回報是有利的
- 向對象映射添加新對象時報告的一些問題
10. AutonomIQ
優點：
- 強大的 NLP、AI 和 ML
- 使用頁面對象模型（但僅在其生成的測試中）
- 通過 Chrome 插件推薦智能定位器
- 在執行過程中故障恢複
- 傳統 BDD 的替代方法（使用專有 NLP）。如果您想做傳統的 BDD（即 Cucumber），可能是個缺點
缺點：
- 使用專有架構
- 您無法導入測試腳本
- 不直接內建到您現有的架構中（CI 內建可用作插件）
- 不完全成熟的技術