Cucumber.js
Required plugins:
JavaScript and TypeScript
, Gherkin
- The plugins are bundled with PhpStorm and enabled by default.
Cucumber.js
- Install the plugin on the Settings | Plugins page, tab Marketplace.
warning
Cucumber.js versions 6.0.0+ are supported in PhpStorm 2020.3.1 and later.
Cucumber.js is a test framework for behavior-driven JavaScript development. Cucumber.js tests are written in the human-readable Gherkin language and are stored in feature files that have the feature extension. PhpStorm integrates with Cucumber.js and recognizes features written in Gherkin, so you can run Cucumber.js test right from the IDE.
To work with Cucumber.js versions 6.0.0+, make sure you are using PhpStorm 2020.3.1 or later.
Download and install Node.js.
Make sure the JavaScript and TypeScript and Gherkin required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to Managing plugins.
Install and enable the Cucumber.js plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains Marketplace.
In the embedded Terminal (AltF12) , type one of the following commands:
npm install cucumber
for local installation in your project.npm install -g cucumber
for global installation.npm install --save-dev cucumber
to install Cucumber.js as a development dependency.
See also Cucumber.js demo on the Cucumber.js official website.
With PhpStorm, you can write step definitions both in JavaScript and in TypeScript. PhpStorm detects and highlights the steps where definitions are missing and suggests a quick-fix to generate them.
Place the caret at the step without a definition, press AltEnter, and select Create step definition or Create all step definitions.
Alternatively, hover over the step and use the links in the popup.
In the dialog that opens, specify the name for the new file and the language to write the definitions in.
If such file already exists, PhpStorm displays a popup where you have to select a file to add the definition to or choose to create a new file.
Cucumber.js tests are launched only through a run/debug configuration.
Open the Run/Debug Configuration dialog (Run | Edit Configurations in the main menu), click in the left-hand pane, and select Cucumber.js from the list. The Run/Debug Configuration: Cucumber.js dialog opens.
tip
To create a run/debug configuration for all the tests in a single test file, select Run <test filename> from its context menu.
To create a run/debug configuration for one scenario, select Create Scenario:<Scenario_name> from its context menu in the editor.
In the Feature file or directory field, specify the tests to run. Type the path to a specific .feature file or to a folder, if you want to run a bunch of features.
Specify the Node.js interpreter to use.
If you choose the Project alias, PhpStorm will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, PhpStorm detects the project default interpreter and fills in the field itself.
You can also choose another configured local or remote interpreter or click and configure a new one.
In the Cucumber package field, specify the path to the folder where the cucumber package is stored.
Specify the working directory of the application. By default, the Working directory field shows the project root folder. To change this predefined setting, specify the path to the desired folder.
Optionally:
In the Name Filter field, type the name of a specific scenario to run instead of all the scenarios from the feature file or directory.
Specify the command-line arguments to be passed to the executable file, such as
-r
--require LIBRARY|DIR
,-t
--tags TAG_EXPRESSION
, or--coffee
. For more information, refer to native built-in help available through thecucumber-js --help
command.In the Environment variables field, specify the environment variables for your application.
tip
If you create a run/debug configuration for one scenario (Create Scenario:<Scenario_name>), PhpStorm fills in the name of the scenario in the Name Filter field automatically.
Select the Cucumber.js run/debug configuration from the list of configurations and click in the list or on the toolbar.
Monitor test execution and analyze test results in the Test Runner tab of the Run tool window. For more information, refer to Explore test results.
To run a single test, open the test file in the editor, place the caret at the scenario to run, and then select Run Scenario: <scenario name> from the context menu.
To run all tests from a single test file, open the test file in the editor or select it in the Project tool window and choose Run <test filename> from the context menu.
In either case, PhpStorm creates a run/debug configuration which you can save and use later.
Set breakpoints where necessary.
Select the Cucumber.js run/debug configuration from the list of configurations and click in the list or on the toolbar.
Monitor test execution and analyze test results in the Test Runner tab of the Run tool window. For more information, refer to Explore test results.
To debug a single test, set the breakpoints where necessary, place the caret at the scenario to debug, and then select Debug Scenario: <scenario name> from the context menu.
To debug all tests from a single test file, open the test file in the editor or select it in the Project tool window and choose Debug <test filename> from the context menu.
In either case, PhpStorm creates a run/debug configuration which you can save and use later.
Create a Cucumber.js run/debug configuration as described above.
In the Before launch area, click , select Compile TypeScript from the list, and then specify the tsconfig.json file to use. PhpStorm will run the TypeScript compiler with this tsconfig.json before running Cucumber.js.
tip
Alternatively, set up TypeScript compilation as another build step.
To debug tests written in TypeScript, open your tsconfig.json and set
"sourceMap": true
to enable source maps.
With PhpStorm, you can jump between a file and the related test file or from a test result in the Test Runner Tab to the test.
To jump between a test and its subject or vice versa, open the file in the editor and select Go to | Test or Go to | Test Subject from the context menu, or just press CtrlShift0T.
To jump from a step in a .feature file to the step definition, press and hold Ctrl, hover over the step, and click the step when it turns into a link.
To jump from a test result to the test definition, click the test name in the Test Runner tab twice, or select Jump to Source from the context menu, or just press F4. The test file opens in the editor with the caret placed at the test definition.
You can configure Cucumber.js-aware syntax highlighting according to your preferences and habits.
In the Settings dialog (CtrlAlt0S) , go to Editor | Color Scheme | Cucumber.
Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors and fonts.
Thanks for your feedback!