Cypress: A Guide to API Testing

What is API Testing?

API, which stands for Application Programming Interface, serves as a means for communication between two distinct software components.

During the development phase of a product, the absence or incomplete state of the user interface (UI) poses a challenge in validating the front-end functionalities. However, API testing provides a solution by enabling the validation of responses expected in the front end as the product takes shape.

This approach proves invaluable in ensuring the reliability and correctness of the software, even before the UI elements are fully implemented.

‍

API supports following HTTP requests - POST, GET, PUT, PATCH and DELETE.

What is Cypress Testing?

Cypress is a JavaScript-based end-to-end testing framework designed for modern web applications. It is specifically built to address the challenges of testing web applications in real-world scenarios.

‍

Cypress is commonly used for conducting functional testing, integration testing, and end-to-end testing of web applications.

Setup Cypress Environment

Refer our article Cypress - Automation tool for modern web for Cypress setup.

Describe and IT Block in Cypress

In Cypress, an "IT block" refers to an individual test case or a test scenario written using the “it” function. 

describe is used to group related it blocks and provides a way to organize your tests.

Syntax for describe block:

describe("Testname", ()=>{ })

Inside the describe block, there are it blocks, each representing a different test scenario.

Syntax for it block:

it("Testcase_title", () =>{ })

Each it block contains a set of Cypress test commands that define the steps to be taken during the test. Following is the example 

cy.request

Syntax: cy.request(method,URL,body)

In the above command, method and body are optional but the URL is mandatory.

• method : This is a required property that specifies the HTTP method you want to use for the request. It can take values like 'GET', 'POST', 'PUT', 'DELETE', etc. By default, Cypress makes this request as GET.
• URL : The URL argument specifies the URL to which the HTTP request will be sent.
• body : The body argument specifies the data that you want to include in the request body. This is relevant for HTTP methods like POST or PUT, where you often need to send data to the server.

Syntax with two arguments:

Syntax with more than two arguments:

Cypress: A Guide to Making HTTP Requests

GET Request:

Sending GET requests with cy.request command. We will make a GET request to the URL .

Syntax for simple GET Request:

Here, .its('status').should('equal', 200); describes the assertion in Cypress which states that when the request gets successfully passed it should give response 200 and when we receive the response 200 that means our request is successfully passed.

POST Request:

POST request is used to create data on the server. Here in POST Request we require three arguments: method, URL and body. method to state the POST method, URL - endpoint where to send request, body is used for the data you want to send to the server.

Syntax for POST Request:

Here, we are sending userId, title and body data to the server. And when we receive the response 201 that means our request is successfully passed.

PUT Request:

PUT request is used to update the data on the server. Here in PUT Request we require three arguments: method, URL and body. method to state the PUT method, URL - endpoint where to send request, body is used for the data you want to update on the server.

Syntax for the PUT Request:

Here, we are updating the userId, title, body and id data on the server. And when we receive the response 200 that means our request is successfully passed.

DELETE Request:

DELETE request is used to delete the data on the server. Here in PUT Request we require two arguments: method and URL. method to state the DELETE method, URL - endpoint where to send request.

Syntax for DELETE Request:

Here, we delete the data on the server. And when we receive the response 200 that means our request is successfully passed.

Dynamic execution of Post calls in Cypress

Previously we have seen how we can make HTTP post requests with static data. Now lets understand how we can make HTTP Post requests with dynamic data. Cypress provides various functions and with the help of them we will create dynamic data.

Syntax for Dynamic POST Request

In above example:

• We create three variables tourist_name, tourist_email, tourist_location to store the data
• Then we use Math.random() function -  This function returns a floating-point, pseudo-random number in the range [0, 1). It generates a random decimal number.
• Then we use, toString() function - The toString method is used to convert the random number generated by Math.random() into a string. The 5 inside the parentheses specifies that the number should be represented in base-5 (quinary) when converted to a string.
• Then we use, substring() function - This method is then applied to the string obtained from toString(5). It takes a substring starting from the 3rd character (index 2) to the end of the string. This is done to remove the decimal point and the integer part of the number, leaving only the fractional part.

Now, assertion will play a role by comparing the values by checking if the 'tourist_name' property in the response body is equal to the 'tourist_name' in the request body, same for ‘tourist_email’ and ‘tourist_location’. When we receive the response 201 that means our request is successfully passed.

‍

How to run the tests?

There are different ways to run the test:

1. Through terminal
2. Through Cypress dashboard

Through terminal

Steps to execute the test through terminal:

1. Go to terminal of VScode/Command Prompt
2. Enter the following command:

npx cypress run --spec cypress/e2e/APITesting/filename.cy.js

Through Cypress dashboard

Steps to execute the test through Cypress dashboard:

1. Go to terminal of VScode/Command Prompt
2. Enter the following command:

            npx cypress open (This will open the cypress application)

3. Select E2E Testing > Select the Browser (Chrome, Firefox, Electron)
4. Select the spec file you want to run to execute your test cases

Conclusion

Cypress API Testing is leveraging the capabilities of the Cypress testing framework to assess and validate the functionality and behavior of APIs (Application Programming Interfaces). Also, it facilitates seamless integration between front-end and API tests. So make use of Cypress for API Testing and improve your testing process.

Happy Testing :)