When I got the mission to start using Cypress, it was the first time I had to learn such a framework on my own. In the end, it was not such a hard task, the documentation is really good and there are enough code examples that cover the basic needs in application testing.

I would like to share with you my opinion on Cypress, why it is that easy to use and how it is different from other testing tools.

What is Cypress?

Cypress is an awesome front-end testing tool that can also be used for API testing. Cypress makes it easy for testing modern web applications because the whole framework is written in Javascript.

It is an open-source framework, built with the usage of frameworks that already exist, e.g., Mocha.js and Chai.js.

How is it different from other testing tools?

Most of the existing testing tools use Selenium for their internal background processing, while Cypress does not. That makes it easy for debugging and you have native access to every single object.

Cypress relies on a lot of open-source testing libraries, which makes it stable and familiar to work with. Cypress uses Mocha’s bdd (behavior-driven development) syntax. This makes it easy to use cypress for the first time if you have ever used a bdd syntax before. Another advantage is that Mocha gives Cypress async support, so it will wait until a function is done, before moving on.

How to set up Cypress?

First, we need to create an execution environment that helps to run and automate the browser tests. Since Cypress is a Javascript automation tool, we must use Node.js and NPM.

To start a new project, you must create a new folder: e.g., Cypress_demo.

Next, we need to create the package.json file and to do so we use the command “npm init -y”.

C:\cypress_demo>npm init -y

After the install we can open Cypress and run it, with the command:

C:\cypress_demo>npm install cypress

“npx cypress open”. You will see that there are already a few examples prepared in the “integration” folder. Since Cypress 10 there is no Integration folder anymore, it is renamed the “e2e” folder. And when you are going to write some tests it is the folder you should use.

C:\cypress_demo>npx cypress open

After you have opened Cypress, you can delete those examples and write your own tests.

I created a file that is called “demo.cy.js” in the “e2e” folder, and wrote this simple script:

describe('demo', () => {

  it('firstTest', () => {

    cy.visit('https://bignited.be/');

    cy.get('ul > li').first().as('navAbout')

    cy.get('@navAbout').click();

    cy.url().should('include', '/about')

  })

})

Cy.visit is used for visiting an url. With the cy.get we can ask for an element, next the .click is used for clicking on the element. Finally, the .url is going to check if we are on the right page according to the url. After executing this you get the test results as shown in the screenshot below.

My impression of working with the framework

Cypress is a great tool for starting with Test Automation, the documentation is very comprehensive and the examples they cite are quite easy to understand. This allows you to work with the tool very quickly. Cypress is also faster and more performant when you compare it to its competition. Even debugging your tests is easier and clearer, which gives you more clarity on failures of tests. Since Cypress is an open-source framework, it gets input from all over the world, which results in features that are really in demand by the users.

Have input on my article? I like to hear it!