visual-studio-code - 在 Visual Studio Code 中调试 Cypress 测试

Question

我想使用 VS Code 来编辑和调试 Cypress 测试。柏树文档 mention VS Code directly ，但不要提供任何关于如何配置 VS Code 的 launch.json 的线索在那里或调试页面上进行调试的文件。
我有一个 launch.json启动 cypress/electron 的配置，但是 VS Code 给出了这个错误:

Cannot connect to runtime process… connect 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 的答案曾经有效，但是对于较新版本的 Cypress ，它将导致 Chrome 无法连接到测试运行器并且无法运行任何测试。改用这个:

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

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

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

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

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

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

放字debugger在你的测试中。见 Cypress Doc on debugging .或者，如果您对源映射有信心，请使用 vscode 在代码中放置断点。

运行npm run cypr (或者你叫你的 npm 脚本的任何东西)

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

使用新的“附加到 Cypress Chrome”配置启动 vscode 调试器

重新启动带有断点的测试并调试!