Tutorial 12 – XHR properties validation & Mock response
What you will Learn :
Write cypress code to validate XHR properties
Discuss fake API response scenario
Automate API with Mock response and spy using cypress
Glimpse of xhr calls in our previously executed cypress tests
Write cypress code to validate XHR properties
Before you study this tutorial, please make sure that you have understood the previous article.
Let us write and execute the below code in cypress:
The below is what you will see. On the right hand side, you can see ‘Post successful’.
So basically, cypress is clicking the button on the webpage (cy.get().click()) plus it is simultaneoulsy making the API call.
As you can see on the left hand side, our test passed and all the assertions passed too.
Discuss fake response scenario
Let us say you have completed your icici bank transaction and after the transaction completes, you see some offers from amazon etc on the bank website. This is because, amazon might have exposed it’s APIs on ICICI bank website, see below
When you click ‘KNOW MORE’ link (that you see below amazon), below might come up
When you click ‘SHOP NOW’ link, below might come up
When you click ‘CLICK TO PROCEED’, you are re-directed to amazon website & make your purchases
Now see the below figure again
Do you think that when you click ‘CLICK TO PROCEED’, it would ever result in a 404 error? This would never ever happen (unless there is some known/pre-determined outage). But the thing is, how do we test the 404 error test case? We will never be able to automate this scenario since we might never get 404 error in real time. So how do we test this 404 scenario?
Cypress allows us to test this scenario by using Mock API concept & create a fake response. Let us see that in next topic.
Automate API with Mock response and spying using cypress
Let us launch
https://example.cypress.io/commands/network-requests
Click ‘Update Comment’. You would notice that it is always successful. When we click this button, we never get any error. However, let us suppose that the client has asked us to automate this scenario in such a manner that, when we click ‘Update Comment’, we get an error and we would like to capture that error.
So how do we do this?
Notice the below section on the same website page https://example.cypress.io/commands/network-requests
Notice that cypress has provided a stub for creating a fake response for 404 error
As you can see above, cy.route() will keep listening to PUT method. The status is 404, the response body accepts an error message. We capture the response in putComment.
Note 1: The css selector for ‘Update Comment’ button is .network-put (see highlighted section in above figure)
Note 2: Now, when we are faking the response, an error message would be displayed somewhere below the ‘Update Comment’ button, but we do not know the area where the message would get displayed, so how do we locate it? 
The cypress team has created css selector for us, see below:
.network-put-comment
So let us see how to put this in practice:
Below is the complete code:
Save the code and run the test.
Notice below that we get the ‘mocked’ error message and hence we are able to successfully test the scenario even though the actual application is not throwing any error message when the user clicks ‘Update Comment’ button
If you want, you can change the error message, the same would be reflected when you run the test. So this is how we can mock a test (that was next to impossible to do using other auotmation tools).
Glimpse of xhr calls in our previously executed cypress tests
See below and notice the xhr calls (GET/POST) being made when we run a test in Test runner
So this was all about XHR testing.
Code snippet (XHR_Post.spec.js)
/// <reference types="Cypress" />
describe('XHR POST', () => {
it('POST API', () => {
cy.visit('https://example.cypress.io/commands/network-requests')
cy.server()
cy.route(
{
method: 'POST',
url: '/comments', //POST url request
}).as('postComment')
cy.get('.network-post').click()
cy.wait('@postComment').its('status').should('eq', 201)
cy.get('@postComment').should((xhr) => {
expect(xhr.requestBody).to.include('email')
expect(xhr.requestHeaders).to.have.property('Content-Type')
expect(xhr.responseBody).to.have.property('name', 'Using POST in cy.route()')
})
})
})
Code Snippet (XHR_MockAPITesting.spec.js)
/// <reference types="Cypress" />
describe('XHR', () => {
it('Mock API', () => {
cy.visit('https://example.cypress.io/commands/network-requests')
cy.server()
cy.route(
{
method: 'PUT',
url: 'comments/*',
status: 404,
response:{
error : "Sorry, some server error, visit again later to update your comments"
},
delay: 1000
}).as('UpdateComment')
cy.get('.network-put').click()
cy.get('.network-put-comment').should('contain','Sorry, some server error, visit again later to update your comments')
})
})
Thank you for reading!