In this tutorial, you will learn a little about the Cypress testing framework and why you should consider using it with your Javascript projects. As technology evolves, the art of building web applications is becoming increasingly more complicated. Back in the day, no one had smartphones, iPads, or, smartwatches. When building a site you only really needed to test the site worked on IE using a web browser, in general things were pretty easy. Nowadays, things are not this straightforward. First, technology has become more complex. There are countless devices, numerous browsers, ever-changing frameworks and programming languages that come and go. What you can do on a website has also evolved. When you combine these factors together, it means that testing that a web page works on all devices as expected is difficult. What is the answer?
An approach that many teams follow, is to spend a lot of time getting someone from the QA team to manually regression testing a website before any change is pushed live. I believe that most companies aim to have fully automated test coverage, however, from my experience, very few companies have invested the time and effort required to have coverage that they feel confident pushing code into production without anyone needing to manually check some stuff.
As well as companies not investing enough in automation, another big issue I see teams encountering is ownership. Who writes the integration tests? Testers tend to want to write tests using Java, probably using selenium testing with cucumber and Gerkin scripts. If you're a Javascript developer, you will not want to open up a different repo, use a different IDE or a different programming language just to write a few tests. This creates a problem. The developers usually understand the code and the site the best, however, when faced with doing something different, they don't bother helping to write the E2E tests as it's deemed too much effort. If you follow a sprint cycle, the QA tends to get a batch of work at the end of each sprint as developers all finish their tasks at the same time. When this happens the QA does not have enough time to write automation tests so they end up manually regression testing new features. This loop takes the company further away from automated testing.
Cypress can help with these two issues. Cypress is written in Javascript, so if you know Javascript then you can easily write tests! Cypress can be added to your project with a simple NPM command. Tests can be run from within Visual studio code locally rather than needing to run a separate test runner, or having a build server run them. Sounds good right?
What Is Cypress?
Cypress is a Javascript testing tool, https://www.cypress.io/ 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 using Cypress on some of the projects I've worked on, I noticed that:
No one in the DEV or QA team moaned about using Cypress
More functional tests were written by developers
As tests are co-located near the component like unit tests, they became more useful for developers as a tool to understand what the code does better.
QA can easily learn CVypress given some help and coaching
Simplified Git and CI/CD set-up. Not having a separated Java test project allowed for better standardisation
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 and there is 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 pushback. 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! I recommend you start using Cypress today, you will not regret it. Happy Coding 🤘
