Using Cypress as e2e testing tool

Hello! In this post, I going to explain how to implement Cypress but first if you don't know what is Cypress you need to know that is an end to end tool to make automation test in your front-end applications.

Also, I have to say starting to use Cypress was very easy, this tool is popular and you can find plenty of documentation on the official website.

To set up Cypress, you need to have installed in your laptop node js. Also will be good if you have some knowledge of Javascript because Cypress uses this language but is not mandatory because is simple to use and reading this post will be enough.

It's important to say in you made the e2e test before with Protractor the differences with Cypress is you have to create a new repo only to store your e2e tests of Cypress, instead of using the same repo of your front-end application.

Well, to start we need create a new Folder where we are going to save our project, after inside that folder we open a terminal window a run this commands:

1- Initialize project:

npm init -y

2- Install Cypress:

npm i cypress

3- Open Cypress:

npx cypress

When you open Cypress for the first time they will ask if you want to add an example project, we can skip that.

Now you could see that we have a new folder in your project called cypress with this structure:

• fixtures (Where you store the data that you need to use for your test cases in a one or more Json files)

• integrations (In this folder you create your test cases)

Also we have plugins and supports folders that for now we are going to ignore.

In this example we are going to test Google web page, I recommend create a single file for every test a put the a number as prefix in the file name for example following this way:

Now as you can see every test case start with this line:

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

*(If you are using Visual Studio code as your IDE, I recommend adding the plugin "Cypress Snippets" because will help you when you start to write the test cases)

In the first test case of this example, we are testing the suggestions of Google when you search -> "hello world".
Also, I'm using a fixture file to store the values that I will use in the test case, as you can see in line 6 how to read the values stored in your fixture file:

You have to use always the helper "cy." and after that put the name of the method that you want, for example:

cy.visit("www.google.com")

This line is to indicate on which page we are going to run the test case (This is something that we need to do in every test case as the first step).

Another important method is get and the name of the selector, cypress uses the name of the css class of the element to know in which element you want to apply an action.

cy.get("#L2AGLb").click(); // accept google terms

For example, this line is accepting the google terms, you know when you enter to the google page for the first time this popup will appear.

An easy way to get the selector is to use the cypress way, check this gif to see how to do it:

Another important method is should, because works like an assert in a unit test:

    cy.get(":nth-child(2) > .eIPGRd > .pcTkSc > .wM6W7d > span").should(
      "have.text",
      "hello world java"
    );

For example, in this line we are checking that the first suggestion of google when you write in the text-box "hello world", going to be -> "hello world java". If that does not happen your test will fail.

Also, with cypress you can store videos and screenshots when you are running your test, these files going to be saved in the screenshot folder. And If you want to make and screenshot in a specific step of your test you only have to put:

cy.screenshot("screenshotName")

To know more explore my repo to see this example in detail and play a little with that, and create your cypress project:
https://github.com/fsystemweb/cypress-demo

Official Documentation:
https://docs.cypress.io/