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

Question

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

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

Answer 1

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

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

如果上述方法不起作用，可能是因为该模块正在使用 fetch，而尚无 native 支持。但是，您可以只拥有 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