What is Cypress?
Why Use the Cypress Test Automation Framework?
Mocking APIs helps in situations where we only have the front-end of the appliance or we are contingent third-party APIs. Mocking enables one to decouple the back-end from the front-end which ends up in faster execution of tests. In cypress, we will mock any XHR (XML Http Request) using cy.server() and cy.route(). Lets further deep dive by automating the below scenario â€“
1. attend https://angular.realworld.io/
2. Now there are two XHR requests that are triggered once we open this page â€“ Tags and Article Feed.
3. we'll intercept the tags requests and rather than the first list of Tags, we'll pass two completely new tags â€“ cypress, selenium, and verify them within the UI.
4. we'll intercept the Article Feed request and rather than the first list of articles, we'll pass only one article with the changed username, description, and number of likes then verify all of them in UI.
Step 1: Step 1: Visit https://angular.realworld.io/ and look at the XHR queries in the dev tools.
When we open the tags XHR and check the response, we get the list of tags.
Instead of the above response, we want that whenever the Tags XHR request is called the below response should be passed to the UI.
We will add this to our fixtures files (tags.json).
Similarly, when we open the article feed XHR and check the response, we get the list of articles.
Instead of the above response, we want that whenever the Article XHR request is called the below response should be passed to the UI.
In the aforementioned answer, we are passing only one item, with the username testersdock, and the description This is a test description, and favourites count as ten. We will include this in our fixture files (articlefeed.json).
cy.server() starts a server to begin routing responses to cy.route() and to change the behavior of network requests.
cy.route(â€˜GETâ€™, â€˜**/tagsâ€™, â€˜fixture:tags.jsonâ€™) makes sure that that whenever the Tags api endpoint is called the response that is passed to the UI would be from tags.json fixture file.
cy.route(â€˜GETâ€™, â€˜**/articles*â€™, â€˜fixture:articlefeed.jsonâ€™) makes sure that that whenever the articles api endpoint is called the response that is passed to the UI would be from articlefeed.json fixture file.
Step 3: After successful execution: