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:

Run Protactor using Run Button in WebStorm: Failed: Angular could not be found on the page / : retries looking for angular exceeded
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
```
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 ?

You can use browser.pause() see angular.github.io/protractor/#/… — KCaradonna
– KCaradonna, Commented Mar 24, 2016 at 15:41
I use browser.pause() and it is working but being able to debug using a proper IDE seems much better that command line debugging — Tonio
– Tonio, Commented Mar 24, 2016 at 15:53
It's definitely possible to set breakpoints using webstorm. angular.github.io/protractor/#/… Maybe try upgrading node, npm, update your protractor dependency to 3+, delete your node_modules folder, run npm update to get a clean folder and then try debugging through webstorm again. — Jesse
– Jesse, Commented Mar 27, 2016 at 17:33
I updated to Protractor 3.1.0, updated webstorm to the latest version, deleted node_modules and re-install, it didn't work... — Tonio
– Tonio, Commented Mar 31, 2016 at 9:14
Did you try this tutorial : angularjshowtos.blogspot.ca/2014/10/… I did follow the steps and it work fine for me with breakpoint — Hugo Doyon
– Hugo Doyon, Commented May 11, 2016 at 14:28

Michael R. · Accepted Answer · 2019-01-17 15:59:54Z

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.

answered Jan 17, 2019 at 15:59

Michael R.

4264 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Debugging protractor using WebStorm

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related