Introduction to Intercepting Network Requests with Cypress
Cypress helps QA engineers write test cases faster and in a more reliable way, and it’s also very easy and quick to set up. With its user-friendly framework, Cypress has made automation easier in many ways and requires little configuration before you start writing your tests. There is almost always a plugin for nearly any task that traditional frameworks would require users to write themselves.
In a nutshell, Cypress focuses on making Web Automation faster and smarter but oftentimes QA Engineers find themselves needing to perform actions other than the usual flows in UI Automation. Sometimes, you may find yourself in a situation requiring the usage of API calls, or performing complex drag and drop actions, etc. Luckily, Cypress comes with several built in functions and additional support to make automation easier.
Similarly, commonly performing web automation you can verify UI information but can not directly check the API responses. As such, you might come across a situation where you need to periodically test some network requests of your Web Application. Cypress can assist users in testing the entire lifecycle HTTP requests being carried out in the application. You can access the various parts of a HTTP request to fetch data or make assertions. For example, you may need to assert a request’s body, URL, headers, status code etc. It also provides support to mock and stub requests.
This document will provide a brief overview on how to get familiar with intercepting network requests in Cypress. As prerequisites, you must be familiar with the structure of the Cypress framework and how to set it up, along with basic knowledge of HTTP requests. For introductory purposes, we will cover spying on network requests with the intercept() command.
cy.intercept()
The command cy.intercept() is available to use in Cypress version 6.0.0 and above. We use the cy.intercept() command in order to intercept network requests. The intercept() command has a few syntaxes that can be used as per need. Commonly for spying purpose we use the following three:
cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)
As an example, let’s say a call is made when we perform log in, and we want to fetch the access token when a user logs in to a website, which we want to pass on to another request for testing purposes. This can be achieved in a number of ways. It is assumed that the baseURL is stored in cypress.json.
As demonstrated in the example below, you need to add the intercept command before the event triggering it so that it can be found when it is executed. Here, we have a POST request with endpoint ‘login’, and it is declared and saved as the alias loginRequest.
Using request type is optional, but it can be useful when you have multiple requests having the same name that can be differentiated using types.
This alias that we defined can now be referenced through cy.wait().
Now there are multiple ways to access the details of this endpoint. You can use ‘its()’ command to make assertions on response data. In this case, it is asserted that the status code should equal 200.
Another way to perform this is to use the should() command and then use an arrow function to access the returning object. In this example, we need the token in the response. We can do so using the following way:
Similarly, we can add assertions as needed on the response. In the example below, we made an assertion on the success message parameter to ensure that it equals ‘true’. We also saved the access token in a constant and used cy.wrap() to contain that information and then saved it as an alias to use in the tests ahead.
You can now use the token that we stored in the created variable and access it using the declared alias. For example, you can store it as an environment variable and use it in any of the calls in the commands.js file. You can also use the cy.intercept() command directly in the commands.js file for reusability.
Commonly, Cypress is used for UI automation, but with support for calling APIs and intercepting network requests, it is indeed a very helpful tool to cover various areas of your application. With the intercept functionality, you have the option to spy on network requests, and stub responses or allow them to actually hit the server. It is especially useful and comes in handy as it allows the user to control request response bodies, headers, and status.
