CODEWITHSUNDEEP
angularjsdebuggingprotractorwebstormbreakpoints
Tonio
Tonio

Reputation: 5004

Debugging protractor using WebStorm

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 ?

Upvotes: 3

Views: 1108

Answers (1)

Michael R.
Michael R.

Reputation: 416

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.

Upvotes: 1

Related Questions