In visual studio cod, How to navigate from feature to step definition. Do we need any additional plugins or any configuration needs to be added. I have downloaded the Cucumber (Gherkin) Full Support plugin but still cannot navigate from .feature to the step definition.

In visual studio cod, How to navigate from feature to step definition. Do we need any additional plugins or any configuration needs to be added. I have downloaded the Cucumber (Gherkin) Full Support plugin but still cannot navigate from .feature to the step definition.

• javascript
• selenium
• visual-studio-code
• webdriver-io
• gherkin

2 Answers 2

The documentation of Cucumber (Gherkin) Full Support plugin has the explanation for it.

You need to add the below in your settings:

{
"cucumberautoplete.steps": [
    "test/features/step_definitions/*.js",
    "node_modules/qa-lib/src/step_definitions/*.js"
],
"cucumberautoplete.syncfeatures": "test/features/*feature",
"cucumberautoplete.strictGherkinCompletion": true
}

cucumberautoplete.steps => provide the path of the step definitions. cucumberautoplete.syncfeatures => provide the path of the feature files

After this(might be after a restart), cmd + click(on mac) would take to the step definition.

Thanks, Naveen

Having installed the extension alexkrechik.cucumberautoplete, I tried modifying the settings from both the UI of the extension and its corresponding settings JSON (by default, mine were in ~/.config/Code/User/settings.json). But this didn't work because I got this error in the *.feature files: Was unable to find step for "Some feature description".

I noticed I had skipped a step mentioned in the extension docs... By default, it was getting the settings.json from my userspace and not my work(project)space.

For me, the solution was to go to the root directory of my project (usually outside of /src, where you have the package.json and node_modules/) and create a .vscode/ folder. Then, create a settings.json file and paste there the cucumberautoplete configuration with the paths relative to this brand new file.

Below I show a schema:

myProject/
├── node_modules
├── package.json
├── subdir1
│   ├── src
│   └── test
│       └── e2e
│           └── src
│               ├── features
│               │   └── myfeature1.feature
│               ├── mypageobject1.po.ts
│               └── steps
│                   └── mystep1.step.ts
└── .vscode
    └── settings.json

An example of configuration would be:

{
    "editor.detectIndentation": false,
    "window.zoomLevel": 0,
    "cucumberautoplete.steps": [
        "subidr1/test/e2e/src/steps/*.steps.ts"
    ],
    "cucumberautoplete.syncfeatures": "subidr1/test/e2e/src/feature/*.feature"
}

Note that you could use **/*.steps.ts and **/*.feature paths but every time the extension settings file changes, when you Ctr + Click on a feature description, you will need to wait for the editor to resolve the paths. Otherwise, there is no waiting time.