［前端］前端測試自動化工具 + 頁面性能分析工具 BerserkJS 試用小記

berserkJS 是新形態的前端測試自動化工具 + 頁面性能分析工具 ，同時也是個使用 JS 語法控制的命令行瀏覽器。可用 JS 編寫前端自動測試用例 + 頁面性能分析用例。

已知bug：
當加載的頁面樣式中存在font-size:0;時，因爲QT存在這個【QFont::setPixelSize: Pixel size <= 0(0) 】（官方bug連接 http://qt-project.org/forums/viewthread/17097）問題，致使berserkJS不管在界面模式下仍是command模式下都會直接崩潰，已向做者提交issue。

以上引用來自於 BerserkJS 官方github 的大標題，那麼，BerserkJS究竟好用在哪裏？

Github地址：https://github.com/tapir-dream/berserkJS

環境：Windows

下面我根據我試用的心得給官方的介紹貼上「註釋」

使用案例

無界面瀏覽器測試：在不依賴本地任何瀏覽器的狀況下，運行測試框架，如 QUnit，Capybara, QUnit, Mocha, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework 等。

（確實如此，berserJS自帶command模式，能夠進行無界面的瀏覽器測試）

頁面自動化：能夠無障礙訪問和操做網頁的標準 DOM API 以及頁面所用 JS 變量、對象、屬性等內容。

主要是由於這個實用的API：

App.webview.execScript(sandbox [, argObject <Object>|||])

// 執行當前頁面中的console.log方法打印在控制檯中打印 'hello'
App.webview.execScript(function(msg) {
    console.log(msg);
}, 'hello');

// 執行當前頁面中的console.log方法在控制檯中打印 'width: 100, height:100''
App.webview.execScript(function(size) {
    console.log('width: ' + size.width + ", " + "height: " +  size.height);
}, {width:100, height:300});

屏幕捕獲：以編程方式獲取網頁所有或部份內容，可根據 Selector 截取指定 DOM 元素渲染狀況；包括 CSS，SVG 和 Canvas。可將截取圖片 base64 化，以便發送給遠端服務器保存。

（也有API進行捕獲）

網絡監控：自動化的網絡性能監控，跟蹤頁面全部資源加載狀況並可簡便的將輸出結果格式化爲標準HAR格式。

(var data=JSON.stringify(App.networkData(),undefined,2); 一句話搞定格式化和收集)

頁面性能監控：自動化的頁面渲染監控，可獲取 CPU、 內存使用狀況數據，根據頁面總體狀況可簡便的輸出首次渲染時間、首屏渲染時間等關鍵數據。

(現成API)

工具特性

跨平臺性：基於 Qt 開發，可跨平臺編譯，部署。內置基於 QtWebkit 的瀏覽器環境。源碼需在目標系統中編譯後，可產生運行於 Windows / Linux / Mac 系統的可執行文件。

(界面稍粗糙一點而已....⊙﹏⊙，功能很強大！)

功能性：工具內置 webkit 瀏覽器內核，可響應瀏覽器內核事件回調、支持發送鼠標消息給瀏覽器、包裝瀏覽器網絡請求數據爲JS數據格式、可與瀏覽器內JS作數據交互。

(不得不感嘆webkit的強大~)

開放性：工具將主要操做均包裝爲JS語法與數據格式，採用JS語法包裝，前端工程師可根據API組裝出符合各自預期的檢測功能。

(確實是JS語法，前端躁動.......)

接口性：工具自己支持命令行參數，可帶參調用。API支持處理外部進程讀取輸出流、支持HTTP發送數據。可由 WEB 程序遠程調用後獲取測試的返回結果。

(看源碼可知，確實支持command模式)

標準性：徹底真實的瀏覽器環境內 DOM，CSS，JavaScript，Canvas，SVG 可供使用，絕無仿真模擬。

(這點確實是絕無。)

特色差別

與 PhantomJS 相比具備如下不一樣：

API 簡易: 更直接的 API，如獲取網絡性能數據，僅需 3 行代碼，而非 PhantomJS 的幾十行，且信息量比 PhantomJS 豐富。

API 標準化： 經常使用 API 均採用 W3 規範標準命名，事件處理代碼可重複綁定而不相互覆蓋，能夠無縫兼容 Wind.JS 等異步流程處理庫來解決自動化時異步流程控制問題。

