A brief introduction into the world of Web app E2E testing.

Oftentimes, people forsake end-to-end testing as it can be cumbersome, expensive, and annoying to do. This is all very true. However when shit hits the fan and regression testing is needed, a comprehensive automated test suite is a godsend, saving time and resources for other things. In this article, I will introduce a fun and simple way to do end-to-end testing on a web app with Cypress and some of the features which I like and use most (at the time of this writing).

What is Cypress?

Cypress is “a next-generation front end testing tool built for the modern web” as extracted from its documentation and from my experience using it, that is true in its words. It’s relatively simple to write and debug tests. These tests are able to simulate user behavior in the web application and have coverage for all user features. A typical E2E test visits the application in a browser and performs actions via the UI just like a real user would.

Highlights of using Cypress

• Tests are easy to read and write.
• Tests run in web browsers, simulating user interaction in real-time.
• Useful debugging features.
• Well documented.

I have featured a video from their Youtube channel for further elaboration.

Favorite Features

Test Runner

When you run your tests headed with the inbuilt test runner you will be able to take advantage of many features it offers, making your life easier. Here are some features which I like:

1. Test Status Menu — Here comprises the summary once the run is completed, the number of tests passed, failed and time taken.
2. Command Log — While navigating between actions and steps to explore what exactly happened, you can see the state of the app before and after the action was performed. Other useful information used for debugging including console logs, networks calls, etc. can be found here too.
3. Url Preview — There is a useful display to view your app routes while testing like you would see in a normal browser.
4. App preview — The execution of the tests is displayed in the App preview which is located on the right-hand side of the Test Runner. The test’s status and all the steps and actions being carried out in your browser can be seen here. You can also run multiple instances or let it run in the background without affecting any actions. Not only is the application visible, but it is fully interactable, elements can be inspected using developer tools like you would in the normal browser.

Network Stubbing

Cypress comes with amazing network handling capabilities which help to test HTTP requests within the application. You can access information about the request, allowing you to make assertions on its properties.

Additionally, you can even stub and mock a request’s response. Depending on the objective of the tests, you can even customize within the same test to do both, by stubbing certain requests, while allowing others to hit your server.

Common testing scenarios:

• Asserting on a request’s body
• Asserting on a request’s url
• Asserting on a request’s headers
• Stubbing a response’s body
• Stubbing a response’s status code
• Stubbing a response’s headers
• Delaying a response
• Waiting for a response to happen

Retry-ability

Cypress has a smart retry-ability feature enabled by default, tied to commands and assertions which will automatically retry their action, not needing any hardcoded waits or extra assertions.

Most often than not, the assertions will either be retried or have a built-in wait, and the timeouts are also configurable. They can be done on the individual command level or changed globally although that is not recommended.

These configurable features which can be customized down to specific tests and commands are well thought out for the test developer and also that’s why it’s one of my favorite features.

Screenshot and Videos

Cypress automatically records video when running tests as well as captures screenshot images whenever a failure happens during a run.

This is specifically useful for doing automated testing nightly run as it helps in the initial debugging to find out what issues occurred to cause the failures without having to run the tests again.

Last words

I hope you are as ecstatic as I am about Cypress by now. I was chuffed to bits when I learned about automated testing after having done manual testing. Doing regression testing manually repeatedly over time can be mentally exhausting and a waste of valuable time.

Having had a jolly good time with cypress, all you need is a click (sometimes, multiple) to do that, and Bob’s your uncle, it’s done. Tell manual regression testing to skedaddle as your good friend, automation is here.

Thanks for reading!

Next, I’ll be doing a simple Cypress setup tutorial for a typical web application.

Stay tuned and more importantly, stay humble.

About the author: Kong Wai Cheng