Easyread
Published in

Easyread

End-to-End (E2) Testing API+Web with Cypress

Photo by pixabay.com

Hi everyone! Still meet with me again to share some experience, though or opinion about technology related with software engineering field. Today, I will share about my experience did automated End-To-End (E2E) Testing using Cypress for API & Web.

Some time ago, our Frontend Engineer guy (Budi Prakosa) did automation test for his feature on web application. He is very unique person who enjoy research anything and that’s why my friends called him professor, lol! (Sorry Iyok!).

I’m started interested with the idea that he bring to us and want to know more about this things. The framework is Cypress ! It’s Javascript based! You can find the official page on https://www.cypress.io/

After finding out about Cypress, I realize that we can also used it for do E2E Testing API! And the interesting part is we could do video recording for every test case that we’ve made. It’s awesome! Because our QA team sometimes did video recording for every test case to prove the result. And the important things is Cypress code easy to understand.

Okay, let’s begin for the technical part. I will show some examples Cypress code to do API & Web testing. From Cypress page, they support multiple OS, make sure you use the minimal requirements below:

  • macOS 10.9 and above (64-bit only)
  • Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
  • Windows 7 and above

If using npm to install Cypress, they support:

  • Node.js 8 and above

After you passed those requirements, let’s start build the project:

cd /your/project/path
npm install cypress --save-dev

Try to open cypress UI with this command:

./node_modules/.bin/cypress open
Picture 1 Cypress UI

If you get the same output as the picture above, it’s mean you successfully created Cypress project. There are some default test cases, you can run all specs or just try click on one of test case list to view how’s Cypress works. By default, we should put our test case on integration folder. It’s located on:

/your/project/path/cypress/integration

You can change the location of test case, but you should created JSON file in your root project named cypress.json that contained this config:

{
"integrationFolder": "your/custom/path"
}

But for this case, let’s do it on default path!

We will use my simple API for this test case. The swagger documentation can be found in this url: https://momo-book.herokuapp.com/api/documentation

The Author API for creating data seems fit for this section. Create the test case file for the example named api_author.spec.js with Cypress code like this:

Sounds easy and readable, right? We will try to breakdown the code. Describe on the beginning will be group of our test case. And, it will be our test case and we can put the name for the test case. For this example, we write a successfully create data for author. Const, maybe you already familiar with this type if you working with Javascript. It’s just for defining variable with value. Last, we do API call with cy.request and fill the method, URL, body, headers and assert the result with your expectation. Cypress already wrap the expect function for match the result with your expectation. You can see the detail what else the function on their official page. And then, you can try rerun the UI and try to test your test case. The result would be look like on Picture 2 below.

Picture 2 Cypress API Test

Next, we will try to test the Web! We will use my simple CRUD web app from this URL https://momo-book.herokuapp.com/ and try the Author create data form!

Create the test case file for the example named web_author.spec.js with Cypress code like this:

Similar with previously explanation, let’s just breakdown the different function. Because this is web test, we put user behaviour when accessed the web app. And we should understand how’s the flow works.

In this author case, first we should open the list page, click the add button, fill the form, submit the data and then we will be redirected to the list. So the Cypress code above represent the data flow such as visit, wait, get with click, get, with type, url with include, and get with contain.

If you run the test case, the result would be look like on Picture 3 below.

Picture 3 Cypress Web Test

Finally, we done with the API & Web testing! You could try the other scenarios by yourself. Ah, for recording the videos, you just run cypress with this command:

./node_modules/.bin/cypress run

And automatically you can find the video on this path:

/your/project/path/cypress/videos

Amazing, right!!?? Full of test cases for both API & Web available on my github repository below, you can check it for the detail!

Hope you enjoy it, I’m happy if this article useful for you! Happy automated testing!

Thank you!

--

--

--

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Recommended from Medium

IRL merchandise anyone?

WW Maker Bytes

Continuous code quality and automated code review tools

Typing effect in vanilla JavaScript

Understanding & Measuring HTTP Timings with Node.js

Debugging JavaScript Efficiently with Chrome DevTools

HTTP Request JavaScript

Fundamental Javascript Concepts to help you get started with React

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
Bismo Baruno

Bismo Baruno

Software Engineer | Traveler | Guitarist | J-Lovers

More from Medium

Introduction to API Gateway and how to test it in your local machine

Add and Remove Custom Methods

Fundamentals of OpenIdConnect(OIDC)

How to implement logging in your REST service by using Elasticsearch

drawing