Should I start with Cypress.io?

Should a person just starting in QA field learn how to use Cypress.io or Selenium.

Recently a friend of mine asked "should my close person X, who is just starting in QA field learn how to test web applications using Cypress.io test runner or go with Selenium?" Here is my answer, which you should take with a grain of salt - I work at Cypress!

Whenever you start in a new field, you have to quickly get up to speed so you are productive in a real company. A testing tool you pick thus needs to have an approachable learning curve, and be simple to start with, and be powerful to handle testing modern web apps.

Installation πŸ’Ύ

Here is where Cypress test runner shines: to install the Cypress test runner you need just a single command: npm i -D cypress.

Installing Cypress

I could have stopped right there. But seriously, we built Cypress using the most popular programming language - JavaScript, on top of cross-platform Electron application (same app that powers VSCode, Slack and Spotify) and we distribute the test runner via the largest code sharing repository in the world: NPM registry. Trying out Cypress should be easy on every platform. If it is not, open an issue on GitHub and we will see if we can simplify it even more.

Documentation πŸ“š

We have invested a lot of our engineering time (at the order of 25% of the total development time) in our https://docs.cypress.io/ site plus https://github.com/cypress-io/cypress-example-recipes plus https://www.cypress.io/blog/ plus all the other example repositories. And we keep learning how to make the docs better.

Our users can freely contribute to the documentation by submitting to cypress-documentation, and have improved them tremendously. As of today, there were 93 contributors to the docs, and we cannot thank everyone enough.

If you are starting in testing, having complete guides like How to write your first test, or how to organize your code and test, or how to run your tests on CI is a MUST. You will learn the basics of test writing, and will gradually improve as you go along.

We have docs for every command, video tutorials for people who want to watch and learn, and even open source workshop material. Pick what suites your learning style and take the first step; you will progress very quickly.

Cypress and its docs

Productivity πŸ“ˆ

Your first job as a QA might ask you to ensure that the web app functions as intended. As in:

  • user visits the site
  • user clicks on the input field
  • user enters text and presses Enter key
  • app does something in response

Notice how the test is functional - the test exercises primarily how the web application behaves. So Cypress is 100% focused on writing such tests. The above test will probably look like this

1
2
3
4
5
6
7
8
9
10
it('works', () => {
// visit local url, or remote url
cy.visit('http://localhost:3000')
// type into specific box
cy.get('.input-box')
.click()
.type('my text{enter}')
// assert the app shows the result
cy.get('.result').should('be.visible')
})

The Cypress test looks soooo much like the user story, it should NOT be difficult to learn how to write them, even if you are just starting with JavaScript. As you write the code, you can keep the test runner open, and it will rerun the test when you change and save the test file.

Writing test

And Cypress ships with TypeScript definitions, that show up as IntelliSense help in most text editors. It is simple to write and change Cypress tests; and it is not just the API design or documentation - it is the test runner itself!

Debugging πŸ’»

The test runner shows every command as the test runs, and you can go back and see how the application looked during each step. The time-travelling debugger that keeps the DOM snapshots is huge help for anyone writing or debugging a failing Cypress end-to-end test.

Debugging Cypress test

This goes back to the Productivity section below - you will be more productive by using Cypress. Not only your tests will be quick to run, but writing new tests and debugging failed ones will be fast.

Popularity ⭐️

According to GitHub star counts (and these are the best predictors, right?) Cypress is in the same leagues as other E2E testing tools, after being open sourced for 10 months. Yup, it is growing fast.

Name Repo Stars
Selenum SeleniumHQ/selenium 11k
Karma karma-runner/karma 10k
Nightwatch nightwatchjs/nightwatch 8k
Protractor angular/protractor 7.7k
Cypress cypress-io/cypress 7.3k

It is more that just the test runner itself growing quickly in popularity as more people discover it. The SaaS services we have built on top of the test runner are optional, yet we have 20% month over month growth in number of organization and projects recording test results and test artifacts on Cypress Dashboard. So we must be doing something right! Learning how to write Cypress tests and use our Dashboard to parallelize test runs for example, might be what your next job is looking for.

Bonus 🎁

Cypress is framework-agnostic. You only work via a well-documented commands against the standard browser APIs like DOM, local storage, cookies, location, history, requests, etc. So learning how to test with Cypress a React application for example, translates into learning how to test any application.

You will also learn how modern browsers work. The tests run in a regular browser (Chrome), you can open DevTools, interact with the application, run custom code, see how each step changes the DOM, sets cookies, communicates with the server backend, etc. You will not be siloed into QA role away from the development roles, and as time progresses should be able to meaningfully contribute to designing code for greater testability and maintainability. With time, you might find yourself writing more code than tests, if that's something you find enjoyable.

Other opinions 🎀

Of course, there are people who disagree with me. After all, Selenium has been around for a while, and it is an official RFC standard. It will be a popular tool for a long time, no doubt. Its cross-browser and multiple language bindings are certainly very attractive. Read the following Cypress vs Selenium blog posts and see if their arguments convince you.

There were a couple of threads on Reddit discussion Cypress

Cypress limits ⚠️

You should also be aware of Cypress limitations. As of this writing, there is no cross-browser support, limited iframe support, etc, etc. But we are actively working to remove these restrictions, so stay tuned, our Roadmap is here.