使用 BrowserMobProxy 配置 WebDriverIO答案

【问题标题】：Configure WebDriverIO with BrowserMobProxy使用 BrowserMobProxy 配置 WebDriverIO
【发布时间】：2016-07-12 05:03:40
【问题描述】：

有没有人有关于如何配置BrowserMobProxy 和WebDriverIO 的正确示例？这样我就可以捕获网络流量。我之前使用过WebDriverJS，它本质上是WebDriverIO 的弃用版本。

【问题讨论】：

标签： javascript node.js selenium webdriver browsermob

【解决方案1】：

您可以使用以下代码来执行此操作。确保您的 browsermob proxy 和 selenium server 正在运行。然后将下面的代码复制粘贴到test.js 文件中，并将其放入webdriverio 安装文件夹中。从 cmd 转到该文件夹并运行 node test.js 。 stuff.har 应该在test.js 所在的位置生成。

var Proxy = require('browsermob-proxy').Proxy
    , webdriverio = require("./node_modules/webdriverio/")
    , fs = require('fs')
    , proxy = new Proxy()
;

proxy.cbHAR('search.yahoo.com', doSeleniumStuff, function(err, data) {

        if (err) {

            console.error('ERR: ' + err);
        } else {

            fs.writeFileSync('stuff.har', data, 'utf8');


        }
});

function doSeleniumStuff(proxy, cb) {

    var browser = webdriverio.remote({
        host: 'localhost'
        , port: 4444
        , desiredCapabilities: { browserName: 'firefox', seleniumProtocol: 'WebDriver', proxy: { httpProxy: proxy } }
    });

    browser
        .init()
        .url("http://search.yahoo.com")
        .setValue("#yschsp", "javascript")
        .submitForm("#sf")
        .end().then(cb);        

}

【讨论】：

【解决方案2】：

如果您只想捕获网络流量，那么还有一种方法可以做到。

Webdriverio 允许您使用Chrome Dev Tools Protocol。

请阅读webdriverio blog

这是有关如何将 chrome 开发工具与 webdriverio 一起使用的示例之一，如果您需要更多帮助，请告诉我。

const { remote } = require('webdriverio')

    let browser;

    (async () => {
        browser = await remote({
            automationProtocol: 'devtools',
            capabilities: {
                browserName: 'chrome'
            }
        })

        await browser.url('https://webdriver.io')

        await browser.call(async () => {
            const puppeteerBrowser = browser.getPuppeteer()
            const page = (await puppeteerBrowser.pages())[0]
            await page.setRequestInterception(true)
            page.on('request', interceptedRequest => {
                if (interceptedRequest.url().endsWith('webdriverio.png')) {
                    return interceptedRequest.continue({
                        url: 'https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png'
                    })
                }

                interceptedRequest.continue()
            })
        })

        // continue with WebDriver commands
        await browser.refresh()
        await browser.pause(2000)

        await browser.deleteSession()
    })().catch(async (e) => {
        console.error(e)
        await browser.deleteSession()
    })

【讨论】：

【解决方案3】：

因为我没有运气使用browsermob proxy 解决这个问题（AFAIK 有一段时间没有更新）

我创建了一个小型 npm 模块来将 selenium 测试捕获为 HAR 文件 - https://www.npmjs.com/package/har-recorder

我采纳了@Raulster24 的建议，并使用 Chrome 开发工具协议 - https://github.com/loadmill/har-recorder/blob/master/index.js 实现了它

【讨论】：