Having trouble running a single cucumber scenario in VSCode? This extension can save you!

3 min readMay 6, 2020

If you are reading this article, Congrats! you already know the pain of running a single scenario/feature in CucumberJS.

When you run your whole test suite in the pipeline, you might not be worried much. But, when you develop your automation suite test by test, you may want to run a single scenario or single feature file just to check whether the code is working. Let’s just find out what are the native CucumberJS options available to run a single scenario.

It is very true that not all of us a CLI experts. Testers always love an impulsive way to easily run test cases. Things get more complex when we combine CucumbeJS with different web automation tools, like Protractor, Cypress, WebdriverIO, etc. To run a single scenario with protractor-cucumber setup, you have two ways

There is no way to bypass this tedious job.

But, what if I provide you a manager to manage all these repetitive tasks and quickly enable you to run a single scenario!

Install Cucumber-Quick

Cucumber-Quick is a VSCode extension that helps you to run cucumber scenarios and features directly from VSCode editor. You can simply right-click on any feature file and choose the option from the context menu to run a specific scenario or the whole feature file.

Cucumber Quick

Cucumber-Quick helps you to run cucumber scenario and features directly from vscode editor. You can simply right click…

marketplace.visualstudio.com

After installing the plugin, make sure to reload the VSCode editor.

Create Cucumber-Quick Configuration

After the successful installation, you need to tell Cucumber-Quick about the tool you are using to automate test scenarios.

It currently Supports —

Protractor Cucumber
WebDriverIo Cucumber
Cypress Cucumber Pre-processor
Native CucumberJS
Serenity-JS

The extension needs to understand what tool you are using and what are the different parameters specific to your test execution. Follow the steps below:

create settings.json file under .vscode folder (ignore if already created)
create the cucumber-quick option for the specific tool you are using. The configuration structure is shown below:

// .vscode > settings.json{
  "cucumber-quick": {
		"tool": "tool-name",
		"script": "npx tool-name relative-path/to/configurations"
	}
}

Protractor-Cucumber/ SerenityJS Configuration

// .vscode > settings.json{
  "cucumber-quick": {
		"tool": "protractor",
		"script": "npx protractor relative-path/to/protractor.conf.js"
	}
}

WebDriverIO Configuration

Make sure the WebDriverIO-cucumber setup uses wdio-test-runner, that means, it should have cucumberOpts enabled. Remember, the cucumber-boilerplate provided by WebDriverIO uses yadda as a cucumber framework. In that case, this extension will not work. But once you switch to wdio-test-runner, this extension will work like magic!

// .vscode > settings.json{
  "cucumber-quick": {
		"tool": "webdriverio",
		"script": "npx wdio relative-path/to/wdio.conf.js"
	}
}

Cypress-Cucumber-Preprocessor Configuration

Cypress cucumber preprocessor currently supports ruining specific features. Running specific scenario by scenario name is still not supported by cypress-cucumber-preprocessor. It supports to run a specific scenario by TAGS. You need to right-click on the Tags name in this case.
Cucumber-Quick only supports Cypress-Cucumber-Preprocessor V 2.1.0 or higher.
For other tools, execution happens in the VSCode Output terminal, but for Cypress, execution happens in the Integrated terminal.

// .vscode > settings.json
{
	"cucumber-quick": {
		"tool": "cypress",
		"script": "npx cypress-tags"
	}
}

Native Cucumber-JS Configuration

Note that: in scripts section, place the all features location as shown in the example configuration below:

// .vscode > settings.json
{
	"cucumber-quick": {
		"tool": "cucumberjs",
		"script": "npx cucumber-js relative-   path/to/**/*.feature --require relative-path/to/**/*.js"
	}
}