In this article I’ll be explaining how to test your front-end applications with Cucumber using Cypress to run the assertions and a preprocessor to integrate both of them.

It will be split in two parts. The first one is where the Gherkin language will be explained, together with some examples and uses. In the second one, it will be about how to execute the commands of Cucumber with Cypress.

Photo by William Iven on Unsplash

Gherkin language

The Gherkin language follow a tab and line indentation. …

In this article I’ll be showing how I tested a front-end application with Cypress, together with some explanations of the most common usages and tools. Since the application is just to apply the techniques that I learned, the codebase is quite simple and it can be found here.

In another article, I explained how to install Cucumber together with Cypress to create user stories and implement each step. Although the focus is installing Cucumber, I also showed how to install Cypress (which is actually one command line).

Photo by Scott Graham on Unsplash

First steps

After installing cypress, there will be a new folder onto your project called…

In this post I will explain the saga to use cypress together with cucumber. I will not explain how to use only cucumber or only cypress, that’s a whole ‘nother story.

Photo by Kelly Neil on Unsplash

Cucumber and Preprocessor

First of all, I will suppose you already have Cypress installed, so it is only needed to install cucumber and the preprocessor. This can be done with the following commands

npm install --save-dev cucumber
npm install --save-dev cypress-cucumber-preprocessor

Once installed, go to your package.json and add the test script, together with some configuration for the preprocessor.

scripts: {
"test": "cypress run",
... …

Leonardo Tironi Fassini

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store