資訊專(zhuān)欄INFORMATION COLUMN
摘要：是新形態(tài)的前端測(cè)試自動(dòng)化工具頁(yè)面性能分析工具，同時(shí)也是個(gè)使用語(yǔ)法控制的命令行瀏覽器。實(shí)際運(yùn)行時(shí)可開(kāi)啟命令行狀態(tài)避免自動(dòng)執(zhí)行時(shí)界面干擾。應(yīng)用企業(yè)新浪微博已使用構(gòu)建前端性能監(jiān)測(cè)數(shù)據(jù)分析平臺(tái)，防止微博主要產(chǎn)品在不停開(kāi)發(fā)迭代時(shí)，頁(yè)面性能產(chǎn)生退化。
berserkJS 是新形態(tài)的前端測(cè)試自動(dòng)化工具 + 頁(yè)面性能分析工具 ，同時(shí)也是個(gè)使用 JS 語(yǔ)法控制的命令行瀏覽器?？捎?JS 編寫(xiě)前端自動(dòng)測(cè)試用例 + 頁(yè)面性能分析用例。
已知bug：
當(dāng)加載的頁(yè)面樣式中存在font-size:0;時(shí)，由于QT存在這個(gè)【QFont::setPixelSize: Pixel size <= 0(0) 】（官方bug鏈接 http://qt-project.org/forums/viewthread/17097）問(wèn)題，導(dǎo)致berserkJS無(wú)論在界面模式下還是command模式下都會(huì)直接崩潰，已向作者提交issue。
以上引用來(lái)自于 BerserkJS 官方github 的大標(biāo)題，那么，BerserkJS究竟好用在哪里？
Github地址：https://github.com/tapir-dream/berserkJS
環(huán)境：Windows
下面我根據(jù)我試用的心得給官方的介紹貼上“注釋”
使用案例無(wú)界面瀏覽器測(cè)試：在不依賴(lài)本地任何瀏覽器的情況下，運(yùn)行測(cè)試框架，如 QUnit，Capybara, QUnit, Mocha, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework 等。
（確實(shí)如此，berserJS自帶command模式，可以進(jìn)行無(wú)界面的瀏覽器測(cè)試）
頁(yè)面自動(dòng)化：可以無(wú)障礙訪問(wèn)和操作網(wǎng)頁(yè)的標(biāo)準(zhǔn) DOM API 以及頁(yè)面所用 JS 變量、對(duì)象、屬性等內(nèi)容。
主要是因?yàn)檫@個(gè)實(shí)用的API：
App.webview.execScript(sandbox [, argObject
// 執(zhí)行當(dāng)前頁(yè)面中的console.log方法打印在控制臺(tái)中打印 "hello"
App.webview.execScript(function(msg) {
console.log(msg);
}, "hello");
// 執(zhí)行當(dāng)前頁(yè)面中的console.log方法在控制臺(tái)中打印 "width: 100, height:100""
App.webview.execScript(function(size) {
console.log("width: " + size.width + ", " + "height: " + size.height);
}, {width:100, height:300});
屏幕捕獲：以編程方式獲取網(wǎng)頁(yè)全部或部分內(nèi)容，可根據(jù) Selector 截取指定 DOM 元素渲染情況；包括 CSS，SVG 和 Canvas。可將截取圖片 base64 化，以便發(fā)送給遠(yuǎn)端服務(wù)器保存。
（也有API進(jìn)行捕獲）
網(wǎng)絡(luò)監(jiān)控：自動(dòng)化的網(wǎng)絡(luò)性能監(jiān)控，跟蹤頁(yè)面所有資源加載情況并可簡(jiǎn)便的將輸出結(jié)果格式化為標(biāo)準(zhǔn)HAR格式。
(var data=JSON.stringify(App.networkData(),undefined,2); 一句話搞定格式化和收集)
頁(yè)面性能監(jiān)控：自動(dòng)化的頁(yè)面渲染監(jiān)控，可獲取 CPU、 內(nèi)存使用情況數(shù)據(jù)，根據(jù)頁(yè)面整體情況可簡(jiǎn)便的輸出首次渲染時(shí)間、首屏渲染時(shí)間等關(guān)鍵數(shù)據(jù)。
(現(xiàn)成API)
工具特性跨平臺(tái)性：基于 Qt 開(kāi)發(fā)，可跨平臺(tái)編譯，部署。內(nèi)置基于 QtWebkit 的瀏覽器環(huán)境。源碼需在目標(biāo)系統(tǒng)中編譯后，可產(chǎn)生運(yùn)行于 Windows / Linux / Mac 系統(tǒng)的可執(zhí)行文件。
(界面稍粗糙一點(diǎn)而已....⊙﹏⊙，功能很強(qiáng)大！)
功能性：工具內(nèi)置 webkit 瀏覽器內(nèi)核，可響應(yīng)瀏覽器內(nèi)核事件回調(diào)、支持發(fā)送鼠標(biāo)消息給瀏覽器、包裝瀏覽器網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)為JS數(shù)據(jù)格式、可與瀏覽器內(nèi)JS做數(shù)據(jù)交互。
(不得不感嘆webkit的強(qiáng)大~)
開(kāi)放性：工具將主要操作均包裝為JS語(yǔ)法與數(shù)據(jù)格式，采用JS語(yǔ)法包裝，前端工程師可根據(jù)API組裝出符合各自預(yù)期的檢測(cè)功能。
(確實(shí)是JS語(yǔ)法，前端躁動(dòng).......)
接口性：工具本身支持命令行參數(shù)，可帶參調(diào)用。API支持處理外部進(jìn)程讀取輸出流、支持HTTP發(fā)送數(shù)據(jù)?？捎?WEB 程序遠(yuǎn)程調(diào)用后獲取測(cè)試的返回結(jié)果。
(看源碼可知，確實(shí)支持command模式)
標(biāo)準(zhǔn)性：完全真實(shí)的瀏覽器環(huán)境內(nèi) DOM，CSS，JavaScript，Canvas，SVG 可供使用，絕無(wú)仿真模擬。
(這點(diǎn)確實(shí)是絕無(wú)。)
特點(diǎn)差異與 PhantomJS 相比具有以下不同：
API 簡(jiǎn)易: 更直接的 API，如獲取網(wǎng)絡(luò)性能數(shù)據(jù)，僅需 3 行代碼，而非 PhantomJS 的幾十行，且信息量比 PhantomJS 豐富。
API 標(biāo)準(zhǔn)化： 常用 API 均采用 W3 規(guī)范標(biāo)準(zhǔn)命名，事件處理代碼可重復(fù)綁定而不相互覆蓋，可以無(wú)縫兼容 Wind.JS 等異步流程處理庫(kù)來(lái)解決自動(dòng)化時(shí)異步流程控制問(wèn)題。
頁(yè)面性能信息豐富：具有頁(yè)面渲染和 CPU、 內(nèi)存使用情況數(shù)據(jù)獲取能力，可輸出首次渲染時(shí)間、首屏渲染時(shí)間等頁(yè)面性能關(guān)鍵數(shù)據(jù)。
調(diào)試便利: 具有 GUI 界面與命令行狀態(tài)兩種形式，開(kāi)發(fā)調(diào)試期可使用 GUI 模式定位問(wèn)題，此模式中可開(kāi)啟 WebKit 的 Inspector 工具輔助調(diào)試頁(yè)面代碼與 DOM 。實(shí)際運(yùn)行時(shí)可開(kāi)啟命令行狀態(tài)避免自動(dòng)執(zhí)行時(shí) GUI 界面干擾。
應(yīng)用企業(yè)新浪微博：已使用 berserkJS 構(gòu)建前端性能監(jiān)測(cè)數(shù)據(jù)分析平臺(tái)，防止微博主要產(chǎn)品在不停開(kāi)發(fā)迭代時(shí)，頁(yè)面性能產(chǎn)生退化。
Cisco: 用于 WebEx 項(xiàng)目的自動(dòng)化測(cè)試
試用示例我們的目標(biāo)：
根據(jù)API用JS完成我們此次的目標(biāo)采集頁(yè)面加載過(guò)程中的所有性能數(shù)據(jù)并序列化之后進(jìn)行存儲(chǔ)
在界面上顯示加載進(jìn)度。
/*
berserkJS 驗(yàn)證XXX頁(yè)面加載問(wèn)題
*/
//打開(kāi)網(wǎng)絡(luò)監(jiān)聽(tīng)
App.netListener(true);
//打開(kāi)Tujia
App.webview.open("xxxxxxxxxxxx");
//監(jiān)聽(tīng)加載進(jìn)度
App.webview.addEventListener("loadProgress",function(cur){
console.log("當(dāng)前加載進(jìn)度: %" + cur);
});
//頁(yè)面load完成后回調(diào)獲取數(shù)據(jù)
App.webview.addEventListener("load",function(){
var data=JSON.stringify(App.networkData(),undefined,2);
//寫(xiě)入文件
App.writeFile(App.path + "xxxx.txt",data);
//關(guān)閉監(jiān)聽(tīng)
App.netListener(false);
//退出App
//App.close();
});
berserkJS提供了很多可以監(jiān)聽(tīng)的事件類(lèi)型，滿足你各種要求，每個(gè)回調(diào)函數(shù)的參數(shù)不一樣，看一下官方api就知道了。
上述腳本中，我們記錄下了頁(yè)面加載的數(shù)據(jù)，利用這個(gè)數(shù)據(jù)我們可以做很多事情，開(kāi)發(fā)一個(gè)前端性能對(duì)比平臺(tái)應(yīng)該就不是什么難事了。
Run！GO~GO~GOberserkJS --script=xxx.js采集下來(lái)的序列化數(shù)據(jù)
{
"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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85299.html
摘要：前言在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。 前言 在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。 隨著前后端技術(shù)的更新，越來(lái)越多的前端框架進(jìn)入開(kāi)發(fā)者們的視野，網(wǎng)站的前后分離架構(gòu)越來(lái)越得到開(kāi)發(fā)者們的喜愛(ài)與認(rèn)可。 后端只提供數(shù)據(jù)接口、業(yè)務(wù)邏輯與持久化服...
摘要：前言在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。 前言 在網(wǎng)站頁(yè)面后端渲染的時(shí)代，開(kāi)發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁(yè)面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個(gè)頁(yè)面。 隨著前后端技術(shù)的更新，越來(lái)越多的前端框架進(jìn)入開(kāi)發(fā)者們的視野，網(wǎng)站的前后分離架構(gòu)越來(lái)越得到開(kāi)發(fā)者們的喜愛(ài)與認(rèn)可。 后端只提供數(shù)據(jù)接口、業(yè)務(wù)邏輯與持久化服...
摘要：介紹微信風(fēng)格的，與客戶端體驗(yàn)一致，這個(gè)自己去微信上看吧，略。微信調(diào)試一件套，網(wǎng)頁(yè)授權(quán)模擬集成代理遠(yuǎn)程調(diào)試。這些在微信開(kāi)發(fā)者中心有介紹，略。年微信開(kāi)發(fā)經(jīng)驗(yàn)的人，終于又成為了零年開(kāi)發(fā)經(jīng)驗(yàn)的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活動(dòng)地址：http://fequan.com/2016/ 注意：英文不好，小記也帶有自己...
摘要：你是對(duì)的，因?yàn)槟阈枰獙W(xué)習(xí)。如果你有這些疑問(wèn)，那么請(qǐng)不要擔(dān)心，因?yàn)樵诒疚闹?，我將給出個(gè)令人信服的理由，來(lái)說(shuō)明學(xué)習(xí)的必要性。用于家庭用途的操作系統(tǒng)足以支撐進(jìn)行測(cè)試。由于的使用量持續(xù)增長(zhǎng)，使對(duì)測(cè)試員的需求也在成比例增長(zhǎng)。 翻譯：瘋狂的技術(shù)宅原文：https://www.edureka.co/blog/1... 本文首發(fā)微信公眾號(hào)：前端先鋒歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 如果...
摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問(wèn)我老姚，下同怎么學(xué)前端的問(wèn)題。擼碼聽(tīng)歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒(méi)有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫(kù) 之前加過(guò)一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開(kāi)不起...
閱讀 975·2022-06-21 15:13
閱讀 1857·2021-10-20 13:48
閱讀 1044·2021-09-22 15:47
閱讀 1376·2019-08-30 15:55
閱讀 3132·2019-08-30 15:53
閱讀 528·2019-08-29 12:33
閱讀 724·2019-08-28 18:15
閱讀 3472·2019-08-26 13:58
