At the moment, there are still not too many resources available online, highlighting the proper configuration of Protractor end-to-end tests written in TypeScript, especially when it comes to the debugging of the written tests.

One useful guide I would recommend you to go through in the first place was written by Volodymyr.

There is no way to debug TypeScript tests directly since all the generated JavaScript and source maps files by Protractor are kept in memory. For that reason, there are two steps involved to get the debugging working:

  1. Compile TypeScript source files to JavaScript files
  2. Run Protractor VS Code debugger on generated JS files

Setup

Following configuration needs to be added to get the debugging working:

  • VS Code debug configuration (tasks.json)
  • Protractor debug configuration (usually protractor.config.debug.js)
  • TS transpiler settings - to output transpiled files to proper location

Do not consider this as a full guide, I am just trying to highlight whatever I find important.

VS Code configuration

There are a couple of important options I would like to expand on:

  • "preLaunchTask": "builde2e" - this a gulp task in my case to transpile TS files to JS files prior the debugging is executed. The output path for generated files needs to be the same as the one specified in outFiles option.
  • "sourceMaps"=true and "outFiles": [ "${workspaceRoot}/dist/e2e/**/*.js" ] - really essential to get the debugging working.
// file: tasks.json
{
    "configurations": [
        {
            "name": "Debug Protractor",
            "type": "node",
            "request": "launch",
            "stopOnEntry": false,
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "args": [
                "${workspaceRoot}/protractor.config.debug.js"
            ],
            "preLaunchTask": "builde2e",
            "sourceMaps": true,
            "outFiles": [ "${workspaceRoot}/dist/e2e/**/*.js" ]
        }
    ]
}

Protractor configuration

Notice that we are providing Protractor with the path to the JavaScript files generated by the preLaunchTask in the specs option instead of TypeScript files which would be used in the non-debug Protractor configuration.

// protractor.config.debug.js
exports.config = {
    // The path to the seleniumServer executable instead of seleniumAddress.
    // Runs selenium server on execution start
    seleniumServerJar: './node_modules/selenium-standalone-jar/bin/selenium-server-standalone-3.0.1.jar',

    // Capabilities to be passed to the webdriver instance.
    capabilities: {
        browserName: 'chrome'
    },

    // Spec patterns are relative to the configuration file location passed
    // to protractor (in this example conf.js).
    specs: ['dist/e2e/**/*.e2e-spec.js'],
};

One more thing

In case you cannot get the debugging working and you are getting the Breakpoint ignored because generated code not found (source map problem?) error instead, double check that the tasks.json file is properly configured and you are not missing sourceMaps and outFiles configuration.

alt text

Resources