Introducción a E2E testing con Cypress Development

Cypress: Install and Write your first e2e test in less than 5 min

05/10/20 7 min. read

Testing is a fundamental part of any type of software development, hence methodologies such as TDD (Test-Driven Development), BDD (Behaviour-Driven Development) or ATDD (Acceptance Test-Driven Development) were created. These techniques suggest focusing on implementation, behaviour or acceptance criteria of a specific functionality even before starting the development itself.

Nowadays web development has evolved a lot, nobody is surprised anymore by a SPA (Single-page Application) made with React, Angular or Vue.js. But what about the world of e2e test automation? Some of us are still using tools invented more than 15 years ago.

In this article, I will tell you about Cypress, its advantages and moreover how to install and write your first test. A tool that in a very short time has become an important reference among front-end developers.

Contents

Before we start, what are the E2E tests? 🧠

End-to-End testing is a software quality assurance methodology for testing the flow of the application from start to finish. The objective is to simulate as much as possible the behaviour of a real user and to validate the integrity and reliability of the system.

In the test pyramid, E2E’s tests are placed at the top because they are much more expensive than the rest in terms of time and effort.

Most of us hate testing and that’s why we need tools that allow us to do it in an agile and fast way.

Cypress

What is Cypress? 🧐

Cypress is a modern, all-in-one testing framework. It is fast, easy to use and allows you to run tests on any web application. In just over 2 years since its release, it has become one of the most popular testing tools. This can be seen in the following chart of the GitHub open source community.

Cypress does not use Selenium, the tests are executed inside the browser controlling it through a backend process in NodeJS. In addition, it works at network level allowing the interception of all incoming and outgoing traffic to our application.

As the tests are executed within the browser, it has native access to all APIs such as window, document, etc. Furthermore, the execution is much faster than in other alternative tools.

Its installation is very simple, you only need to add a single dependency with NPM. Without losing time in configuration, connection with a remote server, etc.

Advantages of using Cypress 🎯

Cypress is all in one. With only one dependency and without configuration we have installed and configured the assertion library with mocking, stubing and without depending on Selenium. All this with the frameworks and libraries already known by front-end developers such as Mocha, Chai, Sinon, Lodash, jQuery, etc.

Unlike other tools, Cypress has a graphic interface that allows you to interactively view each of the steps and actions executed during the test, the status of the application, the duration of the test, the tests that have failed or passed.

Cypress Test Runner Window
Cypress Test Runner Window

In addition to other advantages such as:

  • Automatic waiting for elements (DOM not fully loaded, framework not fully started, AJAX request not completed, etc.) This minimizes false positives in failed tests
  • Automatic recording of the application status during the test run. This allows you to see what state the application was in at each step
  • Spies, stubs and mocks that, in addition to those of E2E, allow unit testing
  • Interception of AJAX / XHR requests to make assertions or create fixtures or mocks
  • Automatic screenshots and videos
  • Native debugging
  • Speed, test execution starts as soon as the application is loaded
  • Very complete documentation
  • Clear error messages

And last but not least Cypress can be extended with plugins that make this tool even more powerful. For example, you can include plugins that allow to make visual regression tests comparing multiple images of a screen to detect visual errors. Do you need to be able to access your Redux store to make assertions or do you use Cucumber and are you a fan of the BDD methodology? There are plugins for this.

How to install and run tests in Cypress: Example 👨‍💻

As I mentioned before, installing Cypress is super easy.

First of all, to install Cypress you need to have NodeJS and NPM installed. You can download it from the official NodeJS page.

Step 1: Install Cypress adding it to your NPM project or start a new one

We just need to add a dependency to our NPM project or create a new one.

If you have already created your NPM project, run the following command to install Cypress:

$ npm install cypress -D

If you want to create a project from zero, execute the following commands:

$ mkdir nombre-del-proycto && cd nombre-del-proyecto

$ npm init -y

$ npm install cypress –D

Step 2: Add the cy:open script to the package.json file

Once this is done, we are ready to start up Cypress and see it in action. But first, let’s modify the package.json file by adding a new cy:open script:

Cypress

Step 3: Open Cypress by running the script

Now let’s open Cypress by running the script we just created:

$ npm run cy:open

When you open it for the first time, Cypress will create the folder structure as in the image below and open a new window from which we can run our tests.

Cypress folder structure
Cypress folder structure
UI of the Cypress Test Runner
UI of the Cypress Test Runner

Step 4: run your first test

To run a test, click on any file created by Cypress in the examples folder. This will open the browser and run the test.

E2E test execution with Cypress
E2E test execution with Cypress

Clicking on any of the tests displays the list of actions and assertions that have been executed. In addition, we can see the status of our application before and after each step.

Inspecting test with Cypress
Inspecting test with Cypress

If we go to our editor we can see the code of the test itself that we have just executed.

Example code of a Cypress test
Example code of a Cypress test

As I mentioned before, in the folder that Cypress created for the first time, there are many examples that help you learn to interact with the elements and make assertions, among other things. I encourage you to take a look at them so you can practice. Don’t forget that Cypress has very good documentation that you can consult here.

Conclusions 👍

Of course Cypress is not the only option when it comes to automating E2E testing, but it has proven that this process can be fast, simple, reliable and developer-friendly. Furthermore, all the data points to Cypress being here to stay.

In the following articles I will show you the best practices and some tricks when working with Cypress.

daniil-desna

Daniil Desna

Santander Global Tech

Full Stack Developer, I love web technologies and especially JavaScript. I try to stay up to date in the world of software development and I never stop learning.

 

Other posts