在 Visual Studio Code 中调试 Cypress 测试

Question

我想使用 VS Code 来编辑和调试 Cypress 测试。 cypress 文档 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

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

1. 如果您或您的任何同事使用 Windows 进行开发，请运行 npm i -D cross-env。

2. 在 package.json 中添加一个脚本来启动 Cypress 测试运行程序（或者如果您已经有一个类似 cypress open 的脚本，那么只需修改它）。您希望脚本在运行cypress open 之前将CYPRESS_REMOTE_DEBUGGING_PORT 环境变量设置为9222。由于我使用的是Windows，所以我使用cross-env npm 包来设置环境变量。因此，我的 package.json 中的脚本看起来像

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

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

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

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

4. 在您的测试中输入单词debugger。见Cypress Doc on debugging。或者，如果您对源映射有信心，请使用 vscode 在代码中设置断点。

5. 运行 npm run cypr（或任何你调用的 npm 脚本）

6. 从 Cypress 测试运行器，开始在 Chrome 中运行测试

7. 使用新的“附加到赛普拉斯 Chrome”配置启动 vscode 调试器

8. 重新启动测试并在其中进行断点调试！

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
    }

  })
}

Cypress Browser Launch API

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

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

1. 在您的测试中加入“调试器”一词。见Cypress Doc on debugging
2. 运行“cypress open”并在 Chrome 中从 #3 启动测试
3. 使用新的“附加到 Chrome”配置启动 vscode 调试器
4. 重新启动测试并在其中使用“调试器”进行调试！