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!

score 1 · Answer 1 · answered Mar 23 '22 at 08:47

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

Cypress intercept registering too late after button click

1 Answers1