What I'm trying

I am trying to get the VSCode debugger working breakpoints with my Protractor E2E tests.

I've searched Google, Stack Overflow, GitHub, and haven't found something that works. I thought this would be a common scenario that would be easy to implement since the default workflow for creating Angular apps is to:

• Use VSCode
• With TS
• With Protractor for your E2E tests (protractor is added into new apps by default).

What I currently have

It's an Angular 6 application, just created, I haven't added anything additional.

I have two launch configurations, one for unit/component tests and one for normal use.

For the unit and component tests, I have a launch configuration for attaching to the running karma session.

For the regular debugging, I have a launch configuration for launching a chrome session.

The Problem

My problem is with the protractor e2e tests. If I run npm run e2e the server starts and the tests run but none of the breakpoints are hit.

The closest I've gotten is to start the app with: npm run start. And then to run this launch configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\node_modules\\protractor\\bin\\protractor",
            "args": [
                "${workspaceRoot}/e2e/protractor.conf.js"
            ]
        }
    ]
}

My breakpoints get hit, however the UI isn't loaded. If I continue execution from the break-point, the UI gets loaded and the tests pass.

Ideal scenario

Ideally I'd like to have:

• A launch configuration that starts the app server
• Launches chrome
• Loads the UI
• Stops at a break-point in the test