时间戳

首页 > 解决方案 > 在 Visual Studio Code 中调试 Cypress 测试

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

问题描述

我想使用 VS Code 来编辑和调试 Cypress 测试。cypress 文档直接提到了 VS Code，但没有提供任何关于如何配置 VS Codelaunch.json文件以进行调试的线索，无论是在那里还是在调试页面上。

我有一个launch.json启动 cypress/electron 的配置，但是 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,
}

标签： visual-studio-codecypress

解决方案

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

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

  2. 在 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 在他的答案中写的，所以大部分功劳归于他们。

  3. 将以下内容添加到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",
    ],
},

  4. 把这个词debugger放在你的测试中。请参阅Cypress Doc 中的调试。或者，如果您对源映射有信心，请使用 vscode 在代码中放置断点。

  5. 运行npm run cypr（或任何你称之为 npm 脚本的东西）

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

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

  8. 重新启动带有断点的测试并调试！

推荐阅读