web-dev-qa-db-fra.com

Débogage des tests Cypress dans Visual Studio Code

Je souhaite utiliser VS Code pour modifier et déboguer les tests Cypress. Il semble que cela devrait être simple; les documents de cyprès mentionnez directement VS Code (mais ne donnez aucun indice sur la façon de configurer le fichier launch.json de VS Code pour le débogage soit là-bas, soit sur la page de débogage). J'ai une configuration launch.json qui démarre cyprès/électron, mais VS Code donne cette erreur:

Impossible de se connecter au processus d'exécution… connectez ECONNREFUSED 127.0.0.1:5858

L'arrête ensuite.

Regarder exemple d'électron pour le projet VS Code n'aide pas (l'ajout des attributs protocol ou program n'a pas fonctionné).

Voici ma 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,
}
visual-studio-codecypress
10
dudeNumber4

La réponse de @ fhilton fonctionnait auparavant, mais avec les nouvelles versions de Cypress, cela empêchera Chrome de se connecter au lanceur de test et de ne pas exécuter de test. Utilisez-le à la place:

  1. Installez l'extension vscode Debugger for Chrome standard.
  2. Si vous ou l'un de vos collègues développez sous Windows, exécutez npm i cross-env.
  3. Dans package.json, ajoutez un script pour démarrer le lanceur de test Cypress (ou si vous avez déjà un script qui dit quelque chose comme cypress open puis il suffit de modifier cela). Vous voulez que le script définisse le CYPRESS_REMOTE_DEBUGGING_PORT variable d'environnement à quelque chose comme 9222 avant son exécution cypress open. Depuis que j'utilise Windows, j'utilise le cross-env Paquet npm pour définir les variables d'environnement. Par conséquent, le script de mon package.json ressemble à
"scripts": {
  "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
},

J'ai eu l'idée de le faire de ici et ici . Le reste de cette réponse est principalement ce que @fhilton a écrit dans sa réponse, donc la majeure partie du crédit leur revient.

  1. Ajoutez ce qui suit à la liste de configurations dans votre launch.json (notez le même port que ci-dessus)
{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Cypress Chrome",
    "port": 9222,
    "urlFilter": "http://localhost*",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "skipFiles": [
        "cypress_runner.js",
    ],
},
  1. Mettez le mot debugger dans votre test. Voir Cypress Doc sur le débogage . Ou, si vous avez confiance en vos cartes sources, mettez un point d'arrêt dans votre code avec vscode.
  2. Courir npm run cypr (ou ce que vous avez appelé votre script npm)
  3. À partir du lanceur de test Cypress, démarrez vos tests en cours d'exécution dans Chrome
  4. Démarrez le débogueur vscode avec votre nouvelle configuration "Attach to Cypress Chrome"
  5. Redémarrez le test avec un point d'arrêt et déboguez!
1
davidbludlow