前端測試

最受歡迎的 5 款 Node.js 端到端測試框架

測試，尤爲是自動化測試在現代 WEB 工程中有着很是重要的角色，與交付過程集成良好的自動化測試流程能夠在新版發佈時幫你快速回歸產品功能，也能夠充當產品文檔測試因粒度不一樣又能夠分爲單元測試、接口測試、功能測試。

在 WEB 領域，功能測試亦稱爲端到端測試（End to End Test，簡稱 E2E 測試）。

E2E 測試的經常使用操做以下：

• 打開網頁，跳轉網頁：打開 Github 的首頁；
• 填寫輸入框，提交表單：鍵入搜索詞，提交搜索表單；
• 元素單擊等操做：單擊搜索結果的第一項；
• 元素數量、屬性檢視：確認搜索結果展現了 10 條；
• 頁面運行環境檢視：確認頁面的地址是正確的；

GitHub中比較受歡迎的Node.js E2E測試解決方法：

一、CasperJs:

使用Python編寫，不算是嚴格意義上的原聲Node.js解決方案，但可以使用npm安裝，且可以很好的與Node.js工具鏈組合使用。只能與無界面瀏覽器（Headless Browser）組合使用，好比PhantomJS 和SlimerJS ，其優點是測試運行速度比真實瀏覽器快很多，且不須要在持續集成系統中安裝各類瀏覽器或者某個瀏覽器的不一樣版本。潛在的坑在於，無界面瀏覽器的表現有時和真實瀏覽器不徹底相同，會帶來某些難以排查解決的瀏覽器兼容性問題。不支持ES6/ES7的新語法，除非在運行測試前本身對代碼進行與編譯。但對CoffeeScript有自然的支持。

官網：http://casperjs.org/

github: https://github.com/casperjs/casperjs

二、Protractor:

Protractor 是 Angular 官方正在使用的 E2E 測試框架，能夠說是專門爲 Angular 定製，內置了各類能夠選擇、操做 Angular 元素的便捷方法，若是你的應用基於 Angular 開發，使用它能夠減小不少重複代碼（顯然相似的便利在其餘框架中也有支持）。對於 Angular 的重度使用者，Protractor 會是很是明智的選擇，不一樣於 CasperJS 的是 Protractor 在真實瀏覽器中運行測試代碼。此外，Protractor 內置的頁面加載等待的功能，在 CasperJS 中須要本身設置合理的超時。相比於本文列出的其餘框架，Protractor 的明顯優點是測試用例的組織方式能夠自由使用 Jasmine 或者 Mocha。

官網：http://www.protractortest.org/

github: https://github.com/angular/protractor/

配置文件：https://github.com/angular/protractor/blob/master/lib/config.ts

三、Nightwatch.js：

Nightwatch須要手動在測試代碼中添加合適的等待來保障測試的穩定，而Protractor和TestCafe則提供了內置的支持; 劣勢在於繁瑣的安裝步驟

安裝文檔：http://nightwatchjs.org/gettingstarted/#installation

四、TestCafe

很是年輕但很受開發者歡迎，由於不須要以來WebDriver之類的東西，TestCafe環境只需一鍵便可完成，這意味着，你能夠在任何安裝了瀏覽器應用的物理設備上運行測試。TestCafe支持ES6/ES7語法 。TestCafe 的測試組織方式詳見這裏，選擇符支持也很是強大，支持相似於 jQuery 的靈活異步的選擇符，斷言風格很是相似 Chai，

官網：https://devexpress.github.io/testcafe/

testCafe使用起來真的很是方便，只須要全局安裝一下，無需任何配置

npm install -g testcafe

//ubuntu
sudo npm install -g testcafe

而後就能夠直接寫一個測試文件了，first.js

// 測試的頁面地址是：https://devexpress.github.io/testcafe/example/
import {Selector} from 'testcafe';
fixture `Getting Started` 
    .page `https://devexpress.github.io/testcafe/example/`;

test('My first test', async t => {
    // Test code
})

最後在命令行運行

sudo testcafe firefox first.js

運行結果

五、CodeceptJS

官網：https://codecept.io/ 連接：https://www.jianshu.com/p/b71bbf91021c 來源：簡書 git: https://github.com/wangshijun/top-5-e2e-framework