[[282094]]

【51CTO.com快譯】在每個Web應(yīng)用程序中，作為用戶直接可見的應(yīng)用程序外觀，“前端”包括：圖形化的用戶界面、相應(yīng)的功能、及其整體站點的可用性。我們可以毫不夸張地說：如果前端無法正常工作，您將無法“拉新”網(wǎng)站的潛在用戶。這也正是我們需要對Web應(yīng)用執(zhí)行前端測試的重要原因。

為了確保Web應(yīng)用無論發(fā)生了何種變更之后，其對應(yīng)的前端都能夠與bug“隔離”，我們需要針對前端開展各種測試，主要包括：測試應(yīng)用程序的基本功能、用戶的界面和整體的可用性。此外，如下因素也是驅(qū)動我們進行測試的其他方面：

• 開發(fā)人員對于JavaScript文件的變更，通常會導致前端無法正常工作。
• 哪怕是對CSS進行少量的修改，也可能破壞前端的外觀布局，因此我們需要開展CSS回歸測試。
• 應(yīng)當針對代碼的變更，進行運行性能方面的檢查。

由于前端測試往往會涉及到上述方方面面，而且時常會讓測試人員面臨各種新的挑戰(zhàn)，因此他們需要借助專門的測試工具和框架來提高效率。在本文中，我們將和您討論九種能夠加快測試進程的前端測試工具與框架。

