Cypress Testing Framework — Testing made fun?

Cypress is a Javascript End to End Testing framework that will make you enjoy writing tests in your project! Today, we will see how easy it is to get Cypress up and running in your Angular project.
We’ve all been there… at some point in our projects, we have to do this horrible process called “testing”. Most developers don’t see the value in allocating their precious time for testing not because it is unimportant but because it is such a hassle to deal with and you probably end up either rigging your tests to pass your code (and not the other way around) or not writing any tests at all.
But testing is such an important process as it will help you identify bugs and errors in the logic before releasing it to production. There are many tools such as Selenium, TestComplete and Jasmine Test Framework which is integrated into Angular itself. While they do reduce the burden of testing to a far extent, there are better options to choose from. Enter… Cypress!

According to ThoughtWorks Technology Radar, Cypress is on the top of the recommended tools to be adopted in your workflow. So what makes Cypress different from its counterparts and makes such a joy to write tests?
For starters, it is dead-easy to set up and has no dependencies which can make which makes Cypress quite independent. And Unlike Selenium which runs remotely outside the browser, Cypress runs inside it.
So what’s in it for us, developers? It means that Cypress knows what’s going on in the application inside-out and have native access to every object in your project, this makes Cypress be able to test ANYTHING that runs on a browser REALLY FAST! and it has some other cool features like,
- Time Travel — allows you to see what exactly happens at each stage of your testing script.
- Automatic Waiting — Cypress will automatically wait for commands, API calls and assertions to complete. No need to add timeouts or delays!
- Consistent Results — As mentioned above, Cypress doesn’t use WebDriver or Selenium. Cypress runs in the same run-loop as your application which gives you fast, reliable and consistent test results.
- Screenshots and Videos — Cypress can record and take screenshots (which takes automatically upon test failure of course!) of your entire test process so that, you can analyze and share them among your project team to pinpoint the issues in your projects.
There are so many other features that I haven’t mentioned as the list goes on… and on! It also has very clear documentation with video illustrations which can be easily understood by beginner-level programmers. (like me!)
While there are so many technical advantages of Cypress, there are also some other little things which make you use Cypress more and more. Such as how smooth and nice the overall look and feel of the tests. It is such a joy to watch Cypress runs your test script that sometimes I run the same test twice just because I like to see how it runs!

To get things started, I have created a small Angular application which you can clone it from over here. You can refer to the README.md in the repository to set up the application if you’re not familiar with setting up an Angular application. Once you have set up everything and running, your project directory should look somewhat similar to the image below.

Type the following command to install Cypress into your project.
npm install cypress --save-devOr, you could head over to Cypress documentation for in-depth details.

After the Cypress installation, run the following command to get Cypress up and running.
npx cypress open
If all goes well, you should be greeted with the Cypress GUI “get started” page as follows.

Notice that your project directory has changed a little bit with a new “cypress” folder and a“cypress.json” file.

The “cypress.json” file will contain configurations for cypress where you can specify different options like the viewport size, video compression to be used and many more. It should only contain your project ID by default.
The “cypress” folder has several sub-folders. For now, we’ll focus on the folder called “integration”. This is where you should keep your test scripts so that cypress can automatically detect them. It should contain an “example” folder which has some pre-written tests that probably will not work with our demo project as it was created by me. So you can discard the “example” folder if you wish to, as we will be using a different test script as a demo.
We will use the following script as our first test.
Make sure to include this in the cypress/integration folder
Although the above script is pretty self-explanatory, we will discuss these scripts (and many more!) in-depth in our next article, which will be on writing test scripts using Cypress!

You can either create a new folder with “cypress/integration” or just simply add the “login-test.js” file and run the script and now you should see the test script on cypress GUI as follows.

Click on “login-test.js” to just run only that script. Or, you could click “Run all specs” as we only have one test. Now sit back and relax as Cypress do all the heavy lifting for you. Cypress can use either Chromium or Electron for testing which you can select from the top-right corner of the Cypress GUI window. You can see the test happening in real-time and on the left-side panel, you can see all the steps of the test script being executed. Once the test is done, hover over one of the commands on the left-side panel to see a snapshot of your application, before and after the command, Cypress calls this feature “time travel”, Handy!

You have now learnt, integrated and configured one of the most impressive and fun Javascript Test Frameworks into an Angular project. Congratulations! And we are just getting started. In the next article, we will discuss how to write comprehensive tests and using advanced features in Cypress. See you on the other side!
References
[1]: Cypress Documentation
https://docs.cypress.io/guides/overview/why-cypress.html
[2]: 9 top open-source testing automation frameworks: How to choose
https://techbeacon.com/app-dev-testing/9-top-open-source-testing-automation-frameworks-how-choose
[3]: Technology Radar https://www.thoughtworks.com/radar
