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