In this tutorial, you will learn a little about the Cypress testing framework and why you should consider using it with your Javascript projects.  Building and deploying web applications have got a load more complicated since I was a fresh-faced developer out of university.  Back in the day, we had IE, no one had smartphones yet so deploying and testing your web page looked OK was pretty easy.  Things are not this straightforward nowadays. First, technology has become more complex.  There are countless devices, numerous browsers, ever-changing frameworks and programming languages, each framework needs a level of specialist knowledge, Ci/Cd pipelines.  Second, what you can do on a web site has also grown, so the list of things that different companies want has also increased.  When you combine these together, it means that testing that a web page completely works as expected is difficult.

The Main Testing Issues I See Within Companies

The trend for most companies I work within London at least - is to spend a lot of time and effort manually regression testing a website before launch.  Everyone aims to have fully automated test coverage, however, from my experience, very few companies have the amount of tests written so people can click a button and get stuff into production without anyone needing to manually check some stuff.

As well as companies not investing enough in automation, the other big issue I tend to see is the problem between who writes the integration tests.  Testers tend to want to write selenium testing with Cucumber and Gerkin scripts in Java.  If you're a Javascript or C# developer, for example, a lot of the time, you don't want to open up a different repo, use a different programming language, write an automated test, get it to work, check that it passes the Ci/Cd pipeline and then open a pull-request.   

Cypress can help with these two issues.  Cypress is written in Javascript, so if you know Javascript then you are good to go.  Cypress can be added into your project.  With some simple NPM scripts, you can run your tests on your front-end tests within Visual studio code locally rather than needing to run a separate test runner, of having a build server run them. Sounds good right?

What Is Cypress?

Cypress is a Javascript testing tool, to help you quickly functionally test your crucial flows/pages work as expected.  Cypress supports Mocha, has a built-in mocking framework, it can record and playback tests, and can create reports with failure screenshots. An example of a Cypress test can be seen below:

As you can see, a Cypress test looks a look like a normal Javascript test. Setting up a sample Cypress project is very easy.  After integrating Cypress on some of the projects I've worked on, I noticed that:

  • No one moaned about using Cypress
  • More functional tests were written by developers during development
  • As tests are co-located near the component like unit tests, they became more useful for people to understand what the code does better.  
  • Cypress shouldn't be your only testing tool. Writing unit tests with Enzyme, Jest, Mocha, Visual Snapshots, etc will still need to be done.  

Next Steps

You can get a demo Cypress project up and running within 15 minutes, so there really is no excuse not to give it a try.  You can download Cypress from NPM.  There's also good documentation of how to get set-up over at the Cyprus website here.  Over the years, when I've worked on projects and introduced new technologies, there's always a certain amount of push back.  As is human nature, some people tend to resist changing things.  As of yet, I haven't heard one person complaining about Cypress, so that in itself says a lot about the product, best of all... it's FREE!