cy.intercept() for post endpoints with query parameters

Question

My test cases were flaky because sometimes the test interacts with the element before it appears on the screen, instead of static waits, I decided to use cy.intercept() to wait for the triggered request before interacting with the elements.

I tried it first with a PUT request with some path parameters, and it worked fine and on cypress runner I saw the alias represents the endpoint correctly

 cy.intercept('PUT', `https://api.dev.myapp.com/api/program/v1/program/**`).as('saveProgram');
 cy.wait('@saveProgram');

I tried the same thing for a post endpoint that requires a query params in the URL but it didn't work. In the runner I can't see the alias assigned to endpoint as in the below screenshot.

 cy.intercept('POST', `https://api.dev.myapp.com/api/program/v1/program?clientId=*`)
                    .as('createProgram');
 cy.wait('@createProgram');

Answer 1

There are different ways to match, namely:

• literal string
• glob pattern
• regex pattern
• route matcher object

If one doesn't work, I recommend:

1. simplifying the match pattern, that will make it more permissive, you can later work on building more restrictive version
2. trying a different matching method

In this order.

I also noticed that your example has cy.wait() directly after cy.intercept(). Most likely, you need the action that triggers the request in between these commands. I don't know if you simplified your code just for the sake of this question, or if that really is your code. If the latter, you need to rework it:

cy
  .intercept(...)
  .as('createProgram');

// your other code that triggers the request

cy
  .wait('@createProgram'); // wait for the response

Now, let's see what are some other option you can write that matching pattern:

cy
  .intercept('POST', /\/api\/program\/v1\/program\?clientId=\d+/)
  .as('createProgram');

Try to avoid the full url, it usually only clutters your code and in most cases it is not necessary.

cy
  .intercept('POST', 'program?clientId=*')
  .as('createProgram');

Really permissive, but if you make this work, you can work towards more restrictive matching pattern later (if you need one).

cy
  .intercept({
    pathname: '/api/program/v1/program'
    query: {
      clientId: '36'
    }
  })
  .as('createProgram');

Any of these matched correctly?

There are countless other option in the docs.