Cypress intercept registering too late after button click

Question

And thank you in advance!

I am working on some cypress E2E tests, and having some issues with the intercept. I have a button that upon click, shall send a PUT request to the backend to change the status of a user, for which I have written the test as follows:

it('should test that the PUT request is called upon button click', () => {
    cy.intercept({
        method: 'PUT', 
        url: `/someUrl`,
        query: {
             status: 'Online'
        },
    }).as('changeUserStatus')
    
    cy.get(`button`).click()
    cy.wait('@changeUserStatus').its('response.statusCode').should('eq', 200);
}) 

However, when the button is clicked, the PUT XHR call appears before the wait @changeAgentStatus, which results in the test failing.

I also saw this article: https://glebbahmutov.com/blog/cypress-intercept-problems/#the-intercept-was-registered-too-late and from reading the article have tried to put the cy.intercept block of code in a before(() => {}) block, but am still facing the same problem.

Any help on this is very much appreciated!

Answer 1

If the button is triggering the PUT then the intercept isn't too late.

More likely the matcher is incorrect.

Try with a wildcard that catches anything

cy.intercept({
  method: 'PUT', 
  url: `*`,
  times: 1,           // just the next request
}).as('changeUserStatus')

If that works, you have verified the intercept is in the right place in the test.

Other matcher to try

cy.intercept({
  method: 'PUT', 
  pathname: `/someurl`,    // From docs: Like path, but without query parameters
  query: {
    status: 'Online'
  },
}).as('changeUserStatus')

Ref RouteMatcher

url Full HTTP request URL
path HTTP request path after the hostname, including query parameters
pathname Like path, but without query parameters