Friday, 20 January 2017

Debug Protractor typescript tests with VsCode


Problem

I've been looking around how to debug unittests written on typescript with protractor and I was not able to do it.
There was many tutorials how to debug with javascript but non about typescript.
After reading source code I have found that protractor is using ts-node  so i started googling how to run debug and found an issue that its not possible to debug. The main problem as I understood is that ts-node is keeping files in memory so VSCode cant access them.

Solution

The solution would be to compile, and then run protractor from compiled sources.

Go!

Update package.json and add new script


"e2e-compile": "tsc -p e2e"

Then in VSCode press Ctrl+Shift+P to create npm task. It will create file in .vscode/tasks.json


{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "e2e-compile",
            "isBuildCommand": true,
            "args": [
                "run",
                "e2e-compile"
            ]
        }
    ]
}

Create in root folder protractor.config.debug.js

var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './dist/out-tsc-e2e/**/*.e2e-spec.js'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
   
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};

Create debug config .vscode/launch.json


{

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch e2e Tests",
            "type": "node",
            "request": "launch",
            "stopOnEntry": false,
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "args": [
                "${workspaceRoot}/protractor.conf.debug.js"
            ],
            "preLaunchTask": "e2e-compile",
            "cwd": "${workspaceRoot}",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/dist/out-tsc-e2e/*.js"
            ]
        }
    ]
}

Done!

We are almost done. 
NOTE! If you are running for first time then npm run e2e it will install and update webdriver.

Now we are done you can run debug, and see what is going in your unit tests, but remember that by default protractor come with jasmine and when you are debugging you are dealing with promises.


Source Code can be found here 
Volodymyr Bilyachat Web Developer