Setting Cypress and Cucumber in e2e tests

Published in

assert(QA)

4 min readApr 3, 2019

Do you know Cypress? Have ever you used or even read its incredible documentation? If the answer is “no,” I have only one thing to say: “Don’t waste any more time!” Worth every second: Meet Cypress!

Why Cypress, Lucas?
Keeping our feet on the ground and without trying to scare or leave any new Developers or QAs anxious, Cypress really came to simplify the whole process of installing, configuring and writing our tests for web applications

All of us have already suffered in some way to configure the famous Selenium. There is a diversity of steps, many times confusing, where we need compatible versions of Java, drivers, browsers, even of Selenium itself, etc…It’s exhausting!

With Cypress, this has become very easy. I often say that the greatest difficulty for anyone who has worked with other tools is to understand that it is really simple to set up and use.

“Ah it’s not possible, it’s too easy to be true”.

It is common for us to try to complicate simple processes. A real example of this is to go through a test where the question comes: “How much is 2 + 2?”. Automatically we already imagined to be a catch, that the answer 4 is too obvious, and we start to make account with cubic root + logarithm + matrix * pi π + delta of the squared hypotenuse and, because we don’t get the expected result, we accept the previous result, still with the fear of being wrong.

Resume: The easiest way it’s not always the wrong or the worse one.

Installing and Configuring Cypress.
After creating a repository and starting with npm init we need to run the command npm install cypress --save-dev to save the Cypress locally as a devDependencies for your project (see package.json).

Now, to be easier than it already was, just run the Cypress with the command npm run cypress open to open Test Runner in interactive mode and accept the initial structure of the framework and yes, it’s over! Your project is already configured.

Configuring Cucumber.
A lib was created to integrate the Cucumber to the Cypress on which it was based on gherkin-testcafe. The cucumber-preprocessor is here: cypress-cucumber-preprocessor

Cypress’s documentation accepted this repository as a Plugin for us to have a way to support and extend Cypress’s behavior so we can execute our Cucumber specifications.

To install and configure is as simple as Cypress.

We use the command npm install cypress-cucumber-preprocessor --save-dev and after installed, will be seen in your package.json file. Now we go to the file cypress/plugins/index.js and we play the following code:

the code in the file: index.js

Finally, we create a .feature file in the folder cypress/integration/your_file.feature and another steps file in cypress/support/step_definitions/your_file_steps.js

There you go! Cypress with Cucumber is already set up and ready to run your web tests. Just for studies, I created a repository to play with a little here!

Conclusion.
Cypress is a new open source e2e test framework and in my opinion, has the differential in the following points:

Easily installed and configured;
There is, almost by default, the generation of videos and screenshots;
It is faster (sometimes too much) by directly iterating your browser tests;
Has an incredible real-time debugger;
Makes optimal control over asynchronous calls and promises “alone”;
Easy to write by having identical syntax to other JS frameworks;
Listening XHR is flawless to expect behaviors and affirmations;
It has a useful and simple API to use;
It has one of the best documentation of the test tool market;
Extremely Active Community.

But, since nothing is perfect, I believe that the following points are still in need of a revolution, even though we know that some are already on the roadmap:

Not having multi-browser support;
Parallelism is still new and being necessary the use of dashboard;
Lack of support for file uploads;
Integration with the automatic generation of cucumber of steps need to be improved;
Limitation when we try to visit more than one domain.

Anyway, as you can see, the points I found negative are very small. So it’s worth a try. I hope this post can generate curiosity and debates about the framework.

So that’s it, people. Any questions just comment here in the post.
Until next time! 💻

References:

Setting Cypress and Cucumber in e2e tests

Written by Lucas Fraga