berserkJS 是新形态的前端测试自动化工具 + 页面性能分析工具 ,同时也是个使用 JS 语法控制的命令行浏览器。可用 JS 编写前端自动测试用例 + 页面性能分析用例。

已知 bug:

当加载的页面样式中存在 font-size:0; 时,由于 QT 存在这个【QFont::setPixelSize: Pixel size <= 0 (0) 】(官方 issue 链接 https://qt-project.org/forums/viewthread/17097)问题,导致 berserkJS 无论在界面模式下还是 command 模式下都会直接崩溃,已向作者提交该 issue。

以上引用来自于 BerserkJS 官方 github 的大标题,那么,BerserkJS 究竟好用在哪里?

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 均采用 W3C 规范标准命名,事件处理代码可重复绑定而不相互覆盖,可以无缝兼容 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

标签: ,

分类:

更新时间:

留下评论