Running cucumber.js in WebStorm - angularjs

Question

I need help trying to run a cucumber feature file from within WebStorm. I want to do this as WebStorm allows me to run scenarios, instead of running whole features.
I am running an Angular client, and want to carry out end-to-end testing so I am using Protractor and Cucumber.
There are various errors I am getting depending on what I try, but the main ones are:
Error running test.feature
Cannot run program “usr/local/bin/cucumber.js” (in directory “My project's test directory”): error=2, No such file or directory
This is the error I get when trying to run a feature/scenario in WebStorm.
ReferenceError: browser is not defined
This is after I edit “Run Configurations” and pass in the path to the cucumber.js executable from ~/.nvm/versions/node/v5.10.1/bin/cucumber.js
and I have also tried passing in the cucumber.js exe that's located in the project, but I get the same error.
On the flip side, when I cd into my project root, and use protractor on the command line, after passing it my config.js file, it runs the feature file without a problem!
So as you can see, it seems to work on the command line using protractor, but with the number of feature files and scenarios I expect to have, it would be great to run scenarios individually.
For your information:
I can't remember how I installed NPM and Node, but the set up is as follows:
NPM: version 3.8.3. The directory for NPM is ~/.nvm/versions/node/v5.10.1/bin/npm
Node: version v5.10.1 ~/.nvm/versions/node/v5.10.1/bin/node
NodeJS: v0.10.25 /usr/bin/nodejs
Cucumber – I installed this globally, but also local to the project.
Protractor Cucumber-framework – installed as a dev dependency: see package.json file for project.
Protractor – installed globally.
The structure of my project is as follows:
Project
. http
. node_modules
.. cucumber
... bin
.... cucumber.js
. src
. test
.. step_definitions
... test_steps.js
..test.feature
. conf.js (for cucumber)
. karma.conf.js
. package.json
. webpack.config.js
contents of conf.js file:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'custom',
specs: [
'test/features/test.feature'
],
capabilities: {
'browserName' : 'chrome'
},
baseUrl: 'http://localhost:9000',
cucumberOpts : {
require: 'test/features/step_definitions/test_steps.js',
format: 'pretty'
},
frameworkPath: require.resolve('protractor-cucumber-framework')
};
project's package.json file contents:
{
"name": "test_draft",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --display-modules",
"dev": "webpack-dev-server --content-base http/ --hot --inline",
"test": "karma start"
},
"keywords": [],
"author": "",
"license": "UNLICENSED",
"dependencies": {
"angular": "^1.5.3",
"angular-ui-router": "^0.2.18",
"bootstrap": "^3.3.6",
"jquery": "^2.2.3",
"pikaday": "^1.4.0"
},
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"cucumber": "^0.10.2",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"karma": "^0.13.22",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.2.3",
"karma-mocha": "^0.2.2",
"karma-webpack": "^1.7.0",
"mocha": "^2.4.5",
"protractor-cucumber-framework": "^0.5.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.15",
"webpack-dev-server": "^1.14.1"
}
}
I just want to be able to right click a scenario, and run it.
There are various discussions related to Cucumber and WebStorm, however none of these have helped.
Your help would be much appreciated. Thanks in advance.

Answer 1

Check this Set Run Configuration for Cucumber in Webstorm and for the directory structure https://www.relishapp.com/cucumber/cucumber-js/docs/command-line-interface