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

Check outgoing browser network calls using Cypress.io

在我们的网站上,我们有 Omniture 调用,当有人点击 link 或执行某些操作时会触发这些调用。在 Chrome DevTools 的网络选项卡中,您可以看到正在触发的网络请求。

有没有办法让 Cypress.io 捕获传出的网络请求,这样我们就可以 inspect/parse URL?与此等效的是用于 webdriver 设置的 Browsermob 代理。我想用 Cypress.io 告诉它点击 link,但我想通过浏览器检查传出的网络请求。

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

我们无法在 Cypress.io 中找到任何本机方法来检查网络请求。

您应该能够使用 cy.route 等待并针对网络请求做出断言:

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

如果上述方法不起作用,可能是因为该模块正在使用 fetch,它还没有原生支持。但是,您可以 omniture 通过 将其添加到您的 cy.visit():

来回退到 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