使用 webdriverio 和 browsermob 从 BrowserStack 捕获 HAR

Question

我正在尝试使用 BrowserMob 代理来为使用 WebdriverIO 在 BrowserStack 上运行的测试捕获 HAR

到目前为止，我有以下代码

conf/local.conf.js

const browserstack = require('browserstack-local');
const Proxy = require('browsermob-proxy').Proxy;
const fs = require('fs');

exports.config = {
    user: process.env.BROWSERSTACK_USERNAME || 'shubhamjindal2',
    key: process.env.BROWSERSTACK_ACCESS_KEY || 'PyNWYKCcnwxt4XMCP52s',
    proxyHost: process.env.PROXY_HOST || 'localhost',
    proxyPort: process.env.PROXY_PORT || '9090',

    updateJob: false,
    specs: [
        './test/specs/localTest.js'
    ],
    exclude: [],

    capabilities: [{
        'os': 'Windows',
        'os_version': '10',
        'browserName': 'Chrome',
        'browserVersion': '62.0',
        'browserstack.local': 'true',
        'browserstack.video': 'false',
        'seleniumProtocol': 'WebDriver'
    }],
    logLevel: 'warn',
    coloredLogs: true,
    screenshotPath: './errorShots/',
    baseUrl: '',
    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,
    host: 'hub.browserstack.com',

    before: function() {
        const chai = require('chai');
        global.expect = chai.expect;
        chai.Should();
    },
    framework: 'mocha',
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },

    // Code to start browserstack local before start of test
    onPrepare: function(config, capabilities) {
        console.log("Connecting local");
        exports.proxy = new Proxy();

        exports.proxy.start(exports.config.proxyPort, function(err, data) {
            if (!err) {
                exports.proxy.startHAR(exports.config.proxyPort, 'dummy', true, true);
            } else {
                console.error(err);
            }
        });

        capabilities['proxy'] = {
            httpProxy: exports.proxy,
        };

        const bsLocalArgs = {
            'key': exports.config.key,
            'forcelocal': true,
            'forceproxy': true,
            'force': true,
            'v': true,
            '-local-proxy-host': exports.config.proxyHost,
            '-local-proxy-port': exports.config.proxyPort,
        };

        return new Promise(function(resolve, reject) {
            exports.bsLocal = new browserstack.Local();
            exports.bsLocal.start(bsLocalArgs, function(error) {
                if (error) return reject(error);

                console.log('Connected. Now testing...');
                resolve();
            });
        });
    },

    // Code to stop browserstack local after end of test
    onComplete: function(exitCode, config, capabilities, results) {
        exports.bsLocal.stop();

        exports.proxy.getHAR(exports.config.proxyPort, function(err, resp) {
            console.log(err, resp);
            if (!err) {
                console.log('har saved at output.har');
                fs.writeFileSync('test/diagnostics/output.har', resp, 'utf8');
            } else {
                console.err('Error getting HAR file: ' + err);
            }
            exports.proxy.stop(exports.config.proxyPort);
        });
    },
}

tests/spec/localTest.js

describe('BrowserStack Local Testing', function() {
    it('can check tunnel working', function() {
        browser.url('http://localhost:8083');
    });
});

我被困在 onComplete 钩子中从代理获取 HAR，但我无法 想办法获得 HAR。

这是正确的配置吗？如何通过回调结束浏览器，以便代理能够捕获 HAR？

我正在使用 wdio cli 运行测试

./node_modules/.bin/wdio conf/local.conf.js

Answer 1

如果我理解正确，出于某些原因，您需要为 BrowserStack 上运行的会话收集 HAR。 如果是这样，那么 BrowserStack 提供了网络日志的这一功能，您可以将其作为 HAR 文件获取，并包含您将从 browser-mob 获取的所有网络信息。 您可以使用他们的 API 获取网络日志。

检索自动化网络日志

每个会话的网络日志都以 HAR（HTTP 存档）格式提供给您，并且可以使用 REST API 进行检索。

curl -u "USERNAME:ACCESS_KEY" https://api.browserstack.com/automate/builds/<build-id>/sessions/<session-id>/networklogs

仅供参考，请从您发布的代码中编辑您的 BrowserStack 用户名和访问密钥。

Answer 2

我了解到您正在使用 Webdriver IO 来执行测试。可以参考 BrowserStack 的示例项目： https://github.com/browserstack/webdriverio-browserstack

通过将 onPrepare 函数替换为下面共享的函数，在 local.conf.js 文件中进行如下更改。

我正在使用 Charles Proxy 来捕获网络流量，它对我有用。 确保按照 Readme.md 文件中提到的步骤进行操作。

onPrepare: function (config, capabilities) {
    console.log("Connecting local");
    return new Promise(function(resolve, reject){
      exports.bs_local = new browserstack.Local();
      exports.bs_local.start({'key': exports.config.key,'forcelocal': true, 'verbose': 'true','force':'true','proxyHost': '127.0.0.1', 'proxyPort': '8888','forceProxy': true }, function(error) {
        if (error) return reject(error);
        console.log('Connected. Now testing...');

        resolve();
      });
    });
  },