angularjs - 使用 WebStorm 调试 Protractor

Question

我正在尝试使用 WebStorm 来调试 Protractor 端到端测试，我的目标是能够在测试代码中放置断点。我是新手，所以我可能做错了什么。

如 the protractor tutorial 所述，我更新了 webdriver-manager 并在 cmd 终端中使用此命令启动它(我在 Windows 上工作):

webdriver-manager start

这是我的 protractor-conf.js 文件:

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/"));
  }
};

我在 WebStorm 中创建了这样的配置:

节点解释器: C:\Program Files\nodejs\node.exe

工作目录: C:*********\ref-app

Javascript 文件: node_modules\protractor\lib\cli.js

应用参数:test-e2e/protractor-conf.js

在我尝试了几件事之后:

1. 使用 WebStorm 中的运行按钮运行 Protactor:失败:在页面上找不到 Angular/:重试寻找超出的 Angular

2. 使用 WebStorm 中的调试按钮调试 Protractor :我可以在 WebStorm 控制台中看到这一点，但之后没有任何反应:

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

3. 修改protractor-conf.js 添加baseUrl

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

   然后在端口 9000 上启动一个本地网络服务器
   如果我在 WebStorm 中使用运行按钮运行 Protractor ，它工作正常但我无法设置断点
   如果我在 WebStorm 中使用调试按钮调试 Prtoractor，我只能在控制台中看到它，但之后没有任何反应:
   

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

编辑:正如我在下面的评论中所说，我正在使用: Protractor 3.1.0WebStorm 11.0.3

当我尝试使用 webstorm 进行调试时，它会打开一个 Chrome 窗口，但屏幕完全空白，并且在 URL 中，您有:data:,(我不认为它是有用，但我不知道该尝试什么)

知道我做错了什么吗？

Answer 1

您可以在 --inspect-brk 模式下运行 node，并附加远程调试器，例如 chrome dev-tools:

使用 ng serve 启动您的应用并运行

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

现在节点等待调试器附加。

然后你可以打开chrome://inspect/#devices。你的应用程序应该出现在那里。最后单击目标/您的应用程序的检查，瞧，您现在可以使用断点和 debugger; 语句。