Navigating from Feature file to step defination: Any Plugins

Question

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.

Scholarship

Answer 1

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

You need to add the below in your settings:

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

cucumberautocomplete.steps => provide the path of the step definitions. cucumberautocomplete.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

Kilkenny

Thanks Naveen, In the setting.json I added the code but still it does not work – Scholarship

Could you please provide your user settings values: FYI this is what i have: { "workbench.sideBar.location": "left", "npm-intellisense.packageSubfoldersIntellisense": true, "editor.multiCursorModifier": "alt", "window.zoomLevel": 0, "workbench.statusBar.visible": true, "workbench.activityBar.visible": true, "cucumberautocomplete.steps": [ "step-definitions/*.js", "step-definitions/*.ts" ], "cucumberautocomplete.syncfeatures": "features/*.feature" } Ignore the other settings. my vscode is 1.25.1 version – Kilkenny

Answer 2

Having installed the extension alexkrechik.cucumberautocomplete, 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 cucumberautocomplete 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,
    "cucumberautocomplete.steps": [
        "subidr1/test/e2e/src/steps/*.steps.ts"
    ],
    "cucumberautocomplete.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.

Narine

This worked beautifully for me and should be accepted as the correct answer. – Hoiden