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')
         })

Answer 1

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' })