Cypress is a popular JavaScript testing framework that is widely used for automated end-to-end testing of web applications. It comes with a powerful API that allows you to write tests in an expressive and concise manner. In addition to web application testing, Cypress can also be used for REST API testing.

REST APIs are a popular way to expose data and functionality over the internet. They follow the principles of the Representational State Transfer (REST) architectural style and typically use HTTP methods (GET, POST, PUT, DELETE, etc.) to perform CRUD (Create, Read, Update, Delete) operations on resources.

If you have ever tested an API via Postman or some other tool, this one will be a piece of cake for you. Cypress is a great testing tool that can be also very helpful when testing API. In this article, I’ll go over some basics on how to write an API test in Cypress.

You can check out some other articles on my medium, where I provide step-by-step explanations of some Cypress basics with which you can take things to another level. I have written about the following so far:

1. Introduction to Cypress Automation
2. Cypress generating mochawesome report

To get started with Cypress REST API Testing, you will need to install Cypress and set up a new project.

npm install cypress --save-dev

Once you have Cypress set up, you can start writing tests for your REST API endpoints.

.request() Command

This command will be the center of it all. To send a simple request with a “GET” method, you can call it like this:

You don’t really need to add the method. Cypress optimizes their commands for maximum readability, which is one of the main features of using Cypress. So if you write a request like this, it will automatically be one with a method of “GET”. If you pass two arguments into the .request() command, the first argument will be considered a method and the second will be the URL.

You don’t need to specify the full URL. That is because the “/public/v2/users/“ will be automatically appended to anything that is defined as “baseUrl” in “Cypress.config.js”.

.request() command can take a maximum of 3 arguments. The third one will be the request body.

This syntax is super useful when you want to send a bunch of requests to your database to quickly set up your data for UI tests.

Passing Multiple Attributes to .request() Command

If you want to pass some more options or just provide your .request() command with a little more context, you can pass a single object. The same request from the previous example can be written like this:

This also gives you the ability to pass more options, for example, headers:

Getting Data From Request

After a request receives a response from the server, you can access the information using .then() command. This will return all kinds of attributes like response body, status code, duration, etc.

If you want to use data from the response elsewhere in the test, you can use it like this:

Testing Response Data

Now that we have gotten data from our server, we can proceed with testing them. Cypress has a bundled chai library, which you can use inside your .then() command.

You can test various attributes of the API response, as the bundled chai library is pretty versatile. For example, you can check whether returned content has the proper type, contains certain items or you can write your own function to check a value.

Using cypress-plugin-api Plugin

Cypress will open the browser each time you run a test, which is something to have in mind once you decide to use Cypress for API testing. Also, you need to open the browser console to look into the details of Cypress' response.

But with the cypress-plugin-api plugin, the request, as well as the response get rendered into a browser window, so you can easily observe your API even in GUI mode. This plugin will add “.api()” command to your Cypress library, and the syntax is very similar to “.request()” command.

This test will then produce this beautiful render in your test.

Conclusion

Cypress’ user-friendly interface and intuitive syntax make it easy for developers to write tests and debug any issues that may arise. Additionally, Cypress’ ability to integrate with other testing tools and frameworks makes it a valuable addition to any development workflow.

For more updates, follow me on Medium or LinkedIn. Hope you liked it :)

Cypress REST API Testing was originally published in Red Buffer on Medium, where people are continuing the conversation by highlighting and responding to this story.

As the popularity of Cypress as a testing framework is increasing nowadays, it is important to reflect the test reports in a clear and accessible way. One might think of it as an HTML report which can be extracted from the test results. This is where mochawesome plays its ‘awesomeness’. You will get a step-by-step guide on how to generate reports with mochawesome for e2e tests.

What is Mochawesome?

Mochawesome is a customized JavaScript testing reporter for mocha. It runs on Node.js (>=10) and works in conjunction with mochawesome-report-generator to generate standalone HTML/CSS reports to help visualize your test runs.

Features

• Simple, clean, and modern design
• Beautiful charts (via ChartJS)
• Support for test and suite nesting
• Displays before and after hooks
• Review test code inline
• Stack trace for failed tests
• Support for adding context information to tests
• Filters to display only the tests you want
• Responsive and mobile-friendly
• Offline viewing
• Supports parallel mode

Installation and Setup Guide

Let's start with the required packages you will need to generate mochawesome reports.

Step 1:

First, you need to install mochawesome package, which you can do by executing the following command:

npm i --save-dev cypress-mochawesome-reporter

Step 2:

Now we’ll need to change the cypress reporter & set up hooks. For this, let's edit the config file (cypress.config.js by default)

const { defineConfig } = require('cypress');

module.exports = defineConfig({

reporter: 'cypress-mochawesome-reporter',

e2e: {

setupNodeEvents(on, config) {

require('cypress-mochawesome-reporter/plugin')(on);

},

},

});

Step 3:

Add the following code to your cypress/support/e2e.js file.

import 'cypress-mochawesome-reporter/register';

Step 4:

In order to run your test script to generate an HTML report, do the following steps.

1. Go to your package.json file and add the following under scripts:

“html-report” : “cypress run — — spec <file-path>.js — — browser chrome — — headed”

2. Simpy run the following command in your terminal:

npm run html-report

