End-to-End (E2) Testing API+Web with Cypress
By: Bismo Baruno
Tags: End To End Testing, Qa Engineer, Cypress, JavaScript, Automated Testing

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)

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

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!