在Visual Studio Code中调试Cypress测试

Question

我想使用VS Code编辑和调试赛普拉斯测试。看起来这应该很简单；赛普拉斯文档直接提到了VS Code（但没有提供有关如何配置VS Code的launch.json文件以在此处或在调试页面上进行调试的任何线索）。我有一个启动cypress / electron的launch.json配置，但是VS Code给出此错误：

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

然后将其关闭。

查看VS Code项目的示例电子没有帮助（添加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

@fhilton 的答案曾经有效，但是对于更新版本的 Cypress，它会导致 Chrome 无法连接到测试运行器并且无法运行任何测试。改用这个：

1. 为 Chrome扩展安装标准的 vscode调试器。
2. 如果您或您的任何同事在 Windows 中进行开发，请运行npm i cross-env.
3. 在 package.json 中添加一个脚本来启动 Cypress 测试运行程序（或者如果你已经有一个脚本，上面写着类似的内容，cypress open那么只需修改它）。您希望脚本在运行之前将CYPRESS_REMOTE_DEBUGGING_PORT环境变量设置为类似的值。由于我使用Windows，所以我使用npm包来设置环境变量。因此，我的 package.json 中的脚本看起来像9222cypress opencross-env

"scripts": {
  "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
},

我从这里和这里得到了这样做的想法。这个答案的其余部分主要是@fhilton 在他的答案中写的，所以大部分功劳归于他们。

4. 将以下内容添加到configurationslaunch.json的列表中（注意与上面相同的端口）

{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Cypress Chrome",
    "port": 9222,
    "urlFilter": "http://localhost*",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "skipFiles": [
        "cypress_runner.js",
    ],
},

5. 把这个词debugger放在你的测试中。请参阅有关调试的 Cypress Doc。或者，如果您对源映射有信心，请使用 vscode 在您的代码中放置一个断点。
6. 运行npm run cypr（或任何你称之为 npm 脚本的东西）
7. 在 Cypress 测试运行器中，开始在 Chrome 中运行测试
8. 使用新的“Attach to Cypress Chrome”配置启动 vscode 调试器
9. 使用断点重新启动测试并进行调试！

Answer 2

我今天设置了它，它起作用了！

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
    }

  })
}

赛普拉斯浏览器启动API

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

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

3. 在测试中放入“调试器”一词。有关调试，请参见赛普拉斯文档
4. 运行“ cypress open”，然后从Chrome中的＃3启动测试
5. 使用新的“附加到Chrome”配置启动vscode调试器
6. 重新启动带有“调试器”的测试，然后调试！