What is Cypress?

Cypress, a testing solution for web applications famous for making test-driven development fun for javascript developers.

Intro to Testing

We all know testing is the right thing to do before moving to production. But actually doing it in a front-end javascript project can be complicated, slow and just not fun. For many, the obvious solution is to simply not test anything at all. Well! that's not ideal.

Cyprus provides an open-source browser-based test runner that can experience your website just like the end-user would. It might fill out a login form, click the submit button, then navigate to the user dashboard, all of which happens programmatically based on the code you define. Every test is recorded in a snapshot and is saved at each step. This makes it possible to time travel through the user experience to figure out precisely why your code sucks.

Unlike traditional testing utilities, debugging can be performed directly from the browser dev tools. Not only does it work for end-to-end testing of an entire application, but it's also great for integration testing and unit testing of isolated components or javascript business logic.

Getting Started

To get started, install it into your project using:

npm install -D cypress

then run:

 npx cypress open

This pulls up the test runner automatically and creates a folder in the root of your project named cypress that contains all of your testing code.

Folder structure

The "fixtures" folder is where you would define mock data, the "plugins" folder allows you to look into the testing life cycle, the "support" folder is for your global configuration, and your main testing code lives in the "integration file" directory. Create a new file called "home.spec.js" inside the "integration" directory. First, we will create a test suite with the "describe" method:

/// <reference types="cypress" />

describe('example to-do app', () => {
  
})

Then before each test, we can run some setup code like telling cypress to visit a specific URL. 

/// <reference types="cypress" />

describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://www.sharooq.com')
  })
})

From there use the "it" method to describe a test case, where you might verify that the web page contains a certain piece of content.

/// <reference types="cypress" />

describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://www.sharooq.com')
  })

  it('displays two todo items by default', () => {
    cy.get('.todo-list li').should('have.length', 2)
    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
  })
})

The "get" method will grab an element from the dom and allow you to run assertions on it. Like it should have the text "Pay electric bill". It bundles the chai assertion library for behaviour-driven development which will autocomplete with IntelliSense.

From there you may want to find a form input and type something into it. 

/// <reference types="cypress" />

describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://www.sharooq.com')
  })

  it('displays two todo items by default', () => {
    cy.get('.todo-list li').should('have.length', 2)
    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
    cy.get('input').type('new todo item')
    cy.get('button').click()

    //Await for submition

    cy.get('h1').should('contain.text', 'Success!')
  })
})

After the form is filled out, submit it to update your database. The great thing about cypress is that it will automatically wait for async events, which means you don't need to add a bunch of sleepers in your test code. Now run your tests to watch everything go down visually. A snapshot of the dom is taken for every event. If an assertion fails, you can easily inspect the dom to see what went wrong. On top of that, you can open the selector playground to easily grab any element on the page. By default, it runs in Chrome but you can also run it in Firefox, Edge or Electron for desktop apps.

For more information, check out their official site.

Check my blog if you want to see more articles like this. Thanks for watching and I will see you at the next one.