End-to-End (E2) Testing API+Web with Cypress
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!).
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
npm to install Cypress, they support:
- Node.js 8 and above
After you passed those requirements, let’s start build the project:
npm install cypress --save-dev
Try to open cypress UI with this command:
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:
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:
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:
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.
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:
And automatically you can find the video on this path:
Amazing, right!!?? Full of test cases for both API & Web available on my github repository below, you can check it for the detail!
Fun project with Cypress for E2E Testing (API & Web). Demo for API & Web using my simple book management application…
Hope you enjoy it, I’m happy if this article useful for you! Happy automated testing!