摘要：是新形态的前端测试自动化工具页面性能分析工具，同时也是个使用语法控制的命令行浏览器。实际运行时可开启命令行状态避免自动执行时界面干扰。应用企业新浪微博已使用构建前端性能监测数据分析平台，防止微博主要产品在不停开发迭代时，页面性能产生退化。
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
// 执行当前页面中的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 项目的自动化测试
试用示例我们的目标：
根据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~GOberserkJS --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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85299.html
摘要：前言在网站页面后端渲染的时代，开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索引擎收录自己网站的各个页面。 前言 在网站页面后端渲染的时代，开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索引擎收录自己网站的各个页面。 随着前后端技术的更新，越来越多的前端框架进入开发者们的视野，网站的前后分离架构越来越得到开发者们的喜爱与认可。 后端只提供数据接口、业务逻辑与持久化服...
摘要：前言在网站页面后端渲染的时代，开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索引擎收录自己网站的各个页面。 前言 在网站页面后端渲染的时代，开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索引擎收录自己网站的各个页面。 随着前后端技术的更新，越来越多的前端框架进入开发者们的视野，网站的前后分离架构越来越得到开发者们的喜爱与认可。 后端只提供数据接口、业务逻辑与持久化服...
摘要：介绍微信风格的，与客户端体验一致，这个自己去微信上看吧，略。微信调试一件套，网页授权模拟集成代理远程调试。这些在微信开发者中心有介绍，略。年微信开发经验的人，终于又成为了零年开发经验的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活动地址：http://fequan.com/2016/ 注意：英文不好，小记也带有自己...
摘要：你是对的，因为你需要学习。如果你有这些疑问，那么请不要担心，因为在本文中，我将给出个令人信服的理由，来说明学习的必要性。用于家庭用途的操作系统足以支撑进行测试。由于的使用量持续增长，使对测试员的需求也在成比例增长。 翻译：疯狂的技术宅原文：https://www.edureka.co/blog/1... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 如果...
摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。 浅析用 js 解析 xml 的方法 由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。 装 X - 建立自己的斗图网站库 之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ， 迫于本屌丝开不起...
阅读 1408·2022-06-21 15:13
阅读 2075·2021-10-20 13:48
阅读 1285·2021-09-22 15:47
阅读 1678·2019-08-30 15:55
阅读 3346·2019-08-30 15:53
阅读 728·2019-08-29 12:33
阅读 948·2019-08-28 18:15
阅读 3701·2019-08-26 13:58
