在 VSCode 中调试 Protractor-Cucumber 测试

Question

我正在使用 Angular 9，Node v14 和 e2e 测试，使用 Cucumber、Protractor 和 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",

我可以在 VSCode 中启动调试器，但问题是每个断点都是未绑定的断点。

我也尝试在 tsconfig."inlineSourceMap": true 中添加 e2e.json 我也尝试在 launch.json

中添加

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

问题似乎是 ts-node 在内存中生成源映射（这就是我尝试 inlineSourceMap 的原因）。有什么办法不使用tsc先编译.ts文件和source maps，然后使用.js文件，而是仍然使用ts-node。

Answer 1

我终于成功了。问题是 ts-node 编译到内存中并且 VSCode 不知道源映射。所以我首先用 sourcemaps 编译了所有东西（在一个 prealunch 任务中），然后在调试模式下启动了这个过程。而且 type: pwa-node 好像不行，你应该用 type: node 代替。

在 VSCode 中调试 Protractor-Cucumber 测试

Debug Protractor-Cucumber tests in VSCode

protractor

cucumberjs

ts-node

vscode-debugger