Cypress – Fast, easy and reliable testing for anything that runs in a browser.

The web has evolved. Finally, testing has too.

They really meant it. I was looking for a simple, easy to use and initiative end-to-end testing framework for one of our web application. I tried out cypress for the first time and found myself productive within about 10 mins.

Before we go deep into the details of cypress. First see a short video of UI tests, which was captured by the cypress itself during the test run and which will give you a glimpse of its working.

I have my fair share of struggle with end-to-end software testing and though selenium/web-driver based frameworks dominate this area for a while but there is a new sheriff in the town, Cypress.

The official website (link in reference section) contains very structured and easy to understand documentation and in this post I will mostly focus about a general and short introduction of Cypress to demonstrate its capabilities.

Introduction

• Cypress allows fast, easy and reliable testing for anything that runs in a browser.
• It is a complete end-to-end testing experience.
• Highlights
  • Developer Friendly
  • Open Source
  • Built from ground up
• Killer features
  • Time Travel
  • Automatic Waiting
  • Debuggability

Basic Example

So, we have a web application and we want to test its web pages.

• Human based manual Testing (common conception)
• Boring
• Not intuitive
• Time Consuming
• Sometimes human testing is the only option.

So, I will leave you alone with thoughts on the pros/cons of human-based manual testing and will move forward on the topic 🙂

Cypress Test Running

Following picture shows test runner in action. It is showing all passing test on the left side and it is showing the web-application on the right side. It also provides a lot of debugging information as well.

Back to Basic

So, Back to our basic example, testing a web page. How should it be? rough idea as follows:

Simple, right. So, lets see how to do some thing like that using cypress. Image below is cypress test code, try to read it and do not worry if its not fully understandable, just try to get the idea. Read the steps and then compare it with the steps we wrote earlier.

If you have some experience with software testing and then it should be very clear. This is how cypress test code will look like, its very clean structured and easy to understand test. Simple JavaScript.

Another Example

Similar to previous example, also check the following example performing a test.

Installing Cypress

Again, visit the official website for information for your specific setup. I have installed cypress on my windows machine via npm and following screenshots shows the process. It took only few minutes for whole setup.

Other Features

Cypress offers its cloud dashboard and other services as well.

Capture Screenshots and Videos

• Cypress comes with the ability to take screenshots and videos.
• Cypress can record a video for each spec file when running tests.
• The video in the beginning of this post was captured by cypress itself.

Summary

It was a very high-level introduction to cypress and I tried to capture the big picture in this post. Cypress is a very easy to use, feature rich and fun to work with tool. Its open source and have great documentation. Comparing to selenium, it is new but has a growing community. If you do not have end-to-end tests in your application, then it might be worth to give it a shot and it will help you quickly get started with this historically troublesome area of software testing.

Selenium also has its place and got matured over the years, so I will not be that bold to say to totally abandon selenium, but adding cypress to your tool set will bring its benefits to you as well. Till next time, Happy Coding.

References

• https://www.cypress.io/