Should I start with Cypress.io?

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.

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.

Tip: if you do not have Node installed on your machine, watch this video where I install Node on a Mac, and then install and open Cypress.

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.

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

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.

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.

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.

• Cypress.io – the reason why we’re not stuck with Selenium
• Cypress vs. Selenium, is this the end of an era?
• Why you should switch to Cypress for modern web testing?
• Running E2E tests with Selenium AND Cypress
• Cypress: The future of end-to-end testing for web applications
• and many more

There were a couple of threads on Reddit discussion Cypress

• How many of you use Cypress ?
• I want to learn automate UI testing

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.

Read more

• Cypress Skills Ladder