Angular 2/4 Protractor端到端测试调试方法咨询

嘿，我之前也在Node 8环境下遇到过Protractor调试的问题，旧的browser.pause()确实用不了了，不过有几个替代方案，亲测好用：

Protractor本质是Node.js程序，所以可以借助Node的Inspector协议来调试，步骤很简单：

• 先关掉所有正在运行的Protractor进程
• 执行这条命令启动调试：

  node --inspect-brk node_modules/protractor/bin/protractor path/to/your/protractor.conf.js --specs=e2e/login.e2e-spec.ts
  

  • --inspect-brk会在代码开始执行前暂停，方便你提前设置断点
  • --specs参数指定只调试login.e2e-spec.ts，不用跑完全部测试，节省时间
• 打开Chrome浏览器，输入chrome://inspect，点击页面里的"Configure"按钮，添加localhost:9229（默认调试端口），之后就能看到你的Protractor进程，点击"Inspect"进入调试界面，在Sources面板找到你的spec文件，设置断点后就能逐行调试了

如果用VS Code开发，配置个调试文件就能直接在编辑器里调试，体验更好：

1. 打开VS Code的"Run and Debug"面板（快捷键Ctrl+Shift+D）
2. 点击"create a launch.json file"，选择"Node.js"环境
3. 把生成的launch.json替换成下面的内容：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Protractor Debug",
         "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
         "args": [
           "${workspaceFolder}/protractor.conf.js",
           "--specs=e2e/login.e2e-spec.ts"
         ],
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen",
         "skipFiles": [
           "<node_internals>/**"
         ]
       }
     ]
   }
   

4. 保存后，直接在login.e2e-spec.ts的代码行号左侧点击设置断点，然后点击调试面板的启动按钮，就能在VS Code里逐行调试了，还能实时查看变量、调用栈，非常方便

如果只是临时调试某一段代码，可以直接在spec文件里插入debugger;语句，比如：

it('should handle login correctly', () => {
  debugger; // 运行到这里会自动触发断点
  element(by.css('#username')).sendKeys('test-user');
  element(by.css('#password')).sendKeys('test-pass');
  element(by.css('#submit-btn')).click();
  // 后续断言代码
});

然后用方案1的命令或者VS Code的调试配置启动测试，运行到debugger语句时就会自动暂停，进入调试模式

几个注意事项 #

• 确保你的Protractor版本兼容Node 8，建议使用5.4.x及以上版本
• 如果用TypeScript，要在tsconfig.json里开启"sourceMap": true，这样调试时才能映射到.ts源文件，而不是编译后的.js文件
• 调试前最好关闭自动重启的工具（比如ng serve的热重载），避免干扰调试进程

内容的提问来源于stack exchange，提问作者ED209