API Testing with Cypress

Ali Haydar
Mar 10, 2019 · 5 min read

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.

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.

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Ali Haydar

Written by

Software engineer (JS | REACT | Node | AWS | Test Automation)

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Ali Haydar

Written by

Software engineer (JS | REACT | Node | AWS | Test Automation)

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store