国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

sevi_stuo / 2091人閱讀

摘要:是新形態(tài)的前端測試自動化工具頁面性能分析工具,同時也是個使用語法控制的命令行瀏覽器。實際運行時可開啟命令行狀態(tài)避免自動執(zhí)行時界面干擾。應用企業(yè)新浪微博已使用構建前端性能監(jiān)測數(shù)據(jù)分析平臺,防止微博主要產品在不停開發(fā)迭代時,頁面性能產生退化。

  

berserkJS 是新形態(tài)的前端測試自動化工具 + 頁面性能分析工具 ,同時也是個使用 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

  

環(huán)境:Windows

下面我根據(jù)我試用的心得給官方的介紹貼上“注釋”

使用案例

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

(確實如此,berserJS自帶command模式,可以進行無界面的瀏覽器測試)

頁面自動化:可以無障礙訪問和操作網(wǎng)頁的標準 DOM API 以及頁面所用 JS 變量、對象、屬性等內容。

主要是因為這個實用的API:

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

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

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

屏幕捕獲:以編程方式獲取網(wǎng)頁全部或部分內容,可根據(jù) Selector 截取指定 DOM 元素渲染情況;包括 CSS,SVG 和 Canvas。可將截取圖片 base64 化,以便發(fā)送給遠端服務器保存。

(也有API進行捕獲)

網(wǎng)絡監(jiān)控:自動化的網(wǎng)絡性能監(jiān)控,跟蹤頁面所有資源加載情況并可簡便的將輸出結果格式化為標準HAR格式。

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

頁面性能監(jiān)控:自動化的頁面渲染監(jiān)控,可獲取 CPU、 內存使用情況數(shù)據(jù),根據(jù)頁面整體情況可簡便的輸出首次渲染時間、首屏渲染時間等關鍵數(shù)據(jù)。

(現(xiàn)成API)

工具特性

跨平臺性:基于 Qt 開發(fā),可跨平臺編譯,部署。內置基于 QtWebkit 的瀏覽器環(huán)境。源碼需在目標系統(tǒng)中編譯后,可產生運行于 Windows / Linux / Mac 系統(tǒng)的可執(zhí)行文件。

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

功能性:工具內置 webkit 瀏覽器內核,可響應瀏覽器內核事件回調、支持發(fā)送鼠標消息給瀏覽器、包裝瀏覽器網(wǎng)絡請求數(shù)據(jù)為JS數(shù)據(jù)格式、可與瀏覽器內JS做數(shù)據(jù)交互。

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

開放性:工具將主要操作均包裝為JS語法與數(shù)據(jù)格式,采用JS語法包裝,前端工程師可根據(jù)API組裝出符合各自預期的檢測功能。

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

接口性:工具本身支持命令行參數(shù),可帶參調用。API支持處理外部進程讀取輸出流、支持HTTP發(fā)送數(shù)據(jù)。可由 WEB 程序遠程調用后獲取測試的返回結果。

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

標準性:完全真實的瀏覽器環(huán)境內 DOM,CSS,JavaScript,Canvas,SVG 可供使用,絕無仿真模擬。

(這點確實是絕無。)

特點差異

與 PhantomJS 相比具有以下不同:

API 簡易: 更直接的 API,如獲取網(wǎng)絡性能數(shù)據(jù),僅需 3 行代碼,而非 PhantomJS 的幾十行,且信息量比 PhantomJS 豐富。

API 標準化: 常用 API 均采用 W3 規(guī)范標準命名,事件處理代碼可重復綁定而不相互覆蓋,可以無縫兼容 Wind.JS 等異步流程處理庫來解決自動化時異步流程控制問題。

頁面性能信息豐富:具有頁面渲染和 CPU、 內存使用情況數(shù)據(jù)獲取能力,可輸出首次渲染時間、首屏渲染時間等頁面性能關鍵數(shù)據(jù)。

調試便利: 具有 GUI 界面與命令行狀態(tài)兩種形式,開發(fā)調試期可使用 GUI 模式定位問題,此模式中可開啟 WebKit 的 Inspector 工具輔助調試頁面代碼與 DOM 。實際運行時可開啟命令行狀態(tài)避免自動執(zhí)行時 GUI 界面干擾。

