Debugging protractor using WebStorm

Question

I'm trying to use WebStorm in order to debug protractor e2e test, My objective is to be able to put breakpoints in the code of the tests. I'm new to this, so I'm probably doing something wrong.

As stated on the protractor tutorial , I updated the webdriver-manager and start it using this command in a cmd Terminal (I'm working on Windows):

webdriver-manager start

This is my protractor-conf.js file:

var ScreenshotReporter = require('./screenshotReporter.js');

exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',

  //baseUrl: 'http://localhost:9000',

  framework: 'jasmine2',

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

  specs: ['**/*_spec.js'],

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },

  onPrepare: function() {
    jasmine.getEnv().addReporter(new ScreenshotReporter("test-e2e/screenshotFailures/"));
  }
};

I created a configuration in WebStorm like this:

Node interpreter: C:\\Program Files\\nodejs\\node.exe

Working directory: C:*******\\ref-app

Javascript file: node_modules\\protractor\\lib\\cli.js

Application parameters: test-e2e/protractor-conf.js

And after I tried several things:

1. Run Protactor using Run Button in WebStorm: Failed: Angular could not be found on the page / : retries looking for angular exceeded

2. Debug Protractor using Debug Button in WebStorm: I can see this in the WebStorm console but nothing happens after:

    Using the selenium server at http://localhost:4444/wd/hub [launcher] Running 1 instances of WebDriver Started F 

3. Modify protractor-conf.js to add baseUrl

    baseUrl: 'http://localhost:9000', 

   Then start a local webserver on port 9000
   If I run Protractor using Run Button in WebStorm, it is working fine but I can't setup breakpoints
   If I Debug Prtoractor using Debug Button in WebStorm, I can just see this in the console but nothing happen after:
   

    Using the selenium server at http://localhost:4444/wd/hub [launcher] Running 1 instances of WebDriver Started 

EDIT: AS I say in my comment below, I'm using: protractor 3.1.0 WebStorm 11.0.3

WHen I'm trying to debug using webstorm, it opens a Chrome windows but the screen is completely blank and in the URL, you have : data:, (I don't think it is useful but I don't know what to try)

Any idea what I'm doing wrong ?

Answer 1

you can run node in the --inspect-brk mode, and attach a remote debugger, for example the chrome dev-tools:

start your app with ng serve and run

node --inspect-brk ./node_modules/protractor/bin/protractor ./protractor.conf.js

now node waits for a debugger to attach.

Then you can open chrome://inspect/#devices . There your app should appear. Finally click inspect at the target / your app and voila you can use now breakpoints and debugger; statements.