Как отслеживать HTTP-вызовы с помощью browsermob-proxy и nightwatch.js?

Question

Я пишу тестовые сценарии с использованием фреймворка Nightwatch.js для приложения SPA. Здесь появилось требование: мы должны отслеживать HTTP-вызовы и получать результаты производительности для сайта. Как это может быть легко достигнуто с помощью JMeter.

Используя инструмент автоматизации тестирования, мы можем сделать это с помощью browsermob-proxy и selenium.

Можно ли сделать то же самое, используя http://nightwatchjs.org/ и browsermob-proxy?

И какие шаги нужно сделать для того же.

Answer 1

Для совместного использования Nightwatchjs и browsermob-proxy, ознакомьтесь с этим репозиторием, который включает в себя информацию о привязках NodeJS для browsermob-proxy и программно генерирует файлы HAR (HTTP Archive).

Если вы довольны только использованием Nightwatchjs, в этом репозитории есть код в каталоге tests для следующего:

• Пользовательская команда, чтобы получить запросы, сделанные до сих пор
• Пользовательское утверждение для проверки, существует ли запрос с учетом параметров фильтра и строки запроса.

Возможно, вам придется разобраться, как добавлять собственные команды и утверждения в ваш проект Nightwatch, но после этого вы должны быть готовы к работе!

Answer 2

Немного опоздал в танец. Мне удалось интегрировать browsermob в nightwatch. Вот подробные шаги

1. Скачать прокси для браузера mob https://bmp.lightbody.net/
2. Откройте ваш cmd и перейдите в папку bin, а затем запустите browsermob, используя "browsermob-proxy".

3. Я предполагаю, что у вас есть базовая настройка ночных часов. Вам также нужен mobproxy. Установите его из "npm i browsermob-proxy-api"

4. Создайте глобальный хук в Nightwatch. Скажите "globalmodule.js" и укажите этот путь к файлу в globals_path в nightwatch.json

5. В globalmodule создайте глобальные хуки, как описано в http://nightwatchjs.org/guide

6. В крючке beforeEach добавьте следующий код: // если вы не находитесь под корпоративным прокси и вам не нужно подключаться к прокси выше по потоку

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

// при условии, что вы запустили browsermob в порту 8080. Это на шаге 2.

// если вы работаете с корпоративным прокси-сервером, вам, возможно, придется объединить запрос в цепочку. Это необходимо отредактировать в пакете browsermob-proxy-api. Следуйте инструкциям, приведенным в конце этого раздела.

7. Запустите прокси на новый порт

   proxyObj.startPort (порт, функция (err, data) { if (err) { console.log(err); } else { console.log('новый порт запущен') } })

8. Как только у нас будет новый порт, мы должны запустить наш браузер Chrome в указанном выше порту, чтобы все запросы браузера передавались через браузер моб.

   proxyObj.startPort (порт, функция (err, данные) {if (err) {console.log (err);} else {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"
}
}
}
}) 

9. Попробуйте запустить с вышеуказанными настройками, вы можете проверить, был ли cmd [создан на шаге 2 для подтверждения запроса через порт выше. Там будет некоторая активность]

10. Для создания HAR и получения созданного HAR browsermob-proxy-api предоставляет отличные API.

    добавьте createHAR.js в любой путь и укажите этот путь в nightwatch.json[раздел custom_commands]

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

    if (! self.options.desiredCapabilities.proxyObj) {console.error ('Нет настройки прокси - вы вызывали 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);}}});

    верни это; };

затем, чтобы получить 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;
};

11. В начале теста createHAR не будет иметь proxyObj, поэтому этот шаг должен быть выполнен sync. Оберните этот шаг с browser.perform ()

    browser.perform (function () {browser.createHAR ()}) //// некоторая навигация

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

Примечание: если вы работаете за корпоративным прокси, вам, возможно, придется использовать цепочку прокси, которую предлагает браузер моб. Согласно документации прокси-сервера 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

Answer 3

Вы можете использовать browsermob-proxy-api, просто скачав browsermob-proxy server, а затем установить с помощью команды 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 и добавьте код из примера в свой step_definitions если вы используете корнишон или describe шаг