Unable to run ".feature" file using badeball cucumber preprocessor

[GeorgeBeres]

Hi All,

Please can someone help with this cucumber preprocessor it does not seem to work for me in my Cypress test framework whatever I'm trying, when I have the @browserify configuration then I get one error straight after I run npx cypress open, then when I comment this out in my cypress.config.js file Cypress test runner window opens and I cam see the feature file, but when I try to run this I get an error like this asking for a loader, see error bellow:

**Error: Webpack Compilation Error
Module parse failed: Unexpected token (1:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Feature: End to end Ecommerce validation
| application regression**

cypress.config.js structure:

const { defineConfig } = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
// const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");


async function setupNodeEvents(on, config) {
  // Adding Cucumber preprocessor plugin
  await preprocessor.addCucumberPreprocessorPlugin(on, config);
  // on("file:preprocessor", browserify.default(config));
 
  return config; // Return modified config
}

module.exports = defineConfig({
  e2e: {
    setupNodeEvents,  
    specPattern: [
      'cypress/e2e/**/*.js', // Include JavaScript test files
      'cypress/e2e/BDD/*.feature', // Include BDD feature files
    ]
  },
});

package.json file structure:

{
"name": "test_auto_practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/e2e/BDD/ecommerce/*.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@cucumber/cucumber": "^11.0.1",
"cypress": "^13.15.2"
},
"dependencies": {
"@badeball/cypress-cucumber-preprocessor": "^15.1.5",
"@cypress/browserify-preprocessor": "latest",
"cypress-iframe": "^1.0.1"
}
}

I'm trying to learn this but not sure what is going on with this installation looked easy and config as well but when you run it you get errors. I would appreciate if someone could help me out with this! Bless!
@badeball 

[badeball]

Well, you can't really comment out that line and expect this to work, as it is pretty crucial.

[GeorgeBeres]

Hi @badeball,

Thanks for coming back on this, so basically browserify handles the running of this feature file?
When I have this in as above in my cypress.config.js file and I run Cypress in headed mode it does throw an error, and I'm just hitting a wall at this point not really understanding why is that when everything looks to be installed and configured fine, or perhaps I'm missing something? Please can you help me out with this I would really appreciate it!

The error when I run this in headed mode:

Your configFile threw an error from: /Users/gheorgheberes/Desktop/Test_Auto_Practice/cypress.config.js

The error was thrown while executing your e2e.setupNodeEvents() function:

cypress.config.js:9:27
7 | // Adding Cucumber preprocessor plugin
8 | await preprocessor.addCucumberPreprocessorPlugin(on, config);

9 | on("file:preprocessor", browserify.default(config));
| ^
10 |
11 | return config; // Return modified config
12 | }
13 |

ReferenceError: browserify is not defined
at setupNodeEvents (/Users/gheorgheberes/Desktop/Test_Auto_Practice/cypress.config.js:9:27)

It says that browserify is not defined, I have un-commented the config.

[badeball]

It says that browserify is not defined [..]

That's usually a big clue.

I recommend that you take a look at any of the many examples, all of which work.

[GeorgeBeres]

Okay cool, will have a look at that and see if I can spot out anything, but from your perspective is the cypress.config.js, and package.json files look correct?

Thanks for sharing that link with me, much appreciated!

[badeball]

Assuming your config looks like this, then no.

const { defineConfig } = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
// const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

...

You can't have some definitions commented out like this if you're using them.

[GeorgeBeres]

I have have removed that now so this is when I get the error, the browserify config is in as expected is not commented out anymore

[GeorgeBeres]

Will have I look at those examples and see if I can get to the bottom of this hopefully, thanks for the support.

[GeorgeBeres]

if all the config is in place then were is this not defined when I initially checked your examples/config folder for js as I use JavaScript to develop my tests, so I made sure that my package.json dependancies are same as yours, and of course I first tried using your cypress.config.js config structure and again still didn't work. Sorry so when you said, "That's usually a big clue." so what is the clue where is that not defined I'm just learning this and followed everything what you have in your repository I would really appreciate your help as I'm struggling with this a bit not IF I'm honest mate. Cheers

[GeorgeBeres]

that's the link for the your cypress.config.js i have first used when I searched for it: https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/examples/browserify-cjs/cypress.config.js

[badeball]

[..] still didn't work.

Saying this doesn't help me to help you. You need to clearly outline to me, the error you're experiencing. Furthermore, if you want my help, you also need to accurately communicate what it is that you're trying to run, IE. what does your project contain. Referring to a link is not accurate. Seeing as the examples work and your project doesn't, I don't trust that you're doing exactly the same as the example you're referring to.

I also don't understand your strategy here. Why don't you just use any of the working examples as a foundation and build on it?

[GeorgeBeres]

Hi,

I will just create a new project and then use an example and see if it runs, been struggling quite a lot with this lol

[GeorgeBeres]

Hi, I did try using this example from your repository:
https://github.com/badeball/cypress-cucumber-preprocessor/tree/master/examples/browserify-cjs

Same folder structure, same file path, config everything, yes the preprocessor is installed then I get and error like this when I try to run it:

Your configFile is invalid: /Users/gheorgheberes/Desktop/Cucumber Framework/cypress.config.js

It threw an error when required, check the stack trace below:

cypress.config.js:2:20
1 | const { defineConfig } = require("cypress");

2 | const browserify = require("@cypress/browserify-preprocessor");
| ^
3 | const {
4 | addCucumberPreprocessorPlugin,
5 | } = require("@badeball/cypress-cucumber-preprocessor");
6 | const {

Error: Cannot find module '@cypress/browserify-preprocessor'

it is only one installation command mentioned under Installation but nothing about browserify, can you adivise please?

[badeball]

it is only one installation command mentioned under Installation but nothing about browserify, can you adivise please?

No, I think you should have the capacity to figure this one out yourself. This should be fairly easily solved using a search engine and you need to try for yourself before involving me, as this really isn't a support forum.

[GeorgeBeres]

Hi Jonas,

I managed to do it, but one thing I think is missing from the repository which is not mentioned to install browserify, i.e. npm install --save-dev @cypress/browserify-preprocessor, i get your point no worries.