Cypress takes centre stage

Dominic PrawnStar Bauer
Sep 9 · 4 min read

In a time not so long ago a war waged on. The archetypical war between good and evil, right and wrong, toilet roll up and toilet roll down. The villains seemed to be winning the war for a long time. However there was a shining light in the darkness. A young hero emerged to combat the villains. His/her name was Cypress IO and this is is his/her story…

Now that I’ve aptly and over dramatically built up Cypress, your first question will most likely be, “What is Cypress?”. A valid question I concede.

I will use the website’s concise description:

Fast, easy and reliable testing for anything that runs in a browser.

Cypress is an end-to-end(E2E) testing framework designed from scratch in Javascript to improve browser testing.

Next an objection may be, “But we use Webdriver (or another Selenium based E2E testing tool).” I’ve used Webdriver myself and it wasn’t too bad. However, Selenium was built for a time before asynchronicity and thus Webdriver which is built on top of Selenium suffers dearly because of this.

Issues included flakey tests due to long load times, having to constantly use async await mixed with setTimeout() and test execution taking forever to complete. Also simply trying to set Selenium up is a mission in and of its self.

An example of using Webdriver to write a part of an E2E testit('should slide through gallery', async () => {
const gallery = await browser.$('.open-gallery-button')
await gallery.click()
await delay(2000) const rightSwipe = await browser.$('.right-arrow')
await rightSwipe.click()
await delay(2000) const paragraph = await browser.$$(
'div:nth-of-type(3) .caption-drawer .post-content p'
)
const paragraphText = await paragraph[2].getText()
expect(paragraphText).toEqual(
"With the hotel's location on a marina, you can enjoy the
freshest seafood in town."
)
const closeGallery = await browser.$('.vodal-close')
closeGallery.click()
await delay(5000)
})
Just in this pretty simple test you're spending 9 seconds waiting for things to load (and it's only ONE part of the E2E test). Also let's hope there isn't a drop in connectivity delaying the process for a bit - SPOILER ALERT test error due to flakiness
Image source Cypress Website

To get things going all you have to do is

npm i -S cypress

in an empty folder (I’m assuming you’ve already used npm init to get your package.json file.)

Then follow the instructions and run

node_modules/.bin/cypress open

Cypress will now open it’s GUI (Graphical User Interface) and will create a Cypress folder in your project folder. It will contain 4 other folders:

  • fixtures
  • integration
  • plugins
  • support

Let’s start off with the integration folder. This is where you will write all your tests. There will already be an examples folder. This contains pre-built tests you can use to give cypress a run. It should essentially leave your mouth firmly on the ground.

Next we have the support folder. It will contain two files:

  1. commands.js
  2. index.js (not really important for this tutorial)

You can write re-usable code into the commands folder and then call it later in your tests. Imagine you need to always click the accept cookies button on page load. You can simply write something similar to this to always close it without having to constantly repeat code on all tests:

Cypress.Commands.add('closeCookies', () => {  cy.get('.cookie-bar') // find cookie container by class    .find('.button') // find button in container     .click() // click the button in the cookie container})

Now all you need to do is use the closeCookies function in your tests and it will run all the commands that follow. Really neat and efficient.

Now we’re onto the pretty self-explanatory plugins folder. As it says in the name this is where you would add plugins that enhance Cypress.

Here’s an example of a vue-cli plugin which lets you run cypress tests using the vue-cli. Essentially allowing you to bake E2E tests into your Vue development workflow.

Finally the we have fixtures folder. You can use this to stub data for tests that require API calls, or simply to use repeated information such as

{
"email": "cypress@myhero.com"
}

If you didn’t go through the examples here’s a GIF that shows you Cypress in action :)

GIF from WebDevStudios

Cypress is a really interesting addition to the E2E testing world. At NONA we’ve made it our defacto E2E testing framework and personally I’m really excited to see how it grows going forward.

In conclusion, I hope this managed to show you:

  1. How easy cypress is to get up and running
  2. That it’s much more user friendly than Selenium based frameworks
  3. E2E testing will likely no longer be such a hassle to implement

P.S. The documentation Cypress has is simply beautiful!

NONA

A high-end custom software development studio focused on long-term partnership. Get in touch: studio@nona.digital

Thanks to James Gareth Smith

Dominic PrawnStar Bauer

Written by

Slowly trying to piece the world together one idea at a time :).

NONA

NONA

A high-end custom software development studio focused on long-term partnership. Get in touch: studio@nona.digital

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade