Cypress.io vs Protractor: e2e testing battle

Written by kobvel | Published 2017/09/28
Tech Story Tags: javascript | software-testing | protractor | testing-tools | testing

TLDRvia the TL;DR App

No matter what you build you will be faced with the question of optimizing your testing by automating its parts or the whole experience.

Short Story

Big enterprise project: Protractor

Pet projects or small web apps: Cypress

Why to write e2e tests?

In simple words. You can define a contract behavior to be sure your core functionality is always working as expected.

While unit tests provide us with a good feeling of what we are doing right smears, integration testing helps us to be sure the whole picture is good looking.

Warning: That might not be the case if you are changing your system every week.

Cypress.io new breath or new hype?

Cypress Pros:

  1. No dependencies. You put it in your `package.json` and that’s it
  2. Auto-reload. It saves tons of time
  3. Debug. You can log\debug any step of the sequence while you are seeing each step in the Cypress GUI
  4. Automatic waits. No sleeps, No waits. Get your elements and set user-friendly timeout. Cypress will make the rest.

cy.get(‘.async-element’, { timeout: 5000 }).click()

By default, cy.get is waiting for element to appear in the DOM, but you can set any reasonable timeout.

Opinion-based advantages:

  1. Clear syntax

It’s easy to read. You will like it!

2. Unit-testing + E2E

I am a big fan of platform-independent technologies. Once you’ve learned some tool you don’t want to switch to another one because your ecosystem has changed.

Cypress is platform independent which means you can write and cover any Framework/Stack. You can even import your ES6 and JSX and write Unit Tests for it.

Cypress Cons:

  1. Community. Nothing to say, it’s a commercial company. You never know about plans of monetization in future.
  2. Features. No file upload support. No cross-browsers testing. Who knows when these things will be covered, for big projects these features are crucial.
  3. Page Object Model. It is something that has already been proven by time. Cypress supports a different approach which could be controversial. More detail on this is here: Cypress POM.

Protractor: Tried and Tested

Protractor Pros:

  1. Community. Around 7000 stars on the Github. Opened/Closed issues 200/3000. Face it, the Angular community did their job.
  2. Not only Angular. Protractor gives extra advantages to test Angular apps but your app should not necessarily use it.
  3. You can choose test library. While Protractor is already in the game for some time you can pick between libs to write your tests. Some popular picks are Jasmine, Mocha, Cucumber. Other than that there are tons of plugins and libs to extend Protractor functionality.
  4. Parallel testing through several browsers. It supports cross-browser testing. Even more — you can run several browsers instances simultaneously!

Protractor Cons:

  1. Debug. I personally found it tricky to debug Protractor.
  2. Time-consuming. Could take some time to master all API and technics.

Conclusion

Cypress looks very promising. But facing its current state you should think twice before invest time in it. Protractor was proven by time. It has great community and support on Gitter. Also, Protractor will be a nice addition to your CV no matter what technologies you’re using.

Thanks for reading! If you want me to write more similar stories recommend this post (by clicking the ❤ button).

Write your thoughts to comments and subscribe to my medium to find more stories.


Published by HackerNoon on 2017/09/28