Answer a 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,
}

Answers

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!