初識 mocha + nightmare 前端單元測試

09-07

來自專欄大全棧技術圈

實現目的：

進行前端 UI 的單元測試，根據實際環境測試瀏覽器請求頁面後元素渲染情況，包括但不局限與如請求後頁面是否渲染完成，點擊彈窗按鈕後是否有彈窗生，與伺服器進行長連接通信判斷消息渲染等，即執行某些事件後，判斷 UI 生成情況是否與預期一致。

1.electron是什麼

概括來說就是『前端開發桌面程序』。個人理解就是，可以在 node 環境下，基於 chrome 瀏覽器將自己寫好的 html 網頁打包發布成別的操作系統可以安裝運行的桌面程序的一個框架。類似 html + node + electron + 一些亂七八糟的打包工具，就可以得到 .exe.dmg.appmasmsi 。如下圖

作為一名專業的原藝術設計專業的學生，原諒我的配圖畫的如此美麗。總之大概意思就是，html 文件 + electron 就可以變身成各個平台的桌面程序，很吊對不對，心動了對不對，不好意思，這個我也不會，而且也不在本篇的內容範圍之內。還有就是如果真的報有如上想法，勸你還是趕快洗洗睡吧，至少睡覺做夢比白日做夢多了個休息的功能。本人對於 electron 這種換殼變身的插件研究的不多，有興趣的童鞋可以去 github 研究一下。在本篇教程中 electron 僅作為基礎支持 nightmare 運行而已，所以只需要知道 electron 是做什麼的即可，其他的不必深究。

2.nightmare 是什麼

Nightmare 是一個基於 Electron 的框架，針對 Web 自動化測試和爬蟲，可以在頁面上模擬用戶的行為觸發一些非同步數據載入，也可以直接訪問 URL 來抓取數據，並且可以設置頁面的延遲時間，所以無論是手動觸髮腳本還是行為觸髮腳本都是輕而易舉的。也是本文的重點把。

3.mocha 是什麼

Mocha 是一個在 Node.js 和瀏覽器上運行的功能豐富的 JavaScript 測試框架，使非同步測試變得簡單而有趣。Mocha 測試以串列方式運行，允許靈活準確的報告，同時將未捕獲的異常映射到正確的測試用例。

前三條總結一下：就是兩個測試框架，懟再一起，合力測試，主要用於非同步生成元素判斷的測試。好了廢話完畢，具體做法走起。

4.初始化安裝

初始化項目:npm init
安裝electron:npm install -g electron
查看是否安裝成功:electron -v
安裝nightmare:npm install -g nightmare
安裝mocha:npm install mocha --save-dev

以上安裝基本完成，剩下的就是編寫代碼了。

5.具體使用方法

1.修改 package.json 文件，添加測試運行命令，文件大概如下：

{ "scripts": { "test": "mocha test.js"//再文件夾下執行npm test即相當於執行mocha test.js,即運行測試文件 }}

2.新建文件 test.js ,用來編寫測試用例，大概編寫方式如下：

use strict;//導入mocharequire(mocha);//導入斷言庫const assert = require(assert);//導入Nightmareconst Nightmare = require(nightmare);//初始化Nightmare對象const nightmare = new Nightmare({ show: true,//是否顯示圖形化界面 openDevTools: {//配置此項後可顯示開發者工具，不配置即不顯示 mode: detach }});//測試套件，表示一組相關的測試，本身是一個函數，第一個參數是測試套件的名稱，第二個是實際執行的函數describe(Visit,function(){ //可以關閉超時事件或者直接設置超時時間，默認兩秒0是關閉 this.timeout(0); //測試用例,表示一個單獨的猜測是，是測試的最小單位，本身是一個函數，第一個參數是測試套件的名稱，第二個是實際執行的函數 it(http,function(done){ //重點nightmare對象 nightmare .goto(http://10.200.42.26:8088/)//打開某網頁 .then(()=> {done();})//成功後調done執行結果 .catch((err)=>{{ console.warn(載入出錯,err); done(err); }});//出錯執行什麼 }); it(http2,function(done){ //同一個nightmare對象 nightmare .wait(#btn)//等待某個元素出現 .then(()=> {done();})//成功後調done執行結果 .catch((err)=>{{ console.warn(載入出錯,err); done(err); }}); }); it(http3,function(done){ //同一個nightmare對象 nightmare .wait(#btn)//等待某個元素出現 .click(#btn)//點擊某個元素 .wait(.a)//等待某個元素出現 .wait(2000)//等待兩秒 .then(()=> {done();})//成功後調done執行結果 .catch((err)=>{{ console.warn(載入出錯,err); done(err); }}); });});

以上文件大概測試的內容為： - 測試打開某網頁是否成功 - 某網頁載入是否成功 - 某網頁點擊事件是否成功等

然後運行npm test即可，運行結果如下：

Nightmare 一些常用的語法摘抄如下：

.viewport(width, height) //瀏覽器窗口大小.goto(url[,headers]) //跳到某鏈接，url為你要跳轉的網站url.back() //後退.forward()//前進.refresh()//刷新.wait(selector) //等待某個dom元素出現，可以添加時間，單位毫秒，也可執行一個方法，return true //即可.inject(type, file) //在頁面上掛載 js/css 文件內容.authentication(user, password) //設置賬號密碼.click(selector) //點擊.mousedown(selector) //按下.mouseup(selector) //抬起.mouseover(selector) //划過.mouseout(selector) //離開.type(selector[,text]) //在selector元素中輸入text文本.insert(selector[, text]) //直接插入文件吧.check(selector) //選擇複選框的元素.uncheck(selector) //取消選擇的元素.select(selector, option) //選怎某個下拉選框.scrollTo(top, left) //滾動到指定位置.viewport(width, height) //窗口大小.evaluate(fn[, arg1, arg2,...]) //可以return請求頁面中的任何內容，然後再then中獲得.screenshot([path][, clip]) //當前頁面截圖，一般為png.html(path, saveType) //當前文件保存為html文件

具體詳細介面請參考 API

初識 mocha + nightmare 前端單元測試

目錄：

1.electron是什麼

2.nightmare 是什麼

3.mocha 是什麼

4.初始化安裝

5.具體使用方法

好了基本此篇到此就已經結束了，比較潦草，大概就是個思路，歡迎交流。