Debugging Cypress tests in Visual Studio Code

Question

I want to use VS Code to edit and debug Cypress tests. The cypress docs mention VS Code directly, but don't give any 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:

Cannot connect to runtime process… connect ECONNREFUSED 127.0.0.1:5858

Then shuts it down.

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

Here is my configuration:

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

Answer 1

@fhilton's answer used to work, but with newer versions of Cypress, it will cause Chrome to not be able to connect to the test runner and not run any tests. Use this instead:

1. If you or any of your co-workers develop in Windows, run npm i -D cross-env.

2. In package.json add a script to start the Cypress test runner (or if you already have a script that says something like cypress open then just modify that). You want the script to set the CYPRESS_REMOTE_DEBUGGING_PORT environment variable to something like 9222 before it runs cypress open. Since I use Windows, I use the cross-env npm package to set environment variables. Therefore, the script in my package.json looks like

   "scripts": {
     "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
   },
   

   I got the idea of doing that from here and here. The rest of this answer is mostly what @fhilton wrote in his answer so most of the credit goes to them.

3. Add the following to the list of configurations in your launch.json (note the same port as above)

   {
       "type": "chrome",
       "request": "attach",
       "name": "Attach to Cypress Chrome",
       "port": 9222,
       "urlFilter": "http://localhost*",
       "webRoot": "${workspaceFolder}",
       "sourceMaps": true,
       "skipFiles": [
           "cypress_runner.js",
       ],
   },
   

4. Put the word debugger in your test. See Cypress Doc on debugging. Or, if you are confident in your source maps, put a breakpoint in your code with vscode.

5. Run npm run cypr (or whatever you called your npm script)

6. From the Cypress test runner, start your tests running in Chrome

7. Start the vscode debugger with your new "Attach to Cypress Chrome" configuration

8. Restart the test with breakpoint in it and debug away!

Answer 2

I set this up today and it worked!

1. Modify plugins/index.js to launch Chrome in debug mode (--remote-debugging-port=9222):

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
    }

  })
}

Cypress Browser Launch API

2. Add the following to your launch.json (note the same port as above)

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

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