Cypress: How to check query params in fetch request?

Question

I am trying to intercept a fetch request and assert that the payload / query params are correct. I have searched the cypress documentation but everything mentioned is setting query params. I for example, need to assert that a fetch request such as https://helloWorld.com/proxy/service has query parameters /payload of ?service=request&layers=demo. Is there a way to do this?

I've tried almost everything but something similar to this is what I'm shooting for. Any ideas?

cy.location("https://helloWorld/proxy/service").should((loc) => {
             expect(loc.search).to.eq('?service=request&layers=demo')
         })

Fody · Answer 1 · 2022-02-18T23:32:58.460

4

Setting up an intercept can check the shape of the request

cy.intercept('https://helloworld.com/proxy/service').as('requestWithQuery')

// trigger the request

cy.wait('@requestWithQuery').then(interception => {
  expect(interception.req.body.query.includes('service=request').to.eq(true)
})

I'm not sure if the assertion above is exactly what you need, but put a console.log(interception.req) to check out what you need to assert.

The intercept can also specify the query

cy.intercept({
  pathname: 'https://helloworld.com/proxy/service',
  query: {
    service: 'request',
    layers: 'demo'
  },
}).as('requestWithQuery')

// trigger the request

cy.wait('@requestWithQuery')

By the way your use of cy.location() is incorrect, you would use

cy.location('search').should('eq', '?service=request&layers=demo')

// or

cy.location().should((loc) => {
  expect(loc.href).to.eq(
    'https://helloworld/proxy/service?service=request&layers=demo'
  )
})

But the app would already have to have navigated to https://helloWorld/proxy/service and it's not clear from your question if that is happening.

Catching "helloWorld/proxy/service"

When your app uses fetch, the URL is converted to lower case.

So sending fetch('https://helloWorld/proxy/service') can be intercepted with

cy.intercept('https://helloworld/proxy/service') // all lower-case url

There's a clue in the Cypress log, the logged fetch is show as being all lower-case characters

(fetch) GET https://helloworld/proxy/service

BaseUrl and intercept

When baseUrl is a different domain from the intercept hostname, you can specify it with an additional option, although in practice I found that it also works with the full URL as shown above.

cy.intercept('/proxy/service*', { hostname: 'https://helloworld' })

edited Feb 18 '22 at 23:32

answered Feb 18 '22 at 18:46

Fody

23,754
3
20
37

thank you for the response. I have tried that in the past but always get an error similar to this. "Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: requestWithQuery. No request ever occurred". Maybe because its a fetch request and not an xhr? – Steve Feb 18 '22 at 19:29
In the past, the old `cy.route()` could only handle xhr. `cy.intercept()` is updated to catch both fetch and xhr. – Fody Feb 18 '22 at 19:39
It's the URL https://helloWorld.com/proxy/service that's not matching. If you have a baseUrl set in Cypress config, try using just the proxy part, `**/proxy/service`. Sometimes finding the right URL to specify is the trickiest part, but once you have found it the above pattern will allow you to check it's query params. – Fody Feb 18 '22 at 19:39
The base url in the json is actually different then the fetch request thats why I'm adding the entire path. Could that be the issue? – Steve Feb 18 '22 at 19:42
for example, the main pages and such are localhost:3000/login etc. but this fetch request I need to intercept is the helloWorld.com/proxy/service – Steve Feb 18 '22 at 19:48
1

I've faced this in my previous company when migrating to a new version. I previously passed a blank string for the base url for the it block, but that no longer worked with the new version. – jjhelguero Feb 18 '22 at 20:13
the lowercase thing still did not solve the issue – Steve Feb 18 '22 at 20:39
I just tested with `baseUrl` (a localhost url) and it work fine, so something is wrong at your end. – Fody Feb 18 '22 at 20:50
`expect(interception.req.body.query.includes('service=request')` => `expect(interception.req.body.query.includes('service=request'))` ? missing an `)` – Andre Elrico Oct 04 '22 at 13:10

Cypress: How to check query params in fetch request?

1 Answers1