Отладка Cypress-тестов в коде Visual Studio

Question

Я хочу использовать VS Code для редактирования и отладки Cypress-тестов.Кажется, это должно быть просто;Документы Cypress непосредственно упоминают VS Code (но не дают никаких подсказок о том, как настроить файл launch.json VS Code для отладки там или на странице отладки).У меня есть конфигурация launch.json, которая запускает кипарис / электрон, но VS Code выдает эту ошибку:

Невозможно подключиться к процессу времени выполнения… connect ECONNREFUSED 127.0.0.1:5858

Затем выключает его.

Просмотр образца электрона для проекта VS Code не помогает (добавление атрибутов protocol или program не работает).

Вот моя конфигурация:

{
    "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

Я настроил это сегодня, и это сработало!

1. Измените plugins / index.js для запуска Chrome в режиме отладки (--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
    }

  })
}

API запуска Cypress Browser

Добавьте следующее в файл launch.json (обратите внимание на тот же порт, что и выше)

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

Поместите слово «отладчик» в свой тест.См. Cypress Doc по отладке Запустите "Cypress Open" и запустите тест из # 3 в Chrome Запустите отладчик vscode с вашей новой конфигурацией "Присоединить к Chrome" Перезапустите тест с «отладчиком» и отладьте его!