應用企業(yè)

新浪微博:已使用 berserkJS 構建前端性能監(jiān)測數(shù)據(jù)分析平臺,防止微博主要產品在不停開發(fā)迭代時,頁面性能產生退化。

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

試用示例

我們的目標:

  

采集頁面加載過程中的所有性能數(shù)據(jù)并序列化之后進行存儲

在界面上顯示加載進度。

根據(jù)API用JS完成我們此次的目標
/*
berserkJS 驗證XXX頁面加載問題
 */
//打開網(wǎng)絡監(jiān)聽
App.netListener(true);

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

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

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

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

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

berserkJS提供了很多可以監(jiān)聽的事件類型,滿足你各種要求,每個回調函數(shù)的參數(shù)不一樣,看一下官方api就知道了。

上述腳本中,我們記錄下了頁面加載的數(shù)據(jù),利用這個數(shù)據(jù)我們可以做很多事情,開發(fā)一個前端性能對比平臺應該就不是什么難事了。

Run!GO~GO~GO
berserkJS --script=xxx.js
采集下來的序列化數(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

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85299.html

相關文章

  • 前端渲染與SEO優(yōu)化踩坑小記

    摘要:前言在網(wǎng)站頁面后端渲染的時代,開發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個頁面。 前言 在網(wǎng)站頁面后端渲染的時代,開發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個頁面。 隨著前后端技術的更新,越來越多的前端框架進入開發(fā)者們的視野,網(wǎng)站的前后分離架構越來越得到開發(fā)者們的喜愛與認可。 后端只提供數(shù)據(jù)接口、業(yè)務邏輯與持久化服...

    wums 評論0 收藏0
  • 前端渲染與SEO優(yōu)化踩坑小記

    摘要:前言在網(wǎng)站頁面后端渲染的時代,開發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個頁面。 前言 在網(wǎng)站頁面后端渲染的時代,開發(fā)者只需要按照規(guī)范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網(wǎng)站的各個頁面。 隨著前后端技術的更新,越來越多的前端框架進入開發(fā)者們的視野,網(wǎng)站的前后分離架構越來越得到開發(fā)者們的喜愛與認可。 后端只提供數(shù)據(jù)接口、業(yè)務邏輯與持久化服...

    Benedict Evans 評論0 收藏0
  • FEDay 參會小記

    摘要:介紹微信風格的,與客戶端體驗一致,這個自己去微信上看吧,略。微信調試一件套,網(wǎng)頁授權模擬集成代理遠程調試。這些在微信開發(fā)者中心有介紹,略。年微信開發(fā)經(jīng)驗的人,終于又成為了零年開發(fā)經(jīng)驗的人,重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活動地址:http://fequan.com/2016/ 注意:英文不好,小記也帶有自己...

    xcc3641 評論0 收藏0
  • 前端為什么要學習 Selenium

    摘要:你是對的,因為你需要學習。如果你有這些疑問,那么請不要擔心,因為在本文中,我將給出個令人信服的理由,來說明學習的必要性。用于家庭用途的操作系統(tǒng)足以支撐進行測試。由于的使用量持續(xù)增長,使對測試員的需求也在成比例增長。 翻譯:瘋狂的技術宅原文:https://www.edureka.co/blog/1... 本文首發(fā)微信公眾號:前端先鋒歡迎關注,每天都給你推送新鮮的前端技術文章 如果...

    CodeSheep 評論0 收藏0
  • JavaScript精編干貨

    摘要:老姚淺談怎么學鑒于時不時,有同學私信問我老姚,下同怎么學前端的問題。擼碼聽歌,全局控制。 淺析用 js 解析 xml 的方法 由于項目上需要解析 xml,于是各種百度,然后自己總結了下各個主流瀏覽器解析 xml 的方法,只能是很淺顯的知道他的用法,但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫 之前加過一個斗圖群,看到很多經(jīng)典的表情,然后就收藏到了 QQ, 迫于本屌絲開不起...

    Fourierr 評論0 收藏0

發(fā)表評論

0條評論

sevi_stuo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<