Hands-on introduction to software testing with cypress

7 min readJan 20, 2021

This article is the first of three that will cover the set up of a complete CI/CD pipeline with docker, travis CI and Cypress. In this article we will start by introducing cypress on a small react application.

Summary :

What is software testing and why is it important ?
Example of a simple react application
Set up end to end testing with cypress on the application
Cypress dashboard for tests management

1- What is software testing and why is important :

Lets this point though a simple example : we are a team developing a game with three main entities : Hero, weapon_1 and enemy_1. After releasing our first version the game came up roses 😎 ✨. We had so much success that we would like to expend our game with new updates with two main entities :a new weapon weapon_2, and a new enemy enemy_2. “Juliette” is developing the weapon_2 while “Rene” is taking care of the enemy_2. Once they are done, before merging their version (branch) with the current master version of the project they need to run a list of tests :

Unit tests : tests every little function in the feature that we want to add, so that if there is an error we know directly where it comes from. For example we will test every attack possible for the entity enemy_2.
Integration tests : suppose that when we added the enemy_2 the weapon_1 can’t kill it at all. We need to run integration tests to make sure that after merging our version it didn’t have a negative impact on some features that were working correctly before.
End2End tests : These tests are meant to simulate the behaviour of the user while playing.
Stress tests : Tests the limits of the game, what if the users faces too many enemies ? will the game crash ?
…..

This is just a fraction of the amount of test types that exists 😳, but it gives us an idea of how a test would look like.

to answer the question concerning the importance of software testing, I would ask you to have a look at a bug that happened before I was born, due to a lack of tests and that costed more that 100 billions dollars to be repaired, also called the “Millennium bug” 💥!

2- Example of a simple react application :

in this paragraph we will be setting up a very simple react application with a simple login page, and test it using cypress. You will find all the necessary code here ✌️.

First you will need to download node, you can type node -v on your terminal to see if you already have it on your computer. If not make sure to download it using this link.

Then you can go on and type :npx create-react-app frontend on your terminal. This will initiate a very simple (ready to use ) application on your machine and you will be able to run it.

If everything run correctly you should be able to see this :

Lets start by running the command : npm run start , this will start the application in a development environment, probably on the port 3000 : http://localhost:3000/

You should see something like this :

Let’s change the app.js file a little in order to have a login form.

I suggest that you clone my github repository in order to have the same changes and to see the actions of end to end tests.

After cloning the github repository the application should look like this :

3- Set up end to end testing with cypress

Now it is time for us to set up a very simple cypress test for our small application. we are going to write our tests in a different repository.

Feel free to clone my git hub repository for cypress for faster setup.

If you wish to do steps by your own you can start by installing cypress in the folder of your choice:

$ npm install cypress -- save-dev

once it is done go on and type the following command to initiate a cypress project and open VS.

$ npx cypress open
$ code .

Once VS is open you will see 4 main folders :

fixtures : It will contain all the data that you might use for the test; you may store data or write mocks to satisfy requests.
Plugins : By default Cypress will automatically include the plugins file cypress/plugins/index.js before every single spec file it runs.
Support : this file is where you can store reusable pieces of code, such as functions or selectors (id, class … ) It is very useful when using Cucumber along with cypress.
Integration : It is here where all the tests are stored.

Lets write our first test within our react application 😊 :

You can go into the integration file that already contains many example tests and add a new file and name it, you should be able to see something like this(after deleting the other tests):

Now we would like to write two tests, the first one is gonna make sure we can visit our page. The second one is going to type some strings in the form inputs and click on submit and make sure that we are redirected to another page.

For the first test, we will use a built in function in cypress cy.visit that takes a url as an argument ( it can also take request header details ).We will also add a cy.should that makes sure that the current url corresponds to the one we want to visit. You can go on add the code bellow on the Integration file firstText.js if you haven’t already cloned the github repository.

describe('My First Test', () => {it('checks if the user can access the home page', () => {cy.visit("localhost:3000")
cy.url().should("include", "localhost")});

For the second test, we will be using the functions cy.get and cy.type() which is chainable, the first functions gets an element through one of its selectors, here we will use the id, meanwhile cy.type is here to write content inside the element.

Note : between each test a new session is created.

it('types something in the inputs and make sure that we are redirected', () => {cy.visit("localhost:3000");
cy.get("#username").type("Rida kejji")
cy.get("#password").type("originalPassword")
cy.get("#signIn").click()})

You should be able to see something like this :

We have an error, it comes from the fact that cypress can’t visit other urls that doesn’t have the same domain ( here localhost) and the same port (here 3000). In order to by-pass that we will use another command cy.request that will send a request to the url and receive the response without visiting it. cy.request needs an URL, we are going to scrap it from the href attribute of the sign in button :

it('types something in the inputs and make sure we are redirected', () => {cy.visit("localhost:3000");cy.get("#username").type("Rida kejji")cy.get("#password").type("originalPassword")cy.get("#signIn").should('have.attr', 'href').then((href) => {   cy.request(href).then((response) => {      cy.log(response);      expect(response.body).to.contains("wikipedia");   })  })})

here we first added the function cy.should('have.attr','href') it makes sure that the element that we get has an attribute ‘href’. When we add then we put as an argument what is inside of the href attribute. After that we make a request to the url present in the href with cy.request and fetched its response ( as javascript object) then we checked its body response.body to see if it contains the word “wikipedia”.

4- Set up a cypress dashboard :

This link from the official cypress support explains how to set up a new cypress dashboard project, and record tests !!! It is some very important for the next steps, as we will be setting a CI CD tool, that will run our cypress test in a non-interactive way through a command like npx cypress run .