Installing Cucumber with Cypress and cypress-cucumber-preprocessor

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",
 ...
},
...
"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
}
...

FYI: the … is any other code you might have.

The nonGlobalStepDefinitions is a mandatory need. It doesn’t work if this config isn’t there. I tried to remove it because the documentation says it’s optional, but actually they mislead to this optional conclusion. There’s again another misleading information when it’s said to try configuring it via cosmiconfig. But just ignore it, put the options in package.json and be happy!

“I can’t believe this was a misleading info… I wasted THREE HOURS trying to solve it”

In the cypress/plugins/index.js file, add the following code:

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Now, onto cypress.json, you can give basic configurations. I recommend using this:

{
  "testFiles": "**/*.feature",
  "ignoreTestFiles": ["*.js", "*.ts", "*.md"],
  "viewportWidth": 1360,
  "viewportHeight": 790
}

The above code will try to run only the .feature files, ignoring any other unnecessary file. Also, the height and width is explicitly declared so that you don’t need to guess what resolution cypress is using to test.

To make sure everything is alright, run the command:

npm run test

The response should be something like this:

0 scenarios
0 steps 
0m00.000s

Testing

Yay! Our environment seems ok now. But to make sure, shouldn’t we try to create a real test? To make your first test, you need to remember a couple of things. Basically, Cucumber + cypress work in the following way:

Everything that is test description/execution should be into cypress/integration folder.

Inside it, create your tests. Name it example.feature . Or anything with the .feature extension.

Next, create a folder called example . Or the name you gave to your .feature file.

Anything that’s inside this folder will be read by the corresponding .feature file. You can create all of your spec files inside it. The name doesn't matter here, since it will get all files, anyway. But it’s a good practice to name them example.steps.js, or anything with the .steps.js suffix (but it doesn't mean you cannot use .test.js, the suffix is up to you!).

After you created your first test file (feature file, together with the steps), once again run npm run test and it will run the example on your terminal. If a GUI version is better for you, change the command from cypress run to cypress open on the test script and a small window will be opened to run your tests.

For more information, you can check the pull request of the example or, for a more detailed view, the example github page.

References

How to integrate Cypress and Cucumber in your development flow in just a few weeks.

https://cucumber.io/docs/guides/10-minute-tutorial/

Behavior-driven React development with Cucumber

https://www.departmentofproduct.com/blog/writing-bdd-test-scenarios/

https://cucumber.io/docs/gherkin/reference/

https://github.com/TheBrainFamily/cypress-cucumber-preprocessor