It will generate an index.html file under “reports/html”. Locate this folder in your directory and open this file.

Mochawesome HTML report

The HTML report will look something like this.

Custom Options

If you want to customize your HTML reports with mochawesome-report-generator flags, just add the flags you want to reporterOptions, which are as follows:

const { defineConfig } = require('cypress');

module.exports = defineConfig({

reporter: 'cypress-mochawesome-reporter',

reporterOptions: {

charts: true,

reportPageTitle: 'custom-title',

embeddedScreenshots: true,

inlineAssets: true,

saveAllAttempts: false,

},

e2e: {

setupNodeEvents(on, config) {

require('cypress-mochawesome-reporter/plugin')(on);

},

},

});

Conclusion

My goal for this article is to improve your daily workflow. This article presents a way to eliminate the many invaluable hours you’ll probably spend trying to understand your Cypress reports. I hope the information presented helps you achieve this.

Thank you for taking the time to read this article.

For more, you can follow me on LinkedIn.

Cypress — Generating Mochawesome Report was originally published in Red Buffer on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you are a QA engineer who is tired of testing web applications manually and wish to somehow automate this laborious task, well this is the article that will help you put a bandage on your pain by giving you a skill that you can use to test the flow of any web application within few minutes.

As a part of the QA job, some level of testing knowledge is commonly required, but what if you can add a special ingredient to your testing recipe that not only can save you time but also make this job an interesting playground for you?

That special ingredient is called “Cypress.io”. Cypress is an end-to-end testing framework for web test automation. It enables the test automation engineers to write automated web tests in JavaScript. Cypress can be used for all kinds of testing, including end-to-end, integration, and unit tests. Let's make you familiar with these terms first!

What Makes Cypress a unique tool?

There are multiple unique factors, which makes Cypress one of the quickly adaptable choices for web automation. A few of them are:

Time Travel: Cypress takes snapshots as you turn your tests, which you can view by simply hovering over commands in Command Log to see exactly what is happening in each step
Debuggability: You don’t have to guess why your tests are failing, as cypress gives you readable errors and stack trees, which make debugging lightning fast.
Screenshots and Videos: You can view screenshots that cypress takes automatically on failure. You can also make a video of your entire test suite when running from CLI.
Automatic Waiting: With Cypress, you don't need to add waits or sleeps in your tests. Cypress automatically waits for the commands and assertions before moving on to the next step. This saves you from asynchronous hell as well.

Types of Testing

There are many types of testing an application, but I will be going through the three common types that I have witnessed and are often asked about in interviews.

1. End-to-End Testing: A methodology used to test the functionality and performance of an application under a product-like environment and data to replicate the live settings. The main goal is to simulate how a real user uses the application from start to finish.
2. Unit Testing: A unit is a single component of a software system that is tested during the development phase. The purpose of unit testing is to test the correctness of an isolated component.
3. Integration Testing: A type of software testing in which the different units, modules, or components of a software application are tested as a combined entity.

All three above-mentioned types of testing are used to verify if your application is performing as expected. Luckily, All three test types are very easy to create in Cypress. Let's get you started with Cypress.

How to install Cypress?

Installing cypress is pretty easy. Simply navigate into the directory of your project and run the following code in your terminal:

npm install cypress --save-dev

You can find more information about the installation of cypress in its official documentation.

You can run the following line of code in your terminal if you have installed Cypress using npm.

npx cypress open

It will open a test runner, with which you can run any test by just clicking on it.

Cypress Test Structure

Cypress tests are usually written by using hooks (import from Mocha) that gives a structure to the test scripts. These are helpful to set conditions that tell how your code should run. Following are the hooks that cypress use:
1. describe(): it is simply a way to group your tests.
2. before(): runs once before all tests
3. beforeEach(): runs before every test block
4. it(): contains the testing code
5. afterEach(): runs after each test block
6. after(): runs once all tests are executed

Writing tests in Cypress

Now that you have installed Cypress and opened it, you can start writing your test scripts.
A folder is created upon installation with the name “cypress”. Inside this folder, you will find a sub-folder labeled “integration”. You can navigate inside this folder and create a file, e.g “my_first_test.js”. This will be the file that will hold your first test.

For the first test, I will show you how to visit your web page:

The test is wrapped inside two functions:
1. describe a () function that groups together related tests
2. it() function which creates an individual test.

Running this test will open the web page due to cy.visit command, and you can see the result in a separate browser.

There are only two states of a test, either it is passed or failed. Cypress test runner provides ample feedback for each failure that occurs. You will also notice that the test runner keeps track of how many passes and failures occur in your test suite. For Example, see the following image.

For this test, we are testing multiple strings on our webpage. So I used cy.contains(). This command takes an argument of a string and finds that element on the page. If the element is found, the test is passed and if the element is not found, the test fails.

Since the page does not contain the text “Hello World” our test failed. Cypress highlights the failed tests in the command line and gives a detailed explanation as to why the test failed.

Conclusion

This is how easy it is to perform a basic web page automation using Cypress. Using this tool, you can automate your testing tasks and perform thorough testing in just a single click.

Thanks for reading :)

Introduction to Cypress Automation was originally published in Red Buffer on Medium, where people are continuing the conversation by highlighting and responding to this story.