Current behavior:

It is very common to have the UI display some kind of spinner or loading message while awaiting a response from an API call. Unfortunately, there is currently no way to "pause" a network request so that we can perform assertions before the response is received. The only option is to use a time delay which is flakey and an anti-pattern.

Desired behavior:

To test this in a non-flaky way, it would be nice to be able to inject an assertion after the event that triggers the request but before the response is received. Something like:

cy.route({
  onBeforeResponse: req => cy.get('[data-test-id=spinner]').should('be.visible') 
 ...
})

This would make the state much more deterministic as we would know that the request has been issued but that the response has not yet returned.

It's probably not possible to actually pause a request after it has been issued, but it should be possible to prevent the request from happening until some other event has taken place. For example, this could be implemented internally by wrapping the onBeforeResponse callback in a promise and delaying the request until onBeforeResponse is resolved. That way code like the following would be possible:

cy.route({
  onBeforeResponse: req => cy.get('[data-test-id=spinner]').should('be.visible') 
 ...
}).as('apiCall')
cy.get('#button-that-triggers-apiCall').click()
cy.wait('@apiCall')
cy.get('[data-test-id=spinner]').should('not.be.visible') 

Versions

Cypress: 3.1.5
macOS: Mojave 10.14.2
Chrome: Version 72.0.3626.109 (Official Build) (64-bit)

ref: #687