如何使用browsermob代理和nightwatch.js监控HTTP调用

我正在为SPA应用程序使用Nightwatch.js框架编写测试用例。这里有一个要求，我们必须监视HTTP调用并获得站点的性能结果。因为使用JMeter可以很容易地实现这一点。

使用自动化测试工具，我们可以通过使用browsermob代理和selenium来完成。

是否可以使用Nightwatch.js和browsermob代理进行同样的操作

同样的步骤有哪些。

要同时使用Nightwatchjs和browsermob代理，请查看此repo，其中包括browsermobproxy的NodeJS绑定信息，并以编程方式生成HAR(HTTP Archive(文件。

如果你只满足于使用Nightwatchjs，那么这个repo在tests目录中有以下代码：

自定义命令以获取迄今为止发出的请求
自定义断言，用于检查给定筛选器和查询字符串参数的请求是否存在

你可能需要复习一下如何将自定义命令和断言添加到你的Nightwatch项目中，但之后你应该开始了！

您可以使用browsermob代理api只需下载browsermob代理服务器即可通过npm命令安装：npm install browsermob-proxy-api --save-dev在理想的能力：中这样配置你的守夜

'test_settings': {
    'default': {
      'launch_url': 'http://localhost:3000',
      'screenshots': {
        'enabled': true, // if you want to keep screenshots
        'path': './screenshots' // save screenshots here
      },
      'globals': {
        'waitForConditionTimeout': 30000 // sometimes internet is slow so wait.
      },
      'desiredCapabilities': { // use Chrome as the default browser for tests
        'browserName': 'chrome',
        'proxy': {
          'proxyType': 'manual',
          'httpProxy': 'localhost:10800'
        },
        'acceptSslCerts': true,
        'javascriptEnabled': true, // turn off to test progressive enhancement
      }
    },

然后从这里下载index.js：https://github.com/jmangs/node-browsermob-proxy-api如果您使用小黄瓜或describe步骤，请将示例中的代码添加到step_definitions中

跳舞有点晚了。我设法将browsermob集成到了nightwatch中。以下是的详细步骤

下载browsermob代理https://bmp.lightbody.net/
打开cmd并转到bin文件夹，然后使用"browsermob代理"启动browsermob
我假设你有基本的守夜设置。你还需要mobproxy。从"npm i browsermob proxy api"安装
在守夜中创建一个全局挂钩。说"globalmodule.js"，并在nightwatch.json 中的globals_path中给出该文件路径
在globalmodule中，创建全局挂钩，如中所述http://nightwatchjs.org/guide#external-全球
在beforeEach挂钩中，添加以下代码：//如果您不在公司代理下，并且不需要链接到上游代理

var MobProxy=require('browsermob-proxy-pi'(
var proxyObj=新的MobProxy(｛'host'：'localhost'，'port'：'8080'｝(；

//假设您在8080端口启动了browsermob。这是在步骤2中。

//如果你是在公司代理下工作，你可能需要连锁你的请求。这需要在browsermob代理api包中进行编辑。按照本节末尾给出的步骤进行操作。

在新端口上启动代理

proxyObj.startPort(端口，函数(错误，数据({if(err({console.log(err(；}其他{console.log("已启动新端口"(}})
一旦我们有了新的端口，我们就必须在上面的端口启动chrome浏览器，这样所有浏览器请求都可以通过browsermob代理。

proxyObj.startPort(端口，函数(错误，数据({if(err({console.log(err(；}其他{console.log("已启动新端口"(var dataInJson=JSON.parse(数据(；

//步骤8:

this.test_settings.desiredCapabilities =  {
"browserName": "chrome",
"proxyObj": proxyObj, //for future use
"proxyport": dataInJson.port, //for future use
"proxy": {
"proxyType": "manual",
"httpProxy": "127.0.0.1:" + dataInJson.port,
"sslProxy": "127.0.0.1:" + dataInJson.port //important is you have https site
},
"javascriptEnabled": true,
"acceptSslCerts": true,
"loggingPrefs": {
"browser": "ALL"
}
}
}
})

试着用上面的设置运行，你可以检查cmd[在步骤2中创建以确认请求是否通过上面的端口。会有一些活动]
对于创建HAR和获得创建的HAR，browsermob代理api提供了出色的api。
在任何路径中添加createHAR.js，并在nightwatch.json[custom_commands section]中提及该路径
exports.command=函数(回调({var self=this；
if(！self.options.desiredCapabilities.proxyObj({console.error('没有代理设置-您调用setupProxy((了吗？'(；}
this.options.desiredCapabilities.proxyport，｛"captureHeaders"："true"，'captureContent'：'true'，'captureBinaryContent'：'true'，"initialPageRef"："主页"}，函数(错误，结果({if(err({console.log(错误(}其他{console.log(结果(if(typeof callback==="function"({console.log(this.options.desiredCapabilities.proxyObj(；console.log(this.options.desiredCapabilities.proxyport(；//console.log(结果(；callback.call(self，result(；}}})；
返回此；}；

然后到getHAR，添加getHAR.js，添加以下代码。

var parsedData;
exports.command = function(callback) {
var self = this;
if (!self.options.desiredCapabilities.proxy) {
console.error('No proxy setup - did you call setupProxy() ?');
}
self.options.desiredCapabilities.proxyObj.getHAR(self.options.desiredCapabilities.proxyport, function (err, data) {
console.log(self.options.desiredCapabilities.proxyObj);
console.log(self.options.desiredCapabilities.proxyport);
//console.log(result);
if(err){
console.log(err)
}else{
parsedData = JSON.parse(data)
console.log(parsedData.log.entries)
}
if (typeof callback === "function") {
console.log(self.options.desiredCapabilities.proxyObj);
console.log(self.options.desiredCapabilities.proxyport);
callback.call(self, parsedData);
}
});
return this;
};

在测试开始时，createHAR将不会有proxyObj，所以这个步骤应该同步执行。用browser.perform((完成该步骤
browser.coperform(function({browser.createHAR((})////一些导航
browser.coperform(function({browser.getHAR((})

注意：如果你在公司代理后面工作，你可能需要使用browsermob提供的链代理。根据browsermob代理文档，进入api部分，->/proxy可以有请求参数"proxyUsername"one_answers"proxyPassword">

在node_modules->browsermob proxy-api->index.js中在第22行后的行下添加：

this.proxyUsername  = cfg.proxyUsername || '';
this.proxyPassword = cfg.proxyPassword || '';
this.queryString = cfg.queryString || 'httpProxy=yourupstreamProxy:8080'; //you will get this from pac file
then at line 177, where package is making request '/proxy' to browser.
replace 
path: url
 to
path: url + '?proxyUsername=' +this.proxyUsername + '&proxyPassword=' +  this.proxyPassword + '&' + this.queryString

相关内容

最新更新

热门标签：