Check outgoing browser network calls using Cypress.io

问题

On our site, we have Omniture calls that are fired when someone clicks on a link or takes some action. In Chrome DevTools in the network tab, you can see the network request being fired.

Is there a way for Cypress.io to capture outgoing network requests, so we can inspect/parse the URLs? The equivalent to this would be something like Browsermob proxy for webdriver set ups. I want to use Cypress.io to tell it to click the link, but then I want to check the outgoing network request by the browser.

回答1:

You should be able to use cy.route to wait on and make assertions against network requests:

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

If the above doesn't work, it may be because the module is using fetch, which doesn't have native support yet. However, you can just have omniture fallback to XHR by adding this to your cy.visit():

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

or (as you mentioned) you can spy on the `omniture` global directly

You can use cy.spy() to spy on a global object on your site, here's an example:

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

(the should() will wait for the object to be present before attempting to spy on it, since the omniture <script> tag could load asynchronously

回答2:

We found a workaround to our Omniture problem. The request URL is stored in an Omniture property on an object attached to the browser window object. Using cy.window() we can get the window object and access this property and use a node module (querystring) to parse the query string.

We could not find any native way in Cypress.io to inspect network requests.

来源：https://stackoverflow.com/questions/50820829/check-outgoing-browser-network-calls-using-cypress-io

标签

browser