E2E Testing Reports for Team-Friendly

As a Software Engineer Developer in a team, we want each member of the team to know how exactly our app running before the release period. We want all members to have the same view of how the app will serve the feature for our users. These reasons were guiding us to find a way how to prepare reports of our test cases for better team-friendly.

So, this’s what we do in our team (DANA Bisnis team).

INTRODUCTION (TL;DR) 🎬

[embed]DANA Bisnis

As a team, we offer solutions for UMKM (micro-business) in Indonesia to help manage their own business during the COVID-19 situation. DANA Bisnis is one of them. **DANA Bisnis is a Merchant platform inside [DANA app](https://www.dana.id/business) **to monitor their store (offline-online) with no-hassle. We offers product management link, payment-link, request-payment, QR-payment, card-payment and many more.

We also offer **DANA QRIS **(Quick Response Code Indonesian Standard) to our merchant, so they can accept all of e-money transactions who already support **QRIS payment **in Indonesia. Just download the QRIS in your DANA Bisnis account and print it!👍

This is DANA commitment to society to break-the-chain of COVID-19 in Indonesia with digital transaction transformation.

The Main-Dish! 🍲

We used end-to-end (e2e) testing to test our features and serve the result with a human-readable-friendly report.

Figure 1. E2E Testing Report with Text, Chart, and Screenshot

As you can see, with this report we have a better understanding of how exactly our app running and how UI/UX is implemented in the right way to our users. This also gives better communication between the developer, designer, and tester to know how the feature is implemented.

Let’s get started and prepare the ingredients! 🥗

I assume you have a project and ready to add the package library.

First adding these packages to your package.json file.

[embed]

Second, you should npm install to download the packages to your node_modules folder.

Third, you have to update your package.json again and adding this script command. (Please custom with your setup on your project)

[embed]

Fourth, as you can see above, the test command has referred to mocha.opts config inside the test folder. Let’s create it, and put this to the mocha.opts file.

[embed]

Fifth, now you can create a simple test case script with this format inside your test folder, let’s named it simple.test.js

[embed]

Voila, that’s it! Now you can start npm run dev:test and in another terminal tab, you can run npm test to start the testing process. At the end of the test, you will get two folders. They are coverage and reports folder inside your root project. Open the reports folder, and you will see this.

Figure 2. Reports folder with index.html inside

Have problems when trying to implement in your project? 🥺 🍽️

Don’t worry, I have prepared a simple project. This will save time to give it a try by yourself and figure out the setup. Clone this project 👍

GitHub Code Clone the project https://github.com/barayuda/e2e-test-playground and give it a taste! 🥳

Follow the instruction on the README.md file

Figure 3. Follow the instruction on README.md and run the project

Buon-appetito! 🔥

You will see the reports folder inside your root folder. Open index.html to your browser or right-click and open on live-server if you use VSCode (install this **Live Server extension **first)

Figure 4. Right-click index.html and Open with Live Server

Next, you will see this in your browser. The test-case flow of our project.

Figure 5. Macaca Reporter with test-case flow plus image screenshot

Yeah, we also found xmind-chart like. With this, we can cross-check with the QA team’s test-cases.

Figure 6. Macaca Reporter Xmind like version

Click on screenshot mode, and we will found a bunch of project screenshots here :)

Figure 7. Screenshot of the projects

WHAT DID WE LEARN? 🤔💡

Well, writing test cases when developing apps can save you a lot of time that would be otherwise spent fixing bugs. The bigger and more complex your app gets, the truer this becomes. There are two types of tests that are commonly performed for applications: unit tests and end-to-end (E2E) tests as we do in this article. So, what’s the difference? Do you need both?

Unit testing is to break down the code into small, easily testable parts. Usually, the unit is a single function, but can also be a class or even a complex algorithm. A crucial concept of unit testing is that a given input of the function should always result in the same output.

End-to-end (E2E) testing is a type of functional test. Unlike a unit test, you’re not breaking the application down into smaller parts in order to test it — you’re testing the entire application.

— So, why we prefer e2e testing to the team? —

Yes, the unit test is nice to have in our app. We will know our functionality from components run smoothly fine. But, we have a concern “How the team understands the process and flow of features we made?”

E2E with a small adjustment reports is the answer. Because we offer a ton of features to our users, it's better for the team to see what exactly will our users use right? This is the main reason, then we spend the time to find and learn tools to help us preparing reports that the whole team will understand with ease. Well, what we achieve here will make our discussion to review our app will more interactive right? 😁

WHAT’S NEXT? 🤔 💭

Well, as we know, machine-learning will dominate our future to help our daily life, especially improved computer-vision. Machine learning has improved computer vision about recognition and tracking. It offers effective methods for acquisition, image processing, and object focus which are used in computer vision.

So, e2e testing reports will be improving as well 🎉

We will implement computer vision solutions to analyze the UI outside the View system, e.g. to identify screenshots during testing. This will be fun to implement in the future. Stay tuned guys! 🤓✨and #StaySafe👍

References 🧾

Webpack: https://github.com/webpack/webpack-dev-server#readme BabelJS: https://babeljs.io/setup#installation Vue TypeScript: https://vuejs.org/v2/guide/typescript.html Husky Hook: https://typicode.github.io/husky/#/?id=add-a-hook Macaca CLI: https://github.com/macacajs/macaca-cli Macaca Reporter: https://macacajs.github.io/macaca-reporter/ Macaca Web Driver: https://macacajs.github.io/macaca-wd/ Macaca Electron: http://macacajs.github.io/macaca-electron/

QRIS: https://www.bi.go.id/QRIS/Contents/Default.aspx GitHub Repo: https://github.com/barayuda/e2e-test-playground DANA Bisnis: Gabung Sekarang!