22.cy.request command

What is request?

A request is a way to communicate between a server and a browser.
A request is sent to a server and then the server responds with the appropriate data back to the browser, also known as a client.

What is required for a request?

For a request to be made mainly below things needs to be considered:

HTTP Method (method)

There are many types of methods but mainly we use four of them:
1. GET : Indicates that some data is required from a server. This is the default method when we type a URL in a browser.
2. POST : Indicates that the new data needs to be entered into a server and usually has a body.
3. PUT : Indicates that we want to modify the existing data in some way.
4. DELETE : Indicates that we want to delete some existing data.

URL

URL is a path that we usually type in a browser like http://google.com
It can also contain query parameter at the end. In http://google.com?name=bigbinary&location=pune we are adding two query parameters name(bigbinary) and location(pune).

Headers

Header is also known as a metadata for a request like what kind of content is being sent or what kind of content is accepted (visit here for common headers).
It also contains cookies that are stored in a browser.
Using these cookies and headers server identifies which user is sending a request.

Body / Payload

Body is usually a data that we want to send along with the request.
It can be of type string, json object, array or a file(video/audio)

What do we get in response?

Response only contains three main things:

Status

Status is a code that shows whether a response is successful or something went wrong. If request was a success it will return 200 as a status. (visit here for all the available status codes and their meanings)

Response Headers

It is same as a request header but contains the metadata about response.

Body / Payload

Whenever a data needs to be returned from a server, we get it in the form of body/payload.

How to track a request in browser?

There are different ways to get into developer tools in the browser that we might need to look online.
Visit the network tab and refresh the page to view the list of all the requests being sent.
We can locate different information such as headers, payload etc upon clicking on a particular request as shown in the below diagrams:

Analyzing request payload in the Network tab

Analyzing response preview in the Network tab

How do we use it?

In order to make request, cypress gives us a default command called cy.request. Which, by default will not handle authentication for us.
When we authenticate using UI, the authentication details are stored as cookies in the browser.
To pass the authentication details with every request, we need to also include cookies in the request headers, which is done automatically by browser but this will not work in case of manual request made by cy.request.
Therefore, we have introduced a new custom command called apiRequest shown below.

To use this properly, post every login we need to get headers from any request and set its alias as requestHeaders as shown below

Now every request made using apiRequest will use headers created during login.
Apart from this we can use parameter from cypress document to fill other details like body, method and url.
For Example

failOnStatusCode flag is used to tell the Cypress to not fail the test if the status code is not 200. By default, the test will fail if the status code is not 200.

Example of searching and deleting data using request.

Apart from setting alias right after login, first we need to search the id of the data that we want to delete from a server by using below method:

This will return all the data that matches query parameters.
From that data we can segregate Id of the data that we want to delete and make a delete request.

We can combine the above two functions as shown below to search and delete data.

When to use request?

We already discussed how to use the request method in the above section. Now, let's see when to use the request method. Let's say we need to add a test case for editing an article. But we cannot edit an article without creating it. Consider we already have another test case for creating an article. So we don't have to create the article via UI which is a time taking process. Instead, we can create an article via request and then edit it via UI. This will save a lot of time. We will create the article via request in the before hook and then edit it via UI in the it block. Also, at the end of the test, we can delete the article via request in the after hook. This will make sure that the article is deleted after the test is completed.

Note: We should define these request methods as utility functions. So that we can reuse them in other tests as well.

In the above test case, we have used cy.reloadAndWait(2) after calling the cy.apiRequest method. This is because if we do something using the request method, it will get reflected in the UI only after reloading the page. So, we need to reload the page and wait for the network requests to get completed. Here is the implementation of cy.reloadAndWait method:

Now, consider we have to create more data. In that case, we might need to call request methods multiple times. But we don't have to reload the page every time. We need to reload only after completing all the request methods.