Debug Protractor-Cucumber tests in VSCode

Question

I'm using Angular 9, Node v14 and e2e tests using Cucumber, Protractor and protractor-cucumber-framework.

protractor.conf.js

exports.config = {
    // For configuring timeouts see https://www.protractortest.org/#/timeouts
    allScriptsTimeout: 31000,
    getPageTimeout: 30000,
    capabilities: {
        'browserName': 'chrome',
        'loggingPrefs': {
            // 'driver': 'ALL',
            // 'server': 'ALL',
            'browser': 'ALL'
        },
    },
    directConnect: true,
    baseUrl: 'http://localhost:7774/',

    framework: 'custom',

    // register Cucumber framework so that we can compile .feature files
    frameworkPath: require.resolve('protractor-cucumber-framework'),

    async onPrepare() {
        console.log("Register TypeScript compiler for tests");
        require('ts-node').register({
            project: require('path').join(__dirname, './tsconfig.e2e.json')
        });

        console.log("Setting waitForAngularEnabled to false");
        browser.waitForAngularEnabled(false);
    },

    // require feature files
    specs: [
        './features/**/*.feature'
    ],

    cucumberOpts: {
        // For configuration see https://github.com/cucumber/cucumber-js/blob/master/docs/cli.md
        require: [
            './pages/**/*.page.ts',
            './steps/**/*.step.ts',
            './support/**/*.ts'
        ],
        tags: "@SystemTest"
    }
};

tsconfig.e2e.json

...
    "compilerOptions": {
        "outDir": "../dist/out-tsc/e2e",
        "module": "commonjs",
        "sourceMaps": true,
        "target": "es6",
        "types": [
            "chai",
            "chai-as-promise",
            "node"
        ]
    }
...

launch.json

        {
            "name": "npm run e2e",
            "type": "pwa-node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run-script", "e2e"],
            "protocol": "inspector",
            "sourceMaps": true
        },

package.json

        "e2e": "protractor e2e/protractor.conf.js",

I can launch the debugger in VSCode, but the problem is that every breakpoint is an unbound breakpoint.

I also tried to add "inlineSourceMap": true in tsconfig.e2e.json and I also tried to add in launch.json

            "resolveSourceMapLocations": [
                "${workspaceFolder}/e2e/**",
                "!**/node_modules/**"
            ]

The problem seems to be that ts-node generates source maps in memory (that's why I tried inlineSourceMap). Is there any way not to use tsc to first compile the .ts files and source maps and then use the .js files, but instead still use ts-node.

Answer 1

I finally made it working. The problem is that ts-node compiles into memory and VSCode has no idea about sourcemaps. So I compiled first everything with sourcemaps (in a prealunch task) and then started the process in debug mode. And type: pwa-node doesn't seem to work, you should use type: node instead.