在Visual Studio Code中调试Cypress测试 [英] Debugging Cypress tests in Visual Studio Code

问题描述

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

I want to use VS Code to edit and debug Cypress tests. It seems like this should be simple; the cypress docs mention VS Code directly (but give no clues about how to configure VS Code's launch.json file for debugging either there or on the debugging page). I have a launch.json configuration that starts cypress/electron, but VS Code gives this error:

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

Cannot connect to runtime process… connect ECONNREFUSED 127.0.0.1:5858

然后将其关闭。

用于VS Code项目的示例电子不会 t帮助（添加协议或程序属性无效）。

Looking at the sample electron for VS Code project doesn't help (adding protocol or program attributes didn't work).

这是我的配置：

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

推荐答案

我今天进行了设置，并且成功了！

I set this up today and it worked!

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

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

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

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

1. 在测试中放入调试器一词。请参见有关调试的Cypress文档


2. 运行 cypress open并在Chrome中从＃3启动测试


3. 使用新的附加到Chrome配置启动vscode调试器


4. 使用调试器重新启动测试并进行调试！

1. Put the word "debugger" in your test. See Cypress Doc on debugging
2. Run "cypress open" and launch the test from #3 in Chrome
3. Start the vscode debugger with your new "Attach to Chrome" configuration
4. Restart the test with "debugger" in it and debug away!

这篇关于在Visual Studio Code中调试Cypress测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！