A Little Bit of Cypress

2020-05-01

Intro

Cypress is currently the Test Automation solution per se in the JavaScript web world. The hype is ongoing and seems to be unbroken and unchallengeable. I heard lots of stuff about it but actually have never used it so far. Then one day I stumbled over Marie Drake’s blog post about Modern Web testing with Cypress and that gave me the kick to give it a try myself. Has testing really evolved with cypress the same as the web did in the recent years? Is cypress really that simple to set up and work with?
Well let’s see!

Let’s begin

Cypress has some trade-offs and limitations, that is for sure. But is it missing other important things which are important to me as a Mobile Test Automation Engineer? Unfortunately yes it does. Cypress currently won’t make it into my mobile testing tool belt 😢, because it does not support:

  • remote execution
  • other languages than JavaScript
  • 3rd party cross-browser testing tools
  • Mobile Test Automation for Android/iOS Apps

(Source)

But nevertheless (and I guess cypress isn’t build for doing Mobile App Test Automation anyway), let’s experiment a bit with it and do some baby steps in Web and API testing.

First baby steps

The installation procedure of cypress is easy. Here are the things I did in particular order to get cypress flying:

  1. Install node js
  2. Initialise a new nodejs project with: npm init
  3. Install cypress with for that specific project: npm install cypress --save-dev
  4. Open up the project in my favorite JavaScript IDE (VSCode 🎙 or Webstorm 🌪 or shall i just use both at once 🤔)
  5. Open up a terminal in the IDE and hit npx cypress open to start the Cypress Test Runner
  6. Additionally I have had a look at the official Getting Started to gain more insights.

That’s about it, six steps and I was done with setting things up for my very first cypress project! Pretty slick isn’t it?

First I started out with a very simple test using Mocha (which is build in to cypress) for creating the sample_spec.js.

sample spec

Next up I enjoyed myself by creating a Cucumber feature file with the corresponding implementation behind it. While developing and debugging or bug fixing cucumber scenarios, one can put the smart tag @focus in front of a scenario to just run one (or of course more) scenarios (out of many scenarios) focused.

google feature

Lastly I wanted to experiment a bit with API testing. The most challenging part here was to create a proper working API POST request with a proper body 😁

google feature

All in all: writing some first baby tests and testing these tests, fells very smooth and is actually pretty straight forward.

I am looking forward to working more on such small experiments 😉.
Here is my repo if you are interested:

Plugins

The list of plugins is quite impressive. In my baby-steps project I currently use the cy-api for api testing and the cypress-cucumber-preprocessor for the feature file Gherkin thingy (thanks Toyer for pointing me to this one!). Of course there are tons of other things I want to dive into and explore 🧭!

Conclusion

Despite the fact that I as a Mobile App Enthusiast can’t use cypress, I am impressed. Setting up cypress is done within a few seconds, while setting up Selenium needs a bit more of these seconds 😉. The documentation is right before perfection! I have probably never seen such a complete guide and information source for a tool ever before. Bravo and a big applause for that folks 👏🏼!
I think and I might probably be right, that the test automation space has evolved with that tool, specifically Test Automation in the wild wide web with JavaScript. Cross browser testing just works out of the box and I don’t need to install any additional drivers, that is nifty. Coincidentally three weeks ago, I got asked by a senior JavaScript developer which JavaScript tool for test automation I would recommend. Me as a JavaScript rookie and with not much of an idea what one can do with cypress, I said: “I would probably go with cypress and see how it proves itself in your project.”

Developers and automation engineers like to have a tool in their hands which is as close as possible to the “production code”. And sometimes it even may make sense to integrate an applications test automation framework into the same repo as the productive app code. But writing the right tests is still the hardest part of it all.

In order to develop the right tests you need to explore with a testers mindset the different paths of your application and understand from a business value perspective what your end-users are doing and what not.

I am not finished yet with experimenting with cypress, there is more to come in the coming weeks to my repo.

A bit of music

I don’t know why - but cypress always reminds me of Cypress Hill and their two songs from the nineties.

test

test

Maybe it’s just me getting a bit older. Let’s see how long cypress can make some noise in the clubs. 😉

Thanks for reading!
Stay safe and happy! 💃🏽

Further resources which may help

Blog Posts

Modern Web testing with Cypress
REST API testing with Cypress
API Testing with Cypress
Integrating Cypress with Cucumber and Gherkin
Introduction to E2E Testing with Cypress
Testing with Cypress - Basic API overview

Online Courses

TAU - Introduction to Cypress with Gil Tayar

Meetups

Cypress Meetup Groups around the world


Comments: