Learn about Mocking a response in Cypress and XHR properties validation

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024