在WebStorm中调试Cypress

如何在WebStorm中设置Cypress调试？我可以在我的代码中得到一个

调试器

语句来暂停Chrome中的执行，并使用devtools进行调试，但WebStorm中什么也没有发生

无论我是在运行还是调试我的配置，这都是正确的，配置就是

npm run-cypress

（使用我的

cypress打开

脚本）。调试运行配置时，我在WebStorm中的断点上没有选中标记

WebStorm文档指的是从菜单中选择配置类型，但菜单中没有Cypress

---

可以这样做吗？

您可以在webstorm中将cypress作为节点作业运行。 为此：

设置cypress可执行文件的路径

选择您的文件夹作为工作目录

添加运行选项

run--spec-cypress/integration/Filters.feature

我使用cucumber，所以我提供了一个功能，如果您使用mocha，请使用与控制台中相同的跑步参数

---

这是一个过程，但当你完成后，它是值得的

请注意：

我在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扩展，以下是链接：

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

---

这将在调试对话框中打开一个新选项卡（默认为左下角）。打开显示脚本的选项卡。。。标签。在该对话框中导航到要调试的集成文件，双击它。插入一个断点，然后离开。

似乎不可能；我尝试了来自的VSCode配方，但它在Webstorm和VSCode中都不起作用……谢谢@bobdfish。我想我做到了，我能够在我的应用程序代码中设置断点。但是，调试器似乎没有附加到cypress代码。cypress代码中的断点没有选中标记，也不会暂停。值得一提的是，“脚本”框架在我的项目下没有我的cypress文件夹；它在localhost/_-cypress/iframes/integration下运行，但这没有帮助。配置中的@wdio是什么？