使用 Selenium 捕获网络 XHR 日志（带有参数的请求/响应）答案

【问题标题】：Capture Network XHR logs(request/response with parameters) with Selenium使用 Selenium 捕获网络 XHR 日志（带有参数的请求/响应）
【发布时间】：2018-08-31 02:23:33
【问题描述】：

我尝试使用 Selenium webdriver 捕获通常显示请求（方法类型、标题、参数）和响应的网络 XHR 日志（chrome 浏览器），但我只能获取客户端发送到服务器的 api 请求（不带参数），而搜索我发现下面的代码，它只为我提供了 api 请求：-

LogEntries logEntries = driver.manage().logs().get(LogType.BROWSER);
          for (LogEntry entry : logEntries) {
            System.out.println(new Date(entry.getTimestamp()) + " " + entry.getLevel() + " " + entry.getMessage())
}

但我还想获取客户端（浏览器）发送到服务器的所有参数以及响应。 *相同的功能将如何用于 Firefox。

提前致谢！！

【问题讨论】：

我认为 Selenium 只能访问 DOM，因此您需要使用 javascript 做一些奇怪的事情，这会稍微弄脏您的测试用例。 DOM 应该包含正在发送的所有内容...包括 HTML5 存储缓存...但是要获取标头，您需要执行 javascript。这里似乎可能的一件事是进入站点正在使用的框架并对其进行修改以路由/复制请求......因此，如果他们使用 jQuery，例如，将钩子放入返回或写入 DOM 的 AJAX 调用中您需要的信息。

标签： javascript java selenium selenium-webdriver rest-assured-jsonpath

【解决方案1】：

您可以使用 browsermobproxy 。

以下代码 sn-p 捕获所有请求和响应日志。

    // start the proxy
    BrowserMobProxy proxy = new BrowserMobProxyServer();
    proxy.start(0);

    // get the Selenium proxy object
    Proxy seleniumProxy = ClientUtil.createSeleniumProxy(proxy);

    // configure it as a desired capability
    DesiredCapabilities capabilities = new DesiredCapabilities();
    capabilities.setCapability(CapabilityType.PROXY, seleniumProxy);

    // start the browser up
    WebDriver driver = new FirefoxDriver(capabilities);

    // enable more detailed HAR capture, if desired (see CaptureType for the complete list)
    proxy.enableHarCaptureTypes(CaptureType.REQUEST_CONTENT, CaptureType.RESPONSE_CONTENT);

    // create a new HAR with the label "yahoo.com"
    proxy.newHar("yahoo.com");

    // open yahoo.com
    driver.get("http://yahoo.com");

    // get the HAR data
    Har har = proxy.getHar();

任何 har 查看器都可以查看捕获的响应。

【讨论】：

【解决方案2】：

如果您使用像 Axios 这样的库来进行 XHR 调用，您可以利用 request 拦截器 和 response 拦截器 作为中间件来拦截并最终记录每个 XHR 调用它的响应不依赖于无头浏览器界面。

请求示例

client.interceptors.request.use(
  req => {
     // req contains your request data 
  },
  err => Promise.reject(err),
);

响应示例

client.interceptors.response.use(
  response => response, // XHR Response
  error => {
    const originalRequest = error.config; // Error.config contains too the original request
    // ...code
  })

【讨论】：