頁面性能信息豐富：具備頁面渲染和 CPU、 內存使用狀況數據獲取能力，可輸出首次渲染時間、首屏渲染時間等頁面性能關鍵數據。

調試便利: 具備 GUI 界面與命令行狀態兩種形式，開發調試期可以使用 GUI 模式定位問題，此模式中可開啓 WebKit 的 Inspector 工具輔助調試頁面代碼與 DOM 。實際運行時可開啓命令行狀態避免自動執行時 GUI 界面干擾。

應用企業

新浪微博：已使用 berserkJS 構建前端性能監測數據分析平臺，防止微博主要產品在不停開發迭代時，頁面性能產生退化。

Cisco: 用於 WebEx 項目的自動化測試

試用示例

咱們的目標：

1. 採集頁面加載過程當中的全部性能數據並序列化以後進行存儲
2. 在界面上顯示加載進度。

根據API用JS完成咱們這次的目標

/*
berserkJS 驗證XXX頁面加載問題
 */
//打開網絡監聽
App.netListener(true);

//打開Tujia
App.webview.open("xxxxxxxxxxxx");

//監聽加載進度
App.webview.addEventListener("loadProgress",function(cur){
    console.log("當前加載進度: %" + cur);
});

//頁面load完成後回調獲取數據
App.webview.addEventListener("load",function(){
    var data=JSON.stringify(App.networkData(),undefined,2);
    //寫入文件
    App.writeFile(App.path + "xxxx.txt",data);

    //關閉監聽
    App.netListener(false);

    //退出App
    //App.close();
});

berserkJS提供了不少能夠監聽的事件類型，知足你各類要求，每一個回調函數的參數不同，看一下官方api就知道了。

上述腳本中，咱們記錄下了頁面加載的數據，利用這個數據咱們能夠作不少事情，開發一個前端性能對比平臺應該就不是什麼難事了。

Run！GO~GO~GO

berserkJS --script=xxx.js

採集下來的序列化數據

{
    "StatusCode": 302,
    "ReasonPhrase": "Found",
    "FromCache": false,
    "url": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "RequestStartTime": 1411711232386,
    "RequestEndTime": 1411711232542,
    "ResponseSize": 0,
    "ResponseDuration": 156,
    "ResponseWaitingDuration": 155,
    "ResponseDownloadDuration": 1,
    "ResponseDNSLookupDuration": 0,
    "ResponseMethod": "GET",
    "UserAgent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.34 (KHTML, like Gecko) Qt/4.8.0 Safari/534.34 berserkJS",
    "Accept": "*/*",
    "Referer": "xxxxxxxxxxxxxxxxxxxxxxxxx",
    "AcceptRanges": "",
    "Age": "",
    "AccessControlAllowOrigin": "",
    "CacheControl": "",
    "Connection": "close",
    "ContentType": "text/html",
    "ContentLength": 0,
    "ContentEncoding": "",
    "ContentLanguange": "",
    "Cookie": "",
    "Date": "Fri, 26 Sep 2014 06:00:32 GMT",
    "ETag": "",
    "Expires": "",
    "IfModifiedSince": "",
    "LastModified": "",
    "Location": "xxxxxxxxxxxxxxxxxxxx",
    "Server": "Apache",
    "SetCookie": "ALLYESID4=08E83680AC344512; expires=Wednesday, 02-Nov-2099 00:00:00 GMT; path=/; domain=allyes.com",
    "P3P": "",
    "Vary": "",
    "TransferEncoding": "",
    "Via": "",
    "XVia": "",
    "XDEBUGIDC": "",
    "XPoweredBy": "",
    "XCache": "",
    "XCacheLookup": "",
    "XCacheVarnish": "",
    "PoweredByChinaCache": "",
    "SINALB": "",
    "width": -1,
    "height": -1,
    "hasKeepAlive": false,
    "hasGZip": false,
    "hasCookie": false,
    "hasCache": false,
    "hasExpires": false,
    "isFromCDN": false,
    "isImgFile": false,
    "isPng": false,
    "isJpg": false,
    "isGif": false,
    "isIco": false,
    "isSvg": false,
    "isCssFile": false,
    "isJsFile": false,
    "isDocFile": true,
    "isAudioFile": false,
    "isVideoFile": false,
    "isFontFile": false,
    "isOtherFile": false,
    "isHttp200": false,
    "isHttp301": false,
    "isHttp302": true,
    "isHttp304": false,
    "isHttp404": false
  },

其餘一些前端性能採集框架推薦

Bucky.js