WebStorm 2019.2 Help

Cucumber.js

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. WebStorm integrates with Cucumber.js and recognizes features written in Gherkin so you can run Cucumber.js test right from the IDE.

Installing Cucumber.js

In the embedded Terminal (Alt+F12), 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.

You can also install the cucumber package on the Node.js and NPM page as described in npm and Yarn.

Creating test definitions

With WebStorm, you can write step definitions both in JavaScript and in TypeScript. WebStorm detects and highlights the steps where definitions are missing and suggests a quick-fix to generate them.

  1. Position the caret at the step without a definition, press Alt+Enter, and select Create step definition or Create all step definitions.

    Create Cucumber.js step definitions: quick-fix

    Alternatively, hover the mouse over the step and use the links in the popup.

    Creating Cucumber.js step definitions: invoke actions from the pop-up
  2. In the dialog that opens, specify the name for the new file and the language to write the definitions in.

    Creating Cucumber.js step definitions: choose language version

    If such file already exists, WebStorm displays a popup where you have to select a file to add the definition to or choose to create a new file.

    Creating Cucumber.js step definitions: select target file

Running tests

Cucumber.js tests are launched only through a run/debug configuration.

Create a Cucumber.js run configuration

  1. Open the Run/Debug Configuration dialog (Run | Edit Configurations on the main menu), click the Add button in the left-hand pane, and select Cucumber.js from the list. The Run/Debug Configuration: Cucumber.js dialog opens.

  2. 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.

  3. Specify the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

  4. In the Cucumber package field, specify the path to the folder where the cucumber package is stored.

  5. 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 or choose a previously used folder from the list.

  6. 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 details, see native built-in help available through the cucumber-js --help command.

Run tests via a run configuration

  1. Select the Cucumber.js run/debug configuration from the list on the main toolbar and click Run with Coverage to the right of the list.

    ws_select_run_configuration_cucumber_js.png

  2. The test server starts automatically without any steps from your side. View and analyze messages from the test server in the Run tool window.

  3. Monitor test execution in the Test Runner tab of the Run tool window.

Run and debug tests from a test file

  • To run or debug a single test, open the test file in the editor, position the caret at the scenario to run or debug, and then select Run Scenario: <scenario name> or Debug Scenario: <scenario name> from the context menu.

  • To run or 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 Run <test filename> or Debug <test filename> from the context menu.

In either case, WebStorm creates a run/debug configuration which you can save and use later.

Running and debugging tests written in TypeScript

  1. Create a Cucumber.js run/debug configuration as described above.

  2. In the Before launch area, click the Add button, select Compile TypeScript from the list, and then specify the tsconfig.json file to use. WebStorm will run the TypeScript compiler with this tsconfig.json before running Cucumber.js.

    Cucumber.js Run configuration: adding a Compile TypeScript Before launch task
  3. To debug tests written in TypeScript, open your tsconfig.json and set "sourceMap": true to enable source maps.

With WebStorm, you can jump between a file and the related test file or from a test result in the Test Runner Tab to the test.

  • Open the file in the editor and select Go To | Test or Go To | Test Subject from the context menu, or just press Ctrl+Shift+T.

  • 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, select the test name in the Test Runner tab and choose Jump to Source from the context menu. The test file opens in the editor with the cursor placed at the test definition.

Configuring syntax highlighting

You can configure Cucumber.js-aware syntax highlighting according to your preferences and habits.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Color Scheme | Cucumber.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.

Last modified: 17 September 2019

See Also