Teach Yourself Cypress

Getting started with testing

There are a ton of testing frameworks out there, and when you’re first learning code it’s tempting to ignore testing and just jump right in to the code. But testing can save you a lot of headaches down the road, especially when you’re building bigger applications or working with a team!

Why Cypress

Cypress is an awesome open-source testing framework that has a lot of really cool built-in features:

1. Watch your tests execute in real time

2. Easily find and add test elements with the Selector Playground

3. Capture bugs with screenshot and video

The easiest way to learn anything new (especially in programming) is to jump in and actually get coding, so I’ll give explicit instructions for getting set up, and you can code along!

Setup

1. To get started, we’ll work with a brand new react app. Run the command in the directory of your choice to create it:

$ create-react-app learn-cypress

2. Now open the new React project, and install cypress in the main directory: (this takes a few minutes…)

$ npm install cypress

3. Now, to actually open Cypress after it’s installed, run:

$ node_modules/.bin/cypress open

*click Okay, got it! when the cy window pops up. You can close this for now, we’ll come back to it in a moment!

Right off the bat, there are a ton of new files in the cypress directory!

Test files will all be in the ‘integration’ folder, so open that up and take a look at a few of the files.

This is a lot. It’s pretty overwhelming, but these example files are a great reference for different testing parameters and seeing the syntax.

Cypress actually adopted the Mocha bdd syntax for writing tests, so you can check out their documentation as well as Cypress’s to find the syntax you need:

Bundled Tools

DevDocs

Let’s start simple and create our own simple test.

Write your first test

You’ll notice in the example files, there is a beforeEach() action being called before the tests, and the cypress webpage linked in the .visit() is actually being visited — this means we can visit any site we want to practice this new language!

I decided on a simple calculator site so that I could test the outcomes of clicking on numbers and symbols, and getting the correct results for different operations:

https://www.theonlinecalculator.com/

1. Create a new test file

Name it whatever you’d like, as long as it ends in .spec.js (I named mine a_test.spec.js so that it would be at the top of the alphabetical file structure)

$ touch cypress/integration/examples/a_test.spec.js

2. Add the beforeEach method so that Cypress will visit the calculator site before each test:

 beforeEach(() => {
        cy.visit('https://www.theonlinecalculator.com/')
      })
        // tests will go in here //
})

3. Now it’s time to add our first test! We start with describe, which will describe what an entire block of tests will do:

describe('test math functions', () => {
})

4. Inside this describe, we can put several different tests — we’ll walk through the first one (addition) and you can try out your own after seeing the process (subtraction, division, etc). This gets inclosed in an it() block:

describe('test math functions', () => {
     it('can add two numbers', () => {
   })
})

5. Now for the fun part! To reopen the cypress tool, enter in your command line:

$ npx cypress open

You’ll see:

click on the a_test.spec.js (or whatever you named it) and the testing dashboard will open for that testing file:

Awesome — it’s already visited the calculator site, so now we can use the Selector Playground to find the elements we want to use in our tests:

We can get the element for the ‘7’ key, and copy it with the clipboard.

If we inspect the page (which you can do right on the cypress dashboard!), you can see that this html element also has a value=’7' attribute, which will be useful for doing the math we want to in our final test.

We know we can query select that element with [name=”seven”], and we can tell Cypress in the test to get the element and click on it with this syntax:

describe('test math functions', () => {
   it('can add two numbers', () => {
      cy.get('[name="seven"]').click()
   })
})

Great — so far so good! Now let’s repeat this with a few more elements, and we can get Cypress it actually click 7 + 3 =

describe('test math functions', () => {
   it('can add two numbers', () => {
      cy.get('[name="seven"]').click()
      cy.get(':nth-child(6) > .operator').click()
      cy.get('[name="three"]').click()
      cy.get(':nth-child(7) > .operator').click()
   })
})

Now, the last one’s the trickiest — we want to make sure the result is actually 10. If we inspect the results window from the console, we can see that the value attribute of the element changes depending on the result. The syntax for this would be:

cy.get('#display').should('have.value', '10')

Now, to put it all together:

You can see all the tests in the dashboard are passing!

For an added bonus (or if you prefer to run everything in your command line), you can see the tests in the terminal (make sure to add the file path of just this newly created test, or you’ll be waiting a while for every test in the directory to run):

$ npx cypress run -s "cypress/integration/examples/a_test.spec.js"

This will give you a very satisfying output of green checkmarks and passing tests:

To get even more endorphin-inducing green checks, practice adding more tests to this calculator file — make sure they are also in their own it() within the main describe() so they will be grouped with those tests in the output.

describe('test math functions', () => {
   it('can add two numbers', () => {
      cy.get('[name="seven"]').click()
      cy.get(':nth-child(6) > .operator').click()
      cy.get('[name="three"]').click()
      cy.get(':nth-child(7) > .operator').click()
   })
   
   it('can multiply three numbers', () => {
      
      // add new get calls here //
   }
})

Now check out the awesome Cypress docs for all the information you would ever need to write awesome tests for your own apps!

Recipes

Why Cypress?

Screenshots and Videos