使用 Cypress.io 检查传出的浏览器网络调用答案

【问题标题】：Check outgoing browser network calls using Cypress.io使用 Cypress.io 检查传出的浏览器网络调用
【发布时间】：2018-06-12 15:30:16
【问题描述】：

在我们的网站上，当有人单击链接或采取某些操作时，会触发 Omniture 调用。在网络选项卡的 Chrome DevTools 中，您可以看到正在触发的网络请求。

Cypress.io 有没有办法捕获传出的网络请求，以便我们检查/解析 URL？与此等效的是用于 webdriver 设置的 Browsermob 代理。我想使用 Cypress.io 告诉它点击链接，但是我想检查浏览器发出的网络请求。

【问题讨论】：

【解决方案1】：

您应该能够使用cy.route 等待并对网络请求进行断言：

cy.route({
  url:'*omniture.com*',
  method: 'POST',
  onRequest: (xhr) => {
    expect(xhr.request.body).to.eql('somebody')
  }
})

如果上述方法不起作用，可能是因为该模块使用了fetch，它还没有原生支持。但是，您可以通过将cy.visit() 添加到您的cy.visit()，让omniture 回退到 XHR：

cy.visit('example.com', {
  onBeforeLoad: (win) => {
    win.fetch = null
  }
})

或者（如您所述）您可以直接监视`omniture` 全局

您可以在您网站上的全局对象上使用cy.spy() 到spy，这是一个示例：

cy.visit('example.com')
cy.window().should('have.property', 'omnitureRequest').then(win=>{
  cy.spy(win, 'omnitureRequest')
})

（should() 将等待对象出现，然后再尝试对其进行监视，因为 omniture <script> 标记可以加载 asynchronously

【讨论】：

感谢您的信息。进行 Omniture 调用的代码是一个要使用的黑匣子。正如您所说，我们只想监视请求并确保请求的格式正确。 Omniture 对象的属性是一个需要解析的 URL 字符串，所以我们可能仍然需要那个“querystring”节点模块。我们将看看这些想法是否对我们有用。
我的团队有人尝试了 cy.route() 解决方案，问题是该方法在请求中没有返回任何查询参数。我们的 Omniture 请求是一个带有查询参数的 URL。所以，我猜 cy.route() 不考虑查询参数。

【解决方案2】：

我们找到了解决 Omniture 问题的方法。请求 URL 存储在附加到浏览器窗口对象的对象上的 Omniture 属性中。使用 cy.window() 我们可以获取窗口对象并访问此属性并使用节点模块（查询字符串）来解析查询字符串。

我们在 Cypress.io 中找不到任何本地方式来检查网络请求。

【讨论】：