Ben Willenbring

View Original

What the heck is Cypress?

A full-featured end-to-end testing framework written in Node.js that makes Selenium – and everything like it – look like a child’s beverage. It:

  • Is extremely easy to install, extend, and customize

  • Has a top notch visual test runner and CLI

  • Permits the use of ES6 syntax in tests

  • Supports multiple browsers

  • Has an enormous community of active users, and a flourishing ecosystem of plugins

Selenium = Child’s beverage

For all the reasons above, Cypress was and continues to be a hit with the engineers I work with. Tests are dead simple to write and maintain, and the framework is superbly well-documented with tons of great examples. When something goes wrong with Cypress (and it will) you can at least count on the fact that there will be a lot of support and documentation that is easily findable.


3 Problems that Cypress solves

Problem 1: Most test harnesses are total shit in terms of Developer Experience
I would estimate that worldwide internet searches of Selenium + Docker + virtual frame buffer have resulted in missed airline flights, destroyed relationships, tardy arrivals at parties, diminished GDP, and even thwarted countless romantic hookups.

With Cypress, you won’t have to fritter away your weekends googling dumb stuff, then signing up for a login and password to have the pleasure of reading horribly composed prose that maybe, just maybe contains a morsel of information related to why your test won’t work correctly in CI, or on another person’s laptop, or on your own laptop after you update Python.

Between 2014 - 2017, I typed a variation of the above search terms approaching Avogodro’s constant.

In all seriousness, the DX around Cypress iphones everything else. As you develop tests, you can run them in the test runner and watch them execute. This happens in a real browser by the way – NOT a browser emulator. Receiving instantaneous visual feedback on how your test interacts with your application cannot be overstated. On top of this, Cypress allows you to scrub backward / forward in the test runner and interact with the DOM at various points within your test.


Problem 2: Writing tests in framework xyz results in code that looks like proprietary gibberish

I’m making the following assumptions about you:

  • You’re an engineer, scrum master or product owner who likes to get stuff done!

  • You want test automation that’s bullet-proof, easy to write, and dead simple to understand

  • You’re familiar with 1 or more test harnesses that have been out for a while: Selenium, Robot, Sauce, Browserstack, Eggplant

  • You don’t want to be saddled with a monolithic homegrown test harness that is undocumented, poorly conceived, and produces non-deterministic results

  • You acknowledge that code is read way more often than it is written, and therefore, must be comprehensible

  • You don’t enjoy sifting through a forest of if-else statements


Problem 3: Test harnesses require a TON of extra dependencies: assertion libraries, time and date-handling libraries, cookie libraries, JSON parsing libraries, requests libraries, video recorders, etc.

Cypress has all of this stuff built right into it, available natively to all of your tests without needing any explicit imports.

  • Automatic video recording of test runs, transcoded to mp4 at configurable sample rates

  • Screenshots that can zero in on DOM elements or regions of the screen

  • Extremely robust assertion libraries (Chai/Mocha/Sinon)

  • Cookie handling and local storage management

  • Lodash (for array and object manipulation)

  • Moment.js (for common date and time formatting)

  • Bluebird (for Promises)

  • Reading/writing files on disk

  • Network stubs and spies


Why is Cypress so good?

It allows you to write and refactor non-trivial tests in a ludicrously short amount of time. Specifically:

  • Install Cypress and launch the visual test runner – 2 minutes

  • Write a trivial hello world test in – 1 minute

  • Write a non-trivial login test for YOUR app – about 5 minutes


Installation is easy, and takes about 2 minutes

See this content in the original post

Opening Cypress in a directory without a config file automatically scaffolds a project for you – like above^^. When you see this, just click OK.


Hello world < 1 minute

Make sure the test runner is open (if it’s closed, just do npx cypress open again). Create a file at cypress/integration/my.spec.js and paste this code into it:

See this content in the original post

Switch back to the test runner – it should now reveal your new spec. Click on the spec to launch it.

You’ll see the spec run in a new window…