漫談前端自動化測試演進之路及測試工具分析

京东云开发者發表於2023-04-19
前端

作者：京東零售 杜興文

隨著前端技術的不斷髮展和應用程式的日益複雜，前端自動化測試也在不斷演進。

Web 前端 UI 自動化測試發展史可以追溯到 2000 年，當時最早的 Web 應用程式越來越複雜，開發人員開始使用自動化測試工具來確保應用程式的正確性和可靠性。

在早期，自動化測試是透過使用指令碼或指令碼來模擬使用者的操作來完成的。這些測試工具通常基於 JavaScript 編寫，並且需要對 Web 應用程式的互動方式進行深入瞭解。

隨著 Web 應用程式變得越來越複雜，自動化測試的需求也越來越高。2005 年，Selenium 開始流行，它是一種基於 Java 的自動化測試框架，可以用於模擬使用者操作並進行 Web 應用程式的自動化測試。

Selenium 和其他自動化測試工具的出現使得 Web 前端 UI 自動化測試變得更加容易和高效。隨著 Web 應用程式的不斷演變，自動化測試工具也在不斷更新和發展。如今，自動化測試已經成為 Web 應用程式開發過程中不可或缺的一部分，它們可以幫助開發人員更快地發現和修復錯誤，提高應用程式的效能和可靠性。

下面是前端自動化測試經歷的階段:

  1. 手動測試：早期的前端開發過程中，開發人員需要手動測試程式碼的正確性，這需要大量的時間和精力。

2.單元測試：隨著前端技術的不斷髮展，單元測試開始出現。單元測試是一種自動化測試方法，它測試程式碼中的最小可測試單元，例如函式或模組。單元測試可以幫助開發人員更快地發現和修復程式碼中的錯誤。

  1. 整合測試：整合測試是單元測試的進一步發展，它將單元測試整合到整個應用程式的測試中。這種方法可以更快速地發現整個應用程式中的錯誤。

  2. 端到端測試：端到端測試是一種自動化測試方法，它測試從輸入到輸出整個端到端應用程式的過程。這種方法可以幫助開發人員更快地發現和修復應用程式中的整個端到端錯誤。

  3. 持續整合和持續交付：持續整合和持續交付是一種自動化測試方法，它將測試整合到整個開發週期中，包括程式碼提交、構建、測試、部署等環節。這種方法可以幫助開發人員更快地交付高質量的應用程式。

  4. 自動化測試框架和庫：隨著前端自動化測試的不斷髮展，出現了許多自動化測試框架和庫。這些框架和庫可以幫助開發人員更快速地編寫和執行測試用例，提高測試效率和質量。

  5. 人工智慧和機器學習：最近這些年來，人工智慧技術和機器學習方法逐漸應用於前端自動化測試中。這些方法可以幫助開發人員更快速地識別和修復錯誤，提高測試效率和質量。

總之，前端自動化測試是一個不斷髮展的領域，隨著前端技術的不斷髮展和應用程式的日益複雜，測試人員需要不斷地學習新技術和方法來跟上變化。

同時呢，我們在做前端自動化的時候又會伴隨著一些挑戰

編寫 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 整合可用作外掛）
  • 不完全成熟的技術

相關文章