在Visual Studio Code中调试赛普拉斯测试

Question

我想使用VS Code编辑和调试赛普拉斯测试。看起来这应该很简单; cypress docs mention VS Code directly（但没有提供关于如何配置VS Code的launch.json文件以便在那里或在调​​试页面上进行调试的线索）。我有一个启动cypress / electron的launch.json配置，但是VS Code会出现这个错误：

无法连接到运行时进程...连接ECONNREFUSED 127.0.0.1:5858

然后关闭它。

看看sample electron for VS Code project没有帮助（添加protocol或program属性不起作用）。

这是我的配置：

{
    "name": "Start integration_tests",
    "type": "node",
    "request": "launch",
    "stopOnEntry": false,
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/cypress",
    "runtimeArgs": [
        "open"
    ],
    "console" : "internalConsole",
    "port": 5858,
}

Answer 1

我今天设置了它，它工作了！

1. 修改plugins / index.js以在调试模式下启动Chrome（--remote-debugging-port = 9222）：

module.exports = (on, config) => {

  on('before:browser:launch', (browser = {}, args) => {

    if (browser.name === 'chrome') {
      args.push('--remote-debugging-port=9222')

      // whatever you return here becomes the new args
      return args
    }

  })
}

Cypress Browser Launch API

2. 将以下内容添加到launch.json中（请注意与上面相同的端口）

{
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 9222,
  "urlFilter": "http://localhost:4200/*",
  "webRoot": "${workspaceFolder}"
}

3. 在测试中加上“调试器”一词。见Cypress Doc on debugging
4. 运行“cypress open”并从Chrome中的＃3启动测试
5. 使用新的“附加到Chrome”配置启动vscode调试器
6. 使用“debugger”重启测试并调试！