# Cucumber.js > **TL;DR** > Required plugins: > > > > `JavaScript and TypeScript` -  the plugin is bundled with IntelliJ IDEA and enabled by default. > > > > `Cucumber.js`, `Gherkin` -  install the plugins on the Settings | Plugins page, tab Marketplace. The plugins are available only in IntelliJ IDEA with the Ultimate subscription. > **Warning:** > Cucumber.js versions 6.0.0+ are supported in IntelliJ IDEA 2020.3.1 and later. [Cucumber.js](https://cucumber.io/docs/installation/javascript/) is a test framework for behavior-driven JavaScript development. Cucumber.js tests are written in the human-readable [Gherkin](https://docs.cucumber.io/gherkin/) language and are stored in [feature](https://docs.cucumber.io/gherkin/reference/#feature) files that have the `feature` extension. IntelliJ IDEA integrates with Cucumber.js and recognizes features written in Gherkin, so you can run Cucumber.js test right from the IDE. ## Before you start Procedure: 1. To work with Cucumber.js versions 6.0.0+, make sure you are using IntelliJ IDEA 2020.3.1 or later. 2. Download and install [Node.js](http://nodejs.org/#download). 3. Make sure the JavaScript and TypeScript plugin is enabled in the settings. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html). 4. Install the Cucumber.js and Gherkin plugins on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo). The plugins are available only in IntelliJ IDEA with the Ultimate subscription. ## Install Cucumber.js Procedure: * In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , 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](https://docs.npmjs.com/getting-started/using-a-package.json#specifying-packages). See also [Cucumber.js demo on the Cucumber.js official website](http://cucumber.github.io/cucumber-js/). ## Create test definitions With IntelliJ IDEA, you can write step definitions both in JavaScript and in TypeScript. IntelliJ IDEA detects and highlights the steps where definitions are missing and suggests a quick-fix to generate them. Procedure: 1. Place the caret at the step without a definition, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Create step definition or Create all step definitions. ![Create Cucumber.js step definitions: quick-fix](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_cucumber_generate_step_definition.png) Alternatively, hover over the step and use the links in the popup. ![Creating Cucumber.js step definitions: invoke actions from the pop-up](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_cucumber_generate_step_definition_popup.png) 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](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_cucumber_generate_step_definition_choose_language_version.png) If such file already exists, IntelliJ IDEA displays a popup where you have to select a file to add the definition to or choose to create a new file. [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/creating_cucumber_js_step_definitions_select_target_file.mp4) ## Run tests Cucumber.js tests are launched only through a run/debug configuration. Procedure: Create a Cucumber.js run configuration 1. Open the [Run/Debug Configuration](run-debug-configurations-dialog.html) dialog (`Run | Edit Configurations` in the main menu), click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) in the left-hand pane, and select Cucumber.js from the list. The [Run/Debug Configuration: Cucumber.js](run-debug-configuration-cucumberjs.html) dialog opens. > **Tip:** > To create a run/debug configuration for all the tests in a single test file, select `Run ` from its context menu. > > > > To create a run/debug configuration for one scenario, select Create Scenario: from its context menu in the editor. 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 runtime to use. If you choose the Project alias, IntelliJ IDEA will automatically use the project default interpreter from the Node runtime field on the [JavaScript Runtime](javascript-runtime.html) page . In most cases, IntelliJ IDEA detects the project default runtime and fills in the field itself. You can also choose another configured local or remote interpreter or click ![the Browse button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.general.ellipsis.svg) and configure a new one. 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. 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 more information, refer to native built-in help available through the `cucumber-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:), IntelliJ IDEA fills in the name of the scenario in the Name Filter field automatically. Procedure: Run tests via a run configuration 1. Select the Cucumber.js run/debug configuration from the list of configurations and click ![the Run icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.run.svg) in the list or on the toolbar. 2. 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](viewing-and-exploring-test-results.html). Procedure: Run tests from a test file * 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: ` 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 ` from the context menu. In either case, IntelliJ IDEA creates a run/debug configuration which you can save and use later. ### Debug tests Procedure: * [Set breakpoints](using-breakpoints.html) where necessary. Procedure: Debug tests via a run configuration 1. Select the Cucumber.js run/debug configuration from the list of configurations and click ![the Debug icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.debug.svg) in the list or on the toolbar. 2. 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](viewing-and-exploring-test-results.html). Procedure: Debug tests from a test file * To debug a single test, [set the breakpoints](using-breakpoints.html) where necessary, place the caret at the scenario to debug, and then select `Debug Scenario: ` 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 ` from the context menu. In either case, IntelliJ IDEA creates a run/debug configuration which you can save and use later. ### Run and debug tests written in TypeScript Procedure: 1. Create a Cucumber.js run/debug configuration [as described above](#createRunConfigCucumberJS). 2. In the Before launch area, click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg), select Compile TypeScript from the list, and then specify the `tsconfig.json` file to use. IntelliJ IDEA will run the TypeScript compiler with this `tsconfig.json` before running Cucumber.js. ![Cucumber.js Run configuration: adding a Compile TypeScript Before launch task](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_cucumber_rc_add_acompile_ts_before_launch_task.png) > **Tip:** > Alternatively, set up TypeScript compilation as another build step. 3. To debug tests written in TypeScript, open your `tsconfig.json` and set `"sourceMap": true` to enable source maps. ## Navigation With IntelliJ IDEA, you can jump between a file and the related test file or from a test result in the [Test Runner Tab](null) to the test. Procedure: * 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 `Ctrl+Shift+T` (Windows), `⌘ ⇧ T` (macOS), `⌘ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ ⇧ T` (macOS System Shortcuts), `Ctrl+Shift+T` (XWin), `Ctrl+Shift+T` (GNOME), `Ctrl+Shift+T` (KDE), `Ctrl+Shift+T` (Emacs), `Ctrl+Shift+T` (Sublime Text), `Ctrl+Shift+T` (Sublime Text (macOS)), `Ctrl+Shift+T` (NetBeans), `Ctrl+Shift+T` (Visual Studio), `Ctrl+Shift+T` (Visual Studio (macOS)), `Ctrl+Shift+T` (Eclipse), `Ctrl+Shift+T` (Eclipse (macOS)). * To jump from a step in a `.feature` file to the step definition, press and hold `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (NetBeans), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS)), hover over the step, and click the step when it turns into a link. [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/cucumber_js_navigate_from_a_step_to_its_definition.mp4) * 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` (Windows), `⌘ ↓` (macOS), `F4` (IntelliJ IDEA Classic (macOS)), `F4` (macOS System Shortcuts), `F4` (XWin), `F4` (GNOME), `F4` (KDE), `F4` (Emacs), `F4` (Sublime Text), `F4` (Sublime Text (macOS)), `F4` (NetBeans), `F4` (Visual Studio), `⌘ ↓` (Visual Studio (macOS)), `F12` (Eclipse), `F3` (Eclipse (macOS)). The test file opens in the editor with the caret placed at the test definition. ## Configure syntax highlighting You can configure Cucumber.js-aware syntax highlighting according to your preferences and habits. Procedure: 1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Color Scheme | Cucumber`. 2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in [Colors and fonts](configuring-colors-and-fonts.html). ## See also ### Procedures [Testing JavaScript](unit-testing-javascript.html) ### Reference [Run/Debug Configuration: Cucumber.js](run-debug-configuration-cucumberjs.html) ### External Links [https://github.com/cucumber/cucumber-js#cucumberjs](https://github.com/cucumber/cucumber-js#cucumberjs)