Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Intercept the same API call multiple times in Cypress

Is it possible to use cy.intercept to intercept the same API call multiple times in the same test? I tried the following:

cy.intercept({ pathname: "/url", method: "POST" }).as("call1")
// ... some logic
cy.wait("@call1")

// ... some logic

cy.intercept({ pathname: "/url", method: "POST" }).as("call2")
// ... some logic
cy.wait("@call2")

I would expect that cy.wait("@call2") would wait for the 2nd time the API gets called. However, the second cy.wait will continue immediately because the first API call is identical to the second one.

like image 657
Bob van 't Padje Avatar asked Sep 05 '25 03:09

Bob van 't Padje


1 Answers

Updated for Cypress v7.0.0 Released 04/05/2021

The change-log shows from this release the intercepts are now called in reverse order

Response handlers (supplied via event handlers or via req.continue(cb)) supplied to cy.intercept() will be called in reverse order until res.send is called or until there are no more response handlers.

Also illustrated in this diagram from the documentation

enter image description here


When you set up identical intercepts, the first one will grab all the calls. But you can wait on the first alias multiple times.

Here's a (reasonably) simple illustration

spec

Cypress.config('defaultCommandTimeout', 10); // low timeout
                                             // makes the gets depend on the waits 
                                             // for success

it('never fires @call2',()=>{

  cy.intercept({ pathname: "/posts", method: "POST" }).as("call1")
  cy.intercept({ pathname: "/posts", method: "POST" }).as("call2")

  cy.visit('../app/intercept-identical.html')
  
  cy.wait('@call1')                               // call1 fires 
  cy.get('div#1').should('have.text', '201')

  cy.wait('@call2')                               // call2 never fires
  cy.wait('@call1')                               // call1 fires a second time
  cy.get('div#2').should('have.text', '201')

})

app

<body>
  <div id="1"></div>
  <div id="2"></div>
  <script>

    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('1').innerText = response.status;
      })
    }, 500)
  
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 2 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('2').innerText = response.status;
      })
    }, 1000)

  </script>
</body>

You can see it in the Cypress log,

command call# occurrence (orange tag)
wait @call1 1
wait @call2
wait @call1 2

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!