title: Cypress wait for API after button click
body: <p>I've made a React app, which all works perfectly and I'm now writing some end to end tests using Cypress.</p>
  
  <p>The React app all works on the same url, it's not got any routes, and api calls from inside the app are handled through button clicks.</p>
  
  <p>The basis of the app is the end user selects some options, then presses filter to view some graphs that are dependant on the selected options.</p>
  
  <pre><code>cy.get('button').contains('Filter').click()
  </code></pre>
  
  <p>When the button is pressed in cypress, it runs the 3 api calls which return as expected, but looking over the cypress docs there is no easy way unless I use inline <code>cy.wait(15000)</code> which isn't ideal, as sometimes they return a lot faster, and sometimes they return slower, depending on the selected options.</p>
  
  <p><strong>Edit 1</strong>
  I've tried using server and route:</p>
  
  <pre><code>cy.server({ method: 'GET' });
  cy.route('/endpoint1*').as('one')
  cy.route('/endpoint2*').as('two')
  cy.route('/endpoint3*').as('three')
  cy.get('button').contains('Filter').click()
  cy.wait(['@one', '@two', '@three'], { responseTimeout: 15000 }) 
  </code></pre>
  
  <p>Which gives me the error:</p>
  
  <pre><code>CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'one'. No request ever occurred.
  </code></pre>
  
  <p><strong>After further investigation</strong></p>
  
  <p>Changing from <code>responseTimeout</code> to just <code>timeout</code> fixed the error.</p>
  
  <pre><code>cy.server({ method: 'GET' });
  cy.route('/endpoint1*').as('one')
  cy.route('/endpoint2*').as('two')
  cy.route('/endpoint3*').as('three')
  cy.get('button').contains('Filter').click()
  cy.wait(['@one', '@two', '@three'], { timeout: 15000 }).then(xhr =&gt; {
    // Do what you want with the xhr object
  }) 
  </code></pre>