How to debug Cucumber - Protractor in Visual Studio Code (VSCode)?

Question

I am trying to debug Gherkin Cucumber scenarios in Visual Studio Code but I am getting the following error:-

Parse error in 'zFunctionalTests\protractor_ui.conf.js': (1:1): expected: #EOF, #Language, #TagLine, #FeatureLine, #Comment, #Empty, got 'var baseConfig = require('./protractor_base.conf.js');'

I have created the following configuration:

launch.json

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "console": "integratedTerminal",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}\\node_modules\\cucumber\\bin\\cucumber-js",
            "protocol": "inspector",
            "args": [
                "${workspaceRoot}\\zFunctionalTests\\protractor_ui.conf.js",
            ],
            "outFiles": [
                "${workspaceRoot}/FunctionalTests/features/*.feature"
            ]
        }
    ]
}

protractor_ui.conf.js

var baseConfig = require('./protractor_base.conf.js');
var localConfig = baseConfig.config;

localConfig.capabilities = {
    'browserName': 'chrome',
    chromeOptions: {
        args: [
            '--start-maximized',
            '--no-sandbox',
        ]
    }
}

exports.config = localConfig;

protractor_base.conf.js

exports.config = {
  allScriptsTimeout: 15000,
  directConnect: true,
  baseUrl: "http://localhost:3000/",
  specs: ["./features/*.feature"],
  framework: "custom",
  frameworkPath: require.resolve("protractor-cucumber-framework"),
  cucumberOpts: {
    require: ["./steps/*.ts"],
    strict: true,
    dryRun: false,
    tags: true,
    profile: false,
    "no-source": true,
    tags: ["~@ignore"],
    compiler: []
  },
  capabilities: {},
  maxSessions: 1,
  multiCapabilities: {},
  allScriptsTimeout: 15000,
  getPageTimeout: 15000,
  onPrepare() {
    require("ts-node").register({
      project: "zFunctionalTests/tsconfig.e2e.json"
    });
    require("dotenv").config();
  }
};

I have tried things described in the following post but it's not working.

How to debug Cucumber in Visual Studio Code (VSCode)?

It may be due to while execution its not picking up tsconfig in which the target es5 is mentioned.

Any help will be appreciated.

Answer 1

1. Create launch.json using node.js environment
2. Copy paste the below code

{
"version": "0.2.0",
"configurations": [
{
"name": "ng e2e",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceFolder}/zFunctionalTests/protractor_single.conf.js"]
}]}

3. Now, go to step file and add breakpoints that you want to debug. And click on debug icon from vs code menu and start debugging

Note : workspace folder is your .vscode folder Hence, the paths mentioned here are based on assumptions of your folder structure. It may differ from actual path.

Answer 2

Have you replaced types with:

"types": ["chai", "cucumber", "node"]

in tsconfig.json file?