In Cypress, how do I stub a POST API request with parameters in the body?

Question

I am writing an end-to-end test with Cypress and I would like to stub the network requests which my application makes. Specifically, I would like to stub out multiple POST requests which have parameters in the body and to change my simulated response based on those parameters.

I would like to do something like

cy.route({
  method: "POST",
  url: "/todos/add"
  params: {
    "urgency": 3,
    "stakeholder_id": "SKH001"
  },
  response: "fixture:add1.json",
})

cy.route({
  method: "POST",
  url: "/todos/add"
  params: {
    "urgency": 1,
  },
  response: "fixture:add2.json",
})

But after reading through https://docs.cypress.io/guides/guides/network-requests.html and https://docs.cypress.io/api/commands/route.html#Arguments, I do not see a supported way of checking the arguments in the request being stubbed.

Can I accomplish this by passing a function to the onRequest parameter of cy.route? If so, what would I return from that function which tells cypress "this route actually does not handle this request"?

So you want to return a different fixture based on the body? See the *"Response Functions"* example in https://docs.cypress.io/api/commands/route.html#With-Stubbing - is what you need in the `routeData`? — jonrsharpe, Jan 12 '19 at 17:28
This question [Cypress: Stub response for same route with three different responses](https://stackoverflow.com/questions/53654626/cypress-stub-response-for-same-route-with-three-different-responses) may provide some ideas. — , Jan 12 '19 at 21:36
Excuse my ignorance, do the parameters matter so you can return a different response? — Maccurt, Jan 14 '19 at 13:49
Try this one: https://softans.com/question/in-cypress-how-do-i-stub-a-post-api-request-with-parameters-in-the-body/#comment-481 — GHULAM NABI, Feb 08 '23 at 12:52

score 1 · Answer 1 · answered Nov 14 '21 at 14:49

If your Cypress version is greater than 6, you should refactor to use intercept. Intercept handles params really cleanly and you can assign parts of output to a file using the alias or in the callback.

https://docs.cypress.io/api/commands/route https://docs.cypress.io/api/commands/intercept#Arguments

score 0 · Answer 2 · edited Jun 05 '20 at 00:03

0

cy.route({
  method: "POST",
  url: "/todos/add"
  body: {
    "urgency": 1,
  },
  response: "fixture:add2.json",
})

edited Jun 05 '20 at 00:03

David Buck

3,752
35
31
35

answered Jun 04 '20 at 18:41

Stalinbalraj S

1
3

1

It's really useful in these cases to call out what changed, and provide an explanation for why it's important. In this case, I see that you changed `params` to `body`. But that is really easy to miss without an explanation. Can you update your answer? – Jeremy Caney Jun 05 '20 at 00:22
This is also inaccurate. `body`, according to the official docs, is not available for `route` – Daniel Aug 03 '20 at 20:55

score 0 · Answer 3 · answered Jun 24 '20 at 20:36

0

One option is to use Mirage.js

https://miragejs.com/docs/comparison-with-other-tools/#cypress-route-mocks

See their tutorial: https://miragejs.com/quickstarts/cypress/

answered Jun 24 '20 at 20:36

Andrew Farrell

2,368
2
22
25

score 0 · Answer 4 · answered Mar 09 '21 at 10:35

0

You can use intercept method too.

cy.intercept('POST', <your api end point>, {response:
<your json file path>}).as('postAPI')

answered Mar 09 '21 at 10:35

bucky barns

357
5
17

score 0 · Answer 5 · edited Apr 09 '23 at 16:59

Here is an example for you using intercept. https://docs.cypress.io/api/commands/intercept#Arguments

const handler = (req) => {
  if (req.body.urgency === 3) {
    req.reply({
      statusCode: 200,
      fixture: `your fixture`,
    }) 
  };
  if (req.body.urgency === 1) {
    req.reply({
      statusCode: 200,
      fixture: `your other fixture`,
    }) 
  };
}
cy.intercept('POST', yourURLMatcher, handler)

In Cypress, how do I stub a POST API request with parameters in the body?

5 Answers5

Linked