Contents
前端是 Web 應用程式的門面，包含使用者介面的外觀、 功能和整體的可用性。 潛在客戶在一接觸前端感受到的滿意度將決定其去留。 這就是為什麼前端測試對一個 Web 應用程式非常的重要。
此外，你需要前端測試的理由 :
- JavaScript 檔案變更經常造成前端功能出問題
- CSS 迴歸測試 – 對 CSS 小小的變動就有可能造成前端佈局破損
- 執行表現需要測試
前端的測試看起來似乎很簡單但其實不然，在執行上需要面臨許多挑戰。這也正是測試工具和框架將很會很有幫助。 以下列出幾種工具和框架讓測試幫助你加快完成前端的測試。
Jasmine
Jasmine 是 Angular 廣泛建議開發人員使用的最流行的前端測試框架之一。這是一個行為驅動的開發框架，可用於測試 JavaScript 程式碼。不僅如此，它還是擁有最多資源和社區支持的最古老的框架。它帶有乾淨的語法，可幫助開發人員快速編寫測試。而且，它不依賴於任何其他 JavaScript 框架。使用 Jasmine 框架，你可以非常輕鬆、快速地執行前端測試。
Lambda Test
跨瀏覽器測試是 Web 應用程式關鍵要件，可確保跨各種瀏覽器、OS ( 作業系統 ) 和設備的功能和相容性。手動執行並非易事。因此，測試人員可以選擇以提供更快的 Web 應用程式自動化跨瀏覽器測試而聞名的 LambdaTest。 LambdaTest 為 2000 多種瀏覽器和 Web 應用程式的 OS 組合提供支持，因此測試人員可以在單個系統上快速測試其 Web 應用程式。
此外，它不需要進行太多配置，你只需要提供站點的 URL，然後選擇要在其中執行跨瀏覽器測試的特定瀏覽器和 OS 即可。此外，它還具有各種功能，例如帶有外部 Chrome 延展程式和 WordPress 外掛的實時測試、螢幕截圖測試、記錄和回放功能。
Jest
Jest 是另一個受 Jasmine 啟發的 JavaScript 測試框架。實際上，它已經成為 GitHub 上排名第一的測試框架，擁有 22,000 顆星。 Jest 由 Facebook 經驗豐富的團隊開發和維護。使該框架在開發人員中最受歡迎的原因是它需要零配置，這使它易於使用。
除此之外，Jest 具有方便且清晰的用戶界面，使其性能更高。原始設定下，它與間諜程式( spies )和模擬程式( mocks )一起建構測試全局變量。此外，它還提供快照測試，並使用內置的測試覆蓋率工具進行傳輸。想要開始進行前端測試的初學者應該選擇 Jest 框架，因為它的速度非常快。
Selenium
Selenium 是一種廣泛使用的開源前端測試工具，它有助於跨多個瀏覽器和平台(包括 Mac、Linux、Windows 等）對 Web 應用程式進行端到端測試。事實上，它是一個測試套件，由四個不同的框架組成，其中最常使用 Selenium IDE 和 Selenium WebDriver。它允許測試人員以各種程式語言（例如 Java、PHP、C＃等）編寫測試，因為它支持幾乎每種程式語言。
Selenium 具有簡單直覺的界面給測試人員用起來有更高的相容度，也讓測試人員可以更快地執行測試。而且，它提供了即使在某些付費框架下也無法使用的廣泛功能，例如用於記錄測試的記錄和回放功能，而無需學習 Selenium IDE。
Karma
如果你正在尋找最適合在瀏覽器或類似瀏覽器的環境中運行測試的框架，那麼 Karma 是你的理想選擇。它被認為是一個通用的用例前端測試框架，在前端測試人員中很受歡迎。它為持續整合框架（例如 Jenkins 和 Travis ）提供 24/7 支持。
使用 Karma 框架，你甚至可以在真實設備或無頭 phantomJs 實例上運行測試。更有趣的是，如果你將 Karma 作為測試框架，則可以使用 Mocha 或 Jasmine 描述測試。另外，你可以選擇從終端、IDE 或使用 LambdaTest 之類的服務遠端運行測試。
Mocha
現在，如果有一個統治前端測試市場的框架，那就是 Mocha。它之所以受歡迎，其原因是它與模擬( mocking )、第三方 assertions 以及間諜工具（例如 chai 或 cnzymc）的整合。除了擁有龐大的網絡外，Mocha 還提供完善的選項和出色的文檔資料。
它兼容並且高度靈活，因為它可以與許多延展並用。儘管一些用戶已經開始從 Mocha 遷移到 Jest，但它仍然是最常用的測試工具。另外，社區對 Mocha 有非常大的支持，使用 Mocha 及其用例的外部資源也無窮無盡。
Needle
Needle 專門用於 CSS 的測試。它可以確保 Web 應用程式的視覺元素（如字體/ CSS /圖像）可以在螢幕尺寸和各種設備上正確呈現。它獲取你網站某些部分的螢幕截圖，然後將其與良好的螢幕截圖進行比較。你可以將預期結果與當前結果進行比較，以分析 Web 應用程式的功能。此外，它還允許測試人員評估 CSS 值和 HTML 元素的位置。
QUnit
QUnit 是 JavaScript 應用程式的單元測試框架。它最初是為測試 jQuery、jQuery UI 和 jQuery Mobile 而開發的。測試人員開始使用 JavaScript 程式碼，這使其在前端測試框架中廣為人知。 QUnit 為 Web 瀏覽器和伺服器端的客戶端環境提供支持。而且，它與 Junit 等其他單元測試框架沒有什麼不同，但是它允許你使用 JavaScript 提供的功能，甚至可以幫助測試人員在瀏覽器中測試其程式碼，如異常處理。
YSlow
除了可視化之外，還必須檢查 Web 應用程式的性能，而 YSlow 是涉及 Web 應用程式性能測試的最佳工具。它通過評估頁面上所有必需的組件（包括 JavaScript 組件)來檢查 Web 應用程式的性能。它甚至可以幫助測試人員衡量頁面的性能並為他們提供有價值的建議。
除了上述測試框架和工具之外，還有其他框架，例如 AVA、Cypress、Chai、Test Cafe 等，它們也可幫助 Web 應用程式的前端測試。
結論
Web 應用程式的外觀和功能會對你的網站流量產生重大影響。如果該網站不相容且缺少某些組件，則用戶可能不會重新訪問你的網站。因此，囊括以上所有元素做網站的前端測試至關重要。前端測試涉及大量工作，無法手動完成。因此，我們建議使用最佳的框架和工具來加快 Web 應用程式的前端測試。
文章來源 : Tools and Frameworks for Faster Front End Testing ( 獲作者授權翻譯 )