1. Jasmine(https://jasmine.github.io/)

Jasmine是Angular建議開發(fā)人員廣泛使用的、最為流行的前端測試框架之一。它是一個行為驅(qū)動的開發(fā)框架，可被用于測試各種JavaScript代碼。作為一款最為古老的框架，它不但擁有廣泛的社區(qū)支持與資源，而且能夠通過簡潔的語法，幫助開發(fā)人員快速地編寫出不同的測試代碼。而且，由于并不依賴于任何其他的JavaScript框架，因此用戶完全可以通過Jasmine框架，輕松且快速地執(zhí)行各類場景下的前端測試。

2. LambdaTest(https://www.lambdatest.com/)

跨瀏覽器測試是Web應(yīng)用測試的重要組成部分之一。它可確保程序在各種瀏覽器、操作系統(tǒng)、以及設(shè)備上的功能實現(xiàn)和兼容性。不過，相對于手動測試，測試人員往往會用到LambdaTest之類的快速自動化跨瀏覽器測試工具。LambdaTest能夠為2000多種瀏覽器和不同的Web應(yīng)用操作系統(tǒng)的組合提供支持，因此測試人員可以在單獨的系統(tǒng)上對自己的Web應(yīng)用執(zhí)行多種測試。

此外，它的配置并不復(fù)雜，您只需要輸入目標站點的URL，然后在其中選擇特定的瀏覽器、以及對應(yīng)的操作系統(tǒng)即可。此外，它還具有諸如：實時測試、屏幕截圖測試、以及針對Chrome擴展程序、和WordPress插件的外部記錄和播放等功能。

3.Jest(https://jestjs.io/)

倍受Jasmine啟發(fā)的JavaScript測試框架--Jest，是由經(jīng)驗豐富的Facebook團隊開發(fā)和維護的。作為Github上排名第一的測試框架，它擁有22,000顆星。Jest在開發(fā)人群中廣受歡迎的主要原因，得益于它的易用性和無需配置這一屬性。

除此之外，Jest具有簡潔清晰的用戶界面，以及高效的加載性能。在默認情況下，它能夠與探查(spying)及模擬(mocking)程序一起，構(gòu)建出與測試相關(guān)的全局變量。同時，它還提供快照式的測試，并能夠使用內(nèi)置的測試覆蓋率工具來進行傳輸。因此，對于想快速上手前端測試的初學者來說，Jest框架是他們的首選。

4. Selenium(https://dzone.com/articles/comparing-top-10-cross-browser-testing-tools-in-20)

作為一種被廣泛使用的開源式前端測試工具，Selenium能夠在包括Mac、Linux、以及Windows在內(nèi)的多個平臺與瀏覽器上，對Web應(yīng)用程序進行端到端的測試。事實上，它是一個由四個不同的框架所組成的測試套件，其中包括最常被用到的Selenium IDE和Selenium WebDriver。由于支持幾乎所有當前流行的編程語言，因此它允許測試人員以Java、PHP、或C#等不同的語言來編寫測試腳本。

Selenium具有簡潔直觀的界面，能夠讓測試人員更快速地開展測試工作，并提供一定的測試兼容性。另外，作為一款免費工具，它還提供了比某些付費框架更為優(yōu)秀的功能，例如：用戶無需學習Selenium IDE，便可直接使用其測試的記錄和回放功能。

5. Karma(https://karma-runner.github.io/)

如果您正在尋找最適合在瀏覽器、或類似瀏覽器的環(huán)境中運行測試框架，那么Karma便是您的理想選擇。作為一種通用的用例式前端測試框架，Karma受到了前端測試人員的普遍歡迎。同時，它能夠為諸如Jenkins和Travis之類的集成框架，提供24/7的技術(shù)支持。

使用Karma框架，您甚至可以在真實的設(shè)備、或Headless PhantomJS(譯者注：一個基于Webkit的Javascript API)實例上運行測試。更實用的是，如果您使用Karma作為測試框架，那么完全可以使用下面將要提到的Mocha或上述Jasmine，來描述自己的測試。當然，您也可以選擇從終端、IDE或使用LambdaTest之類的服務(wù)，來遠程運行各項測試。

6. Mocha(http://mochajs.org/index.html)

作為一款在當前前端測試市場舉足輕重的框架，Mocha能夠與模擬程序、第三方斷言、以及chai和enzyme之類的探查工具相集成。除了擁有龐大的社區(qū)網(wǎng)絡(luò)之外，Mocha還能夠提供完善的功能選項和完備的文檔資料。

由于能夠與多種擴展程序協(xié)同使用，因此Mocha具有較高的兼容性與靈活性。目前，盡管有一些用戶已經(jīng)著手從Mocha向Jest遷移，但是其龐大的社區(qū)資源，以及豐富的外部用例資源，仍然讓其成為名副其實的常用測試工具之一。

7. Needle(https://needle.readthedocs.io/)

專用于CSS測試的Needle，可以確保目標Web應(yīng)用的各種視覺元素(如字體、CSS、圖像)，能夠在規(guī)定的屏幕尺寸和各種設(shè)備上正常顯示。通過獲取用戶網(wǎng)站某些部分的當前屏幕截圖，它能夠?qū)⑵渑c開發(fā)者預(yù)期的正常屏幕顯示效果進行比較，進而分析Web應(yīng)用的各項功能。此外，測試人員還可以用它來評估CSS值和HTML元素的位置。

8. QUnit(https://qunitjs.com/)

QUnit是一種針對JavaScript應(yīng)用程序的單元測試框架。它最初只是為測試jQuery、jQuery UI和jQuery Mobile而開發(fā)的。不過，后來測試人員經(jīng)常用它來測試包含有JavaScript代碼的前端框架。與Junit等其他單元測試框架類似，QUnit不但能夠?qū)eb瀏覽器和其他客戶端環(huán)境提供支持，而且能夠通過JavaScript的相關(guān)功能，協(xié)助測試人員在瀏覽器中測試代碼的異常處理等能力。

9. YSlow(http://yslow.org/)

作為一款專業(yè)化的工具，YSlow能夠以可視化的方式測試Web應(yīng)用的相關(guān)性能。它通過評估頁面上所有必需的組件(包括JavaScript等組件)，來檢查Web應(yīng)用的運行效率。除了能夠協(xié)助測試人員衡量頁面的綜合性能，YSlow還能夠為他們提供各種有價值的建議。

結(jié)論

眾所周知，Web應(yīng)用的外觀和功能會對企業(yè)網(wǎng)站的訪問量產(chǎn)生重大的影響。一旦出現(xiàn)了某些組件的缺失、甚至是不兼容的現(xiàn)象，用戶很難會有意愿再次造訪該網(wǎng)站。因此，我們需要通過大量的測試，去盡可能多地覆蓋網(wǎng)站前端所涉及到的各種元素。除了上述向您介紹到的各種流行的測試框架和工具之外，業(yè)界還有諸如AVA、CypressChai、以及Test Cafe等其他類型的框架。如果您有時間，可以通過試用來挑選出最適合自己手頭項目的測試工具。

原文標題：Tools and Frameworks for Faster Front End Testing，作者：Nikhil Tyagi

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】