Installing Cucumber on Cypress Framework

Before this article we have created a cypress project, you can reach this article from this link.In this topic we will learn how to install cucumber plugin on cypress. Let’s get started.

Firstly we will install two packages on our project. To install these packages we will use these two commands.

npm install @badeball/cypress-cucumber-preprocessor

npm install cypress @bahmutov/cypress-esbuild-preprocessor esbuild

After installing packages, your project package.json looks like that;

And after installation, you have to change something from your cypress.config.js file. You can add these codes to your cypress.config.js file

const createBundler = require(“@bahmutov/cypress-esbuild-preprocessor”);
const addCucumberPreprocessorPlugin = require(“@badeball/cypress-cucumber-preprocessor”).addCucumberPreprocessorPlugin;
const createEsBuildPlugin = require(“@badeball/cypress-cucumber-preprocessor/esbuild”).createEsbuildPlugin;
module.exports = defineConfig({
e2e: {
async setupNodeEvents(on, config) {
// implement node event listeners here
const bundler = createBundler({
plugins: [createEsBuildPlugin(config)],
});
on(‘file:preprocessor’, bundler);
await addCucumberPreprocessorPlugin(on, config);
return config;
},
specPattern: ‘cypress/e2e/features/*.feature’
},
});

After adding codes to your cypress.config.js file your file looks like at the below

I will create a file called features in this “cypress/e2e/features” structure and create a file named stepDefinitions in the “cypress\stepDefinitions” structure. Now , I will add a simple feature file and step definition file from the “https://github.com/badeball/cypress-cucumber-preprocessor” link.At the end of your projects and codes look like at the below.

Now, we will create a file named “.cypress-cucumber-preprocessor.json” in the root directory, after you add this code to the file.

{
“stepDefinitions”: [
“cypress/stepDefinitions/*.js”
]
}

After that you can open the cypress dashboard with “npx cypress open” and execute this test.

If you want to hide xhr/fetch add this code to the e2e.js file.

// Hide fetch/XHR requests
const app = window.top;
if (!app.document.head.querySelector(‘[data-hide-command-log-request]’)) {
const style = app.document.createElement(‘style’);
style.innerHTML =
‘.command-name-request, .command-name-xhr { display: none }’;
style.setAttribute(‘data-hide-command-log-request’, ‘’);
app.document.head.appendChild(style);
}