Post/Code

HomeAboutUsesNow

Cypress.io.

If you have not tried Cypress.io, I would suggest you give it a shot!

In short, Cypress.io is a JavaScript-based library for writing end-to-end (e2e) tests. As their website says: "Fast, easy and reliable testing for anything that runs in a browser."

My experience of using Cypress bears that statement out so far. Being a newcomer to the library, I was able to write a fairly comprehensive set of e2e tests in an afternoon. As the website lays out, Cypress has 2 focus areas:

  • Test runner
  • Dashboard service

My usage so far has only covered the "Test runner" which is broken up into two basic parts:

  • Setup tests (run tests)
  • Write tests

Now, getting started is quick and easy. There are no dependencies and you are ready-to-go with the following:

npm i --save-dev cypress

In your package.json, under scripts add (I have shortened my command for ease-of-typing):

"cy": "cypress open"

In your terminal you can then run:

npm run cy

This will start up the test runner which opens up a browser window with the Cypress interface. From this interface you can then select which tests you want to run or whether you want to run all tests. This, in turn, will open the test browser that will run all the tests. In this window, you have a UI with your tests steps on the left and the actual site/app view on the write.

Granted, I am a novice when it comes to e2e testing, but I got a real kick out of seeing my tests run and interact with my app in real-time as the test steps on the left passed or failed. It really is like watching a screen-recording of someone test your app in high-speed!

Writing tests.

As far as writing tests goes:

  1. You write you tests in JavaScript in a style that is recognisable across many JS testing libraries. (You have your 'describe' and 'it' blocks).
  2. The API is very similar to jQuery in terms of selecting DOM elements and manipulating them.

In my experience so far, Cypress "just works". Since you are "interacting" with the DOM in a way that the "user" would, you are basically replicating, in declarative-style code, how someone would use your app, and what they will expect to see.

From this perspective, I find it a lot simpler and intuitive to write Cypress tests than unit/integration tests. At my first outing, I was writing my e2e tests after the fact. Now, my experience with unit testing had me nervous about this scenario because, typically, writing tests after you have already implemented your app means you can look forward to a lot of refactoring to get the test working smoothly. Since Cypress is 'looking' at your app as a whole, as the user, it is not concerned with all the implementation details, just with the what is on the screen and what happens as a result of interactions. The details of interaction still need to be tested by your unit/integration tests though - Cypress does not replace the need for those.

In preparing my first project for the Udacity React Nanodegree, I felt it was a good opportunity to expand my skillset. I have heard a few things about Cypress lately, and wanted to try it out on a small example app. This project was the perfect opportunity and I would encourage anyone out there to give it a try. Chances are you will be pleasantly surprised!