在WebStorm中调试Cypress

Question

在WebStorm中调试Cypress

webstormcypress

5

如何在WebStorm中设置Cypress调试？我可以在我的代码中使用debugger语句使执行在Chrome中暂停并使用devtools进行调试，但是在WebStorm中没有任何反应。

无论我运行还是调试我的配置（仅为npm run cypress），情况都是如此（带有我的cypress open脚本）。在调试运行配置时，我在WebStorm中的断点上没有勾选标记。

WebStorm文档提到从菜单中选择配置类型，但菜单中没有Cypress。

这可能吗？

- Jonathan Tuzman

1

似乎不可能; 我尝试了来自 https://dev59.com/pVQK5IYBdhLWcg3wEr8Y 的 VSCode 教程，但在 Webstorm 和 VSCode 中都无法工作... - lena

3个回答

2

这是一个有点繁琐的过程，但完成后会很值得。

需要注意的几点：

我在Mac上使用，版本号为2019.3.2，不过应该非常相似。

同时（目前）你必须使用Chrome浏览器，无法附加到electron。

首先，在package.json文件中，你需要有一些npm启动脚本（从技术上讲不是必需的，但可以使其他所有事情都变得非常简单）。以下是我的示例：

"scripts": {
    "start:ci": "serve --no-clipboard --listen ${PORT:-8080}",
    "cypress:open:localhost": "ENV=localhost npm run cypress:open",
    "cypress:open:dev": "ENV=dev npm run cypress:open",
    "cypress:open:qa": "ENV=qa npm run cypress:open",
    "cypress:open:staging": "ENV=staging npm run cypress:open",
    "cypress:open:production": "ENV=production npm run cypress:open",
    "cypress:open": "cypress open"
  },

接下来，您需要为npm设置调试配置。在Mac上，在运行->编辑配置...下。

使用npm模板添加新的配置（单击加号并选择npm）

该模板将有一个脚本下拉菜单，请选择您的npm脚本（我的设置为cypress：open：qa），然后单击应用。

现在，当您启动调试器时，它将打开您的cypress实例，并附加到cypress的调试。但是，您希望连接到浏览器，以便可以调试您的JS。

在chrome中启动任何测试，然后打开一个新标签（在cypress chrome实例中），转到chrome扩展站点并添加Jet Brains chrome扩展程序，这是链接：

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en

这将应用于cypress运行的chrome版本。当您运行测试时，右键单击JB图标并在WebStorm中检查。

这将在调试对话框框（默认左下角）中打开一个新标签。在https://yourproj ...选项卡中的脚本中导航到您要调试的集成文件，双击它。添加一个断点，就可以开始了。

- bobdfish

感谢 @bobdfish。我想我已经让它工作了，我能够在我的应用程序代码中设置断点。但是，调试器似乎不能附加到cypress代码。 cypress代码中的断点没有得到勾号，并且它们不会暂停。值得一提的是，“Scripts”框架没有我的cypress文件夹，但在localhost/_cypress/iframes/integration下有，但这并没有什么帮助。 - Jonathan Tuzman

提到的 JetBrains Chrome 扩展程序已经不存在了。 :( - thSoft

0

你可以在WebStorm中将Cypress作为Node作业运行。