debugger
语句使执行在Chrome中暂停并使用devtools进行调试,但是在WebStorm中没有任何反应。无论我运行还是调试我的配置(仅为
npm run cypress
),情况都是如此(带有我的cypress open
脚本)。在调试运行配置时,我在WebStorm中的断点上没有勾选标记。WebStorm文档提到从菜单中选择配置类型,但菜单中没有Cypress。
这可能吗?
debugger
语句使执行在Chrome中暂停并使用devtools进行调试,但是在WebStorm中没有任何反应。npm run cypress
),情况都是如此(带有我的cypress open
脚本)。在调试运行配置时,我在WebStorm中的断点上没有勾选标记。debugger;
。 - Noumenon这是一个有点繁琐的过程,但完成后会很值得。
需要注意的几点:
我在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中检查。
这将在调试对话框框(默认左下角)中打开一个新标签。在https://yourproj ...选项卡中的脚本中导航到您要调试的集成文件,双击它。添加一个断点,就可以开始了。
你可以在WebStorm中将Cypress作为Node作业运行。
设置Cypress可执行文件的路径
选择您的文件夹作为工作目录
添加运行选项run --spec cypress/integration/Filters.feature
我正在使用Cucumber,因此提供了一个功能,如果您使用Mocha,请使用与控制台中相同的运行参数。