Cypress & Grafana – API & Environment Monitoring Dashboard

So, here is my challenge! My team deals with loads of APIs and wanted a real time API Monitoring System to check the health of the environments. I know Cypress does support API testing to a great extent and I want to use its powerful features to build a API framework to monitor the APIs.

Being a fanatic on building monitoring frameworks, I choose Grafana to be my tool for displaying the live status and statistics. I use simple and neat, MySQL as my database to store my API test results which I will fetch later in my Grafana dashboard.

Let’s dive in!!!

Folder Structure:

Packages:

We will make this framework as light as possible. So, we will use only below packages –

"devDependencies": {
    "cypress": "^4.8.0",
    "mochawesome": "^6.1.1",
    "mysql": "^2.18.1",
    "npm": "^6.14.5"
  },
  "dependencies": {
    "jsonpath": "^1.0.2"
  }

Utilities:

To achieve this, I have tweaked the framework with 3 utility files namely –

• configureDatabase.js – to create and configure database for you 🙂
• extract.report.mysql.js – to update the test results from Mochawesome.json file to the MySQL table
• execute.tests.js – to trigger the Cypress scripts

Configurations:

Once the packages are installed, lets first create a new folder called, utils. Copy and paste the 3 files into this folder,

• configureDatabase.js
• extract.report.mysql.js
• execute.tests.js

Step 1: Make sure your MySQL is up and running (very important)

Step 2: Navigate to utils folder in terminal and run –

node configureDatabase.js

Step 3: In your package.json file, add the below code snippet to trigger the Cypress tests and update the database.

"scripts": {
    "cy:run": "cypress run --reporter mochawesome",
    "save:results": "node ./utils/extract.report.mysql.js"
  },

Step 4: Add the Mochawesome reporter properties to the Cypress.json file

{
    "reporter": "mochawesome",
    "reporterOptions": {
      "reportDir": "cypress/results",
      "overwrite": true,
      "html": false,
      "json": true
    }
  }

Step 5: Have a spec file with the below code which will validate the status code of the API –

/// <reference types="cypress" />

describe("Go Rest API Tests - https://gorest.co.in/",()=>{

    it("Users Service",()=>{

        cy.request("https://gorest.co.in/public-api/users").as("users")
        cy.get('@users').its('status').should('equal', 200)

    })

    it("Posts Service",()=>{

        cy.request("https://gorest.co.in/public-api/posts").as("posts")
        cy.get('@posts').its('status').should('equal', 200)

    })

    it("Comments Service",()=>{

        cy.request("https://gorest.co.in/public-api/comments").as("comments")
        cy.get('@comments').its('status').should('equal', 200)

    })

    it("Albums Service",()=>{

        cy.request("https://gorest.co.in/public-api/albums").as("albums")
        cy.get('@albums').its('status').should('equal', 200)

    })
})

That’s it! As simple as that…

How does it work?

GitHub Repo:

https://github.com/grajk88/cypress-grafana-api-monitor

Demo:

To kick start the test, just run the below command –

node execute.tests.js

Conclusion:

You can integrate this with CI/CD tools like Jenkins to continuously monitor the APIs and environments by setting up an auto triggering feature every 2 or so. This is one idea that came in my mind to use Cypress for monitoring purpose. You can configure it however you want based on your requirement and you might face several challenges with SSL. In that case, follow this link to seek help.

Happy Testing!!!