API Testing with Cypress

If you have worked on automation testing of a web based application, there are chances that you would have done both UI and web service automation and you would have achieved those using different tool sets.

However adopting such approaches may have their own fallacies in the form of more bootstrapping effort or maintenance overhead. Therefore it may serve us well if we can use same tool set to automate both layers wherever possible.

I did have similar experience when we selected cypress for both UI and api automation in my project. In this post, I would like to walk you through how to perform api automation using cypress. This has been an often overlooked feature as people view cypress as a UI-only automation tool.

Cypress Installation:

npm install cypress

We can do lot of things like stubbing using cypress as it runs inside the browser.Cypress has lot of commands to perform operations, but as we want to do API testing we use the command called request().

We can call any method type from cypress request command, below is the sample code to call GET API.

In the above example, method is type of the method we are calling, url is the endpoint, you can pass the token in auth and you have to pass query parameters in qs options. Finally, we are calling request command by providing options.

the same way we can call POST method as well, below is the example

Now we are able to call any end point, and from calling any endpoint we will get some sort of response. The next step in our automation will be asserting the response , Cypress use chai library for assertions. In below code we are asserting the status and name property in the response body.

If you observe we have hard coded the input parameters and expected value which will not work in long run. It is better we separate that test data from the tests, I am gonna create config.json file and put my test data. Usually we will put the test data in fixtures folder of cypress and read from there, below is my test data.

{
    "url": "https://localhost:3030/employee",
    "id": 2,
    "name": "cypress"
}

Now we have config file, let’s read from the config file and pass to our request command, below is our spec now after doing that.

Custom Commands:

If you observe in the above test cy.getToken() is actually not a cypress command but that is custom command that we wrote, yes we can create custom commands in cypress.

Using custom commands we can override the cypress existing commands or we can create new commands, let’s create new custom command for our GET /employee end point, we have to create custom commands in cypress commands.js file.

Now we have created custom command and we can call that custom commands in our actual tests, let’s rewrite our test using newly created custom command

One thing we have to note is Cypress always expects status as 2XX or 3XX otherwise it make the test as fail, so if you are testing any negative scenario and expecting status is other than 2XX or 3XX, you have to pass failOnStatusCode: false for request command

Debugging:

If you open Cypress test runner and run the above test it will open the browser and run your tests. And it is very easy to debug also, if you see any failures you can simply pin your API call by clicking on request and once it is pinned you can see the request and response in the console.

I hope this helps, let me know if you have any feedback. Thank you for reading.