CODEWITHSUNDEEP
javascriptnode.jsseleniumnightwatch.jsbrowsermob
vibhor
vibhor

Reputation: 181

How to monitor HTTP calls using browsermob-proxy and nightwatch.js?

I am writing testcases using Nightwatch.js framework for SPA application. A requirement came in here we have to monitor HTTP calls and get the performance results for the site. As this could be easily achieved using JMeter.

Using automation testing tool, we can do it by using browsermob-proxy and selenium.

Is it possible to do the same using Nightwatch.js and browsermob-proxy?

Also what are the steps to do to the same.

Upvotes: 5

Views: 3708

Answers (3)

Rajesh
Rajesh

Reputation: 31

Bit late into dance. I managed to integrate browsermob to nightwatch. Here are the detailed steps

  1. Download browsermob proxy https://bmp.lightbody.net/
  2. Open your cmd and go to bin folder and then start browsermob using "browsermob-proxy".

  3. I am assuming you have basic nightwatch setup. You also need mobproxy. Install it from "npm i browsermob-proxy-api"

  4. Create a global hook in nightwatch. Say 'globalmodule.js' and give this file path in globals_path in nightwatch.json

  5. In globalmodule, create global hooks as described in http://nightwatchjs.org/guide#external-globals

  6. In beforeEach hook, add below code: //if you are not under corporate proxy and you dont need to chain to upstream proxy

    var MobProxy = require('browsermob-proxy-api');
    var proxyObj = new MobProxy({'host': 'localhost', 'port': '8080'});

//assuming you started browsermob in 8080 port. That is in step 2.

//if you are working under corporate proxy, you might have to chain your request. This needs editing in browsermob-proxy-api package. Follow steps given at end of this section.

  1. Start proxy on new port

    proxyObj.startPort(port, function (err, data) { if (err) { console.log(err); } else { console.log('New port started') } })

  2. Once we have new port, we have to start our chrome browser in above port so that all browser request are proxied through browsermob.

    proxyObj.startPort(port, function (err, data) { if (err) { console.log(err); } else { console.log('New port started') var dataInJson = JSON.parse(data);

//Step 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"
}
}
}
})

  1. Try to run with above setting, you can check if cmd [created in step2 to confirm request are going via above port. There will be some activiy]

  2. For creating HAR and getting created HAR, browsermob-proxy-api gives excellent api.

    add createHAR.js in any path and mention that path in nightwatch.json[custom_commands section]

    exports.command = function (callback) { var self = this;

    if (!self.options.desiredCapabilities.proxyObj) { console.error('No proxy setup - did you call setupProxy() ?'); }

    this.options.desiredCapabilities.proxyObj.createHAR(this.options.desiredCapabilities.proxyport, { 'captureHeaders': 'true', 'captureContent': 'true', 'captureBinaryContent': 'true', 'initialPageRef': 'homepage' }, function (err, result){ if(err){ console.log(err) }else{ console.log(result) if (typeof callback === "function") { console.log(this.options.desiredCapabilities.proxyObj); console.log(this.options.desiredCapabilities.proxyport); // console.log(result); callback.call(self, result); } } });

    return this; };

then to getHAR, add getHAR.js, add below code.

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;
};

  1. At start of test, createHAR will not have proxyObj, So this step should be executed sync. Wrap that step with browser.perform()

    browser.perform(function(){ browser.createHAR() }) ////some navigation

    browser.perform(function(){ browser.getHAR() })

Note: If you are working behind corporate proxy, You might have to use chain proxy piece which browsermob offers. According to browsermob proxy documentation, get down to api section, -> /proxy can have request parameters "proxyUsername" and "proxyPassword"

In node_modules->browsermob-proxy-api->index.js add below line after line 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

Upvotes: 0

Hikaryu
Hikaryu

Reputation: 317

You can use browsermob-proxy-api just simply download browsermob-proxy server then install by npm command: npm install browsermob-proxy-api --save-dev configure you night watch like this in 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

      }
    },

then download index.js from here: https://github.com/jmangs/node-browsermob-proxy-api and add code from example to your step_definitions if you use gherkin or describe step

Upvotes: 0

EricM
EricM

Reputation: 300

For using Nightwatchjs and browsermob-proxy together, check out this repo, which includes info on the NodeJS bindings for browsermob-proxy and programmatically generating HAR (HTTP Archive) files.

If you're content with just using Nightwatchjs, this repo has code in the tests directory for the following:

  • Custom command to get the requests made so far
  • Custom assertion for checking if a request, given a filter and query string params, exists.

You might have to brush up on how to add custom commands and assertions to your Nightwatch project, but after that you should be set to go!

Upvotes: 1

Related Questions