Debug Cypress in WebStorm - webstorm

Question

How do I set up Cypress debugging in WebStorm? I can get a debugger statement in my code to pause execution in Chrome and debug using devtools, but nothing happens in WebStorm.
This is true whether I am running or debugging my configuration, which is simply npm run cypress (with my cypress open script). When debugging the run configuration, I don't get checkmarks on my breakpoints in WebStorm.
The WebStorm docs refer to selecting your configuration type from the menu but there's no Cypress in the menu.
Is this possible to do?

Answer 1

it is a bit of a process but when you are done it is worth it.
Just a couple notes:
I use it on Mac, Version: 2019.3.2, however it should be very similar.
And (at this time) you have to be running the Chrome browser, you cannot attach to electron.
First, in your package.json file you need to have some npm launch script (not technically necessary, but makes everything else stupid simple) here is a sample of mine:
"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"
},
Next you need to setup a debug configuration for npm. On Mac that is under run->Edit Configurations...
Add a new configuration using the npm template (click the plus and choose npm)
The template will have a drop down for scripts, select your npm script (mine is set for cypress:open:qa) Then click apply.
Now when you launch the debuger it will open your cypress instance with debugging attached to cypress. However, you want to attach to the browser so you can debug your JS.
Start any test in chrome, then open a new tab (in cypress chrome instance) go to the chrome extensions site and add the Jet Brains chrome extension, here is the link:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en
This will apply it to the chrome version that cypress runs. When you are running your test you right click the JB icon and inspect in WebStorm.
This opens a new tab in your debug dialog box (default bottom left). Open the tab that says scripts in your https://yourproj... tab. Navigate in that dialog to integration file you want to debug, double click it. Slap in a break point and away you go.

Answer 2

There are two plugins that let your run cypress tests from Webstorm. Both let you select a single test and run it then see the result directly in webstorm.
The Pro version allow to debug tests in the cypress runner.
https://plugins.jetbrains.com/plugin/13819-cypress-support (free)
https://plugins.jetbrains.com/plugin/13987-cypress-support-pro (paid)
The pro version debugging capabilities:

Answer 3

You can run cypress as node job in webstorm.
For this:
Set the path to the cypress executable file
Select your folder as working directory
Add run options run --spec cypress/integration/Filters.feature
I am using cucumber so am giving a feature, if you use mocha use your run parameters the same as in the console.
Settings