web-dev-qa-db-ja.com

Visual Studio Codeでのサイプレステストのデバッグ

VS Codeを使用してサイプレステストを編集およびデバッグしたいと思います。これは簡単なはずです。サイプレスのドキュメント VSコードに直接言及 （ただし、VSコードのlaunch.jsonファイルをそこまたはデバッグページでデバッグするための構成方法についての手掛かりはありません）。 cypress/electronを起動するlaunch.json設定がありますが、VS Codeはこのエラーを出します：

ランタイムプロセスに接続できません…接続ECONNREFUSED 127.0.0.1:5858

その後、シャットダウンします。

VS Codeプロジェクトのサンプルelectron を見ても役に立ちません（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,
}
visual-studio-codecypress
10
dudeNumber4

@fhiltonの答えは以前は機能していましたが、サイプレスの新しいバージョンでは、Chromeがテストランナーに接続できず、テストを実行できなくなります。代わりにこれを使用してください。

  1. 標準のvscode Chromeのデバッガー 拡張機能をインストールします。
  2. あなたや同僚がWindowsで開発している場合は、npm i cross-envを実行します。
  3. Package.jsonに、サイプレステストランナーを開始するスクリプトを追加します（または、すでにcypress openのようなスクリプトがある場合は、それを変更します）。スクリプトがCYPRESS_REMOTE_DEBUGGING_PORTを実行する前に、9222環境変数をcypress openのようなものに設定する必要があります。私はWindowsを使用しているため、cross-env npmパッケージを使用して環境変数を設定しています。したがって、私のpackage.json内のスクリプトは次のようになります
"scripts": {
  "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
},

here と here からそれを行うというアイデアを得ました。この回答の残りの部分は主に@fhiltonが彼の回答で書いたものであるため、ほとんどのクレジットは彼らに支払われます。

  1. Launch.jsonのconfigurationsのリストに以下を追加します（上記と同じポートに注意してください）
{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Cypress Chrome",
    "port": 9222,
    "urlFilter": "http://localhost*",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "skipFiles": [
        "cypress_runner.js",
    ],
},
  1. Word debuggerをテストに入れます。 デバッグ時のCypress Doc を参照してください。または、ソースマップに自信がある場合は、vscodeを使用してコードにブレークポイントを設定します。
  2. npm run cypr（またはnpmスクリプトを呼び出したもの）を実行します
  3. サイプレステストランナーから、Chromeで実行するテストを開始します
  4. 新しい「Attach to Cypress Chrome」構成でvscodeデバッガーを起動します
  5. ブレークポイントを入れてテストを再開し、デバッグしてください！
1
davidbludlow