我正在使用 Nightwatch.js 框架为 SPA 应用程序编写测试用例。这里有一个要求，我们必须监控 HTTP 调用并获得网站的性能结果。因为这可以使用 JMeter 轻松实现。
使用自动化测试工具，我们可以使用 browsermob-proxy 和 selenium 来完成。
是否可以使用Nightwatch.js 和browsermob-proxy 做同样的事情？
同样的步骤是什么。
【问题讨论】：
标签： javascript node.js selenium nightwatch.js browsermob
你可以使用 browsermob-proxy-api
只需下载 browsermob-proxy 服务器即可
通过 npm 命令安装：npm install browsermob-proxy-api --save-dev
在desiredCapabilites中像这样配置你的守夜人：
'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
如果您使用 gherkin 或 describe 步骤，则将示例中的代码添加到您的 step_definitions
【讨论】：
跳舞有点晚了。我设法将 browsermob 集成到 nightwatch 中。以下是详细步骤
我假设您有基本的夜视设置。您还需要 mobproxy。从“npm i browsermob-proxy-api”安装它
在 nightwatch 中创建一个全局挂钩。说“globalmodule.js”并在 nightwatch.json 的 globals_path 中给出这个文件路径
在全局模块中，按照http://nightwatchjs.org/guide#external-globals中所述创建全局挂钩
在 beforeEach 钩子中，添加以下代码：//如果您不在公司代理下并且不需要链接到上游代理
var MobProxy = require('browsermob-proxy-api');
var proxyObj = new MobProxy({'host': 'localhost', 'port': '8080'});
//假设你在 8080 端口启动了 browsermob。这是第 2 步。
//如果您在公司代理下工作，您可能需要链接您的请求。这需要在 browsermob-proxy-api 包中进行编辑。按照本节末尾给出的步骤进行操作。
在新端口上启动代理
proxyObj.startPort（端口，函数（错误，数据）{ 如果（错误）{ 控制台日志（错误）； } 别的 { console.log('新端口启动') } })
一旦我们有了新的端口，我们必须在上面的端口启动我们的 chrome 浏览器，以便所有浏览器请求都通过 browsermob 代理。
proxyObj.startPort（端口，函数（错误，数据）{ 如果（错误）{ 控制台日志（错误）； } 别的 { console.log('新端口启动') var dataInJson = JSON.parse(data);
//第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-proxy-api 提供了出色的 api。
在任何路径中添加 createHAR.js 并在 nightwatch.json[custom_commands 部分] 中提及该路径
exports.command = 函数（回调）{ var self = this;
如果（！self.options.desiredCapabilities.proxyObj）{ console.error('没有代理设置 - 你调用 setupProxy() 了吗？'); }
this.options.desiredCapabilities.proxyObj.createHAR(this.options.desiredCapabilities.proxyport, { 'captureHeaders'：'真'， 'captureContent'：'真'， 'captureBinaryContent'：'真'， 'initialPageRef': '主页' }，函数（错误，结果）{ 如果（错误）{ 控制台日志（错误） }别的{ 控制台日志（结果） 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.perform(函数(){ browser.createHAR() }) ////一些导航
browser.perform(函数(){ browser.getHAR() })
注意：如果您在公司代理后面工作，您可能必须使用 browsermob 提供的链代理。 根据 browsermob 代理文档，进入 api 部分，-> /proxy 可以有请求参数“proxyUsername”和“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
【讨论】：