What can you expected migrating from Protractor to Cypress

I have a lot of background with AngularJS, and I spent plenty of time writing & fixing the end-to-end (e2e) test. The tool that came with AngularJS was Protractor. It was way better than the alternatives back in the day, but it was far from perfect. Now, with Protractor being deprecated, I was forced to look for alternatives. Cypress looked the most interesting, but I wasn't sure which features are part of the paid subscription and what is available for free. In this article, I'll walk you through the main improvements over Protractor available without paying.

A word of warning

I'm not sure how many of the issues I experienced with Protractor are really shortcomings of the test tool itself and how much of the way it was the setup in my project. Now, with Protractor going away, it's too late to investigate.

Immediet test execution

My protractor tests were pretty slow to run - about 10~20s. For test troubleshooting, I liked having the browser window attached to the screen to see what is happening. But in this case, the test running browsed had a habit of popping up on top of all other windows every time a new test started. In short - I couldn't run tests in the background or have them start as I was doing changes.

All that is improving a lot in Cypress. You start a test running tool, and it's always where you mean it to be - in the foreground or background. As you change your test code, it automatically restarts the test. And it doesn't matter if you missed the test execution completely - because of the next feature.

Test run rewind

In protractor, I often restarted tests to see again what's happening. With 10~20s for a test run, it was rather a slow process. Often, I was putting something like:

So I can better see what's inside the application before failure.

The test running tool in Cypress has a rewind feature. It shows all operations as the test executed them, and by hovering on them, you can see how the application looked at the time. It gives you visual feedback that speeds up troubleshooting greatly.

Recording the video of the test run

The rewind does a great job for local test execution. For CI runs, you can set up CI to expose cypress/videos. In that folder, for each test, you have a video with its execution. This again gives you plenty of information about what could have gone wrong with e2e on the CI.

Universality

Another great feature of Cypress is that it's not framework-specific. You can learn one tool and use it for testing any JS project you work on. That was technically possible with Protractor, but it was getting pretty awkward with non-angular code.

Summary

In short, moving from Protractor to Cypress is a great improvement, and I'm happy that I already started this migration. In the end, the angular team made a good decision killing their tool and forcing us all to look for alternatives - as there are much better tools available now.