API Testing with Cypress
When selecting a tool to perform API testing, it’s natural to pick one that’s built for this purpose, such as Postman, SoapUI, RestAssured, etc. There are many other similar tools in the market. Also, it’s possible to leverage Http Client libraries to perform API testing. Here are some of these libraries: Axios, Request, Supertest, etc.
Today is the 13th day of the API testing challenge, organized by The Ministry Of Testing - Auckland. The challenge for the day is to contribute to the list of API Automation tools at the club. I would like to use this opportunity to explore and review Cypress as an API automation tool.
Why Cypress?
Cypress is an open source, front-end testing tool, usually used to automate the testing of browser applications. So why bother and try it for API testing, there are lots of tools out there. Below are a few reasons to try Cypress:
- Learn about Cypress.io and its features
- It’s important and necessary to use APIs as part of the UI E2E tests. This can be helpful to prepare data or to interact with 3rd party server
- Cypress provides us with the functionality to make an HTTP request. Why not try it!
Let’s start:
Pre-requisites
- Install Node.js and npm. This site explains what are these and how to install them https://www.npmjs.com/get-npm
- We will use Marvel API in this guide, which requires a registration to get an API key — Feel free to skip this step if you have another API you would like to use
Setup
- Create a new directory for the project and navigate to it:
mkdir cypress-api-test && cd cypress-api-test - Setup a new npm package :
npm init - Install cypress:
npm i cypress - Update the scripts tag in “package.json” as follows:
"scripts": { "cypress:open": "./node_modules/.bin/cypress open"},
- In the terminal, run
npm run cypress:open, this will open Cypress, which will create a cypress folder in your directory:
Side note: under the “integration” folder, you can find an examples folder that contains Cypress test examples.
In addition, a “cypress.json” file will be created in the root folder.
- Edit the “cypress.json” file and add a base URL (this baseURL will be used by default in our tests):
{ "baseURL": "https://gateway.marvel.com:443"}
Create and Run Tests
- Under the “integration” folder create a new file. Name it “marvel-api-test.js”
- Write the following in the created file:
describe('Marvel characters', () => { it('Get all Marvel characters', () => { cy.request(url); // We will build the URL and test assertions in the coming steps })})
- We will rely on the Cypress request command to execute the API call (GET /v1/public/characters), which fetches a list of characters
- As per Marvel documentation, we must pass two parameters in addition to the API key parameter:
ts — a timestamp (or other long string which can change on a request-by-request basis)hash — a md5 digest of the ts parameter, your private key and your public key (e.g. md5(ts+privateKey+publicKey).This means the url will look something like that: /v1/public/characters?ts=<timestamp>&apikey=<publickey>&hash=<hash>
Generate timestamp and hash key
You can generate the time stamp and the hash online, or do that programmatically in JavaScript. We will use the online generation process.
- The timestamp can be generated at: https://timestampgenerator.com/ , copy the result
- Your API key is the public key at https://developer.marvel.com/account.
- The hash can be created online at: https://www.md5hashgenerator.com/. Pass the timestamp, the private key and the public key, then click generate. Copy the hash and replace them in the following url:
v1/public/characters?ts=<timestamp>&apikey=<publickey>&hash=<timestamp+privatekey+publickey> - Update the “marvel-api-test.js” file as follows:
describe('Marvel characters', () => { it('Get all Marvel characters', () => { cy.request('/v1/public/characters?ts=<timestamp>&apikey=<publickey>&hash=<timestamp+privatekey+publickey')
.then((response) => {
expect(response.body).to.have.property('code', 200)
})
})
})
- In Cypress, run the test and notice the results
Try to assert on few other other objects returned in the response and verify it’s working properly.
Take some time to try a post request.
Generate hash programmatically
In this section, we will repeat the same test, but we will generate the md5 hash and the timestamp programatically. Let us build the url:
- To generate the timestamp, create a date object then use the getTimestamp() function
- To generate the md5 hash, install the md5 package:
npm i md5 - The code in marvel-api-test.js would look as follows:
const md5 = require('md5');describe('Marvel characters', () => { it('Get all Marvel characters', () => { const date = new Date(); const timestamp = date.getTime(); const publicKey = '<publickey>'; const privateKey = '<privateKey>' // function that generates the hash
const hash = md5(timestamp + privateKey + publicKey); cy.request(`/v1/public/characters?ts=${timestamp}&apikey=${publicKey}&hash=${hash}`)
.then((response) => { expect(response.body).to.have.property('code', 200) }) })})
Run the test.
The code can be found at: https://github.com/AHaydar/cypress-api-test/
Please do NOT store and publish your private / public keys within the same file as I did in the example above. This is not secure. However, we didn’t get into that as our goal is to execute an API call. There are a lot of articles that explain how to handle the keys storage in a project- dotenv is one of the solutions
Should we use Cypress for API testing?
Cypress can be leveraged to perform API calls while interacting with the user interface. This is a good use case to prepare data and to make our UI tests faster. Even though it is very easy to execute API calls in Cypress, it doesn’t feel natural to use it to run API tests, especially that the browser is involved during the test execution - Note: Cypress does not actually make an XHR request from the browser. The HTTP request is acutally made from the Cypress Test Runner (in Node.js). So, you won’t see the request inside of your Developer Tools.
I hope this was helpful. Please leave your feedback.
