Playwright の VS Code プラグイン では Playwright のモジュール内にステップインできない

プラグインを利用したデバッグの制約

VSCode での Playwright によるテスト開発をサポートするプラグイン Playwright Test for VSCode では、デバッグ実行時に Playwright 内部のソースへのステップインができない。

あらかじめ Playwright 内部で実行されるコードが分かっている場合、ブレークポイントを設定すればステップインされるが、設定していない場合はスキップされてしまう。テストコードそのもののデバッグだけ実施したい場合は特に問題はないが、Playwright 内部の動作を確認したい場合には不便である。

実際、Playwright の API に対して vscode の Go 機能で Go to Definition や Go to Implementation を実行しても型定義の types.d.ts に飛んでしまう。また Go to Source Definition を実行しても、No source definitions found. とエラーが出て実装に飛ぶことはできない。

※自作のモジュールであれば tsconfig.json で declarationMap: true を設定して公開すれば Go to Source Definition で実装に飛ぶことができる。

そこで VS Code の デバッグ構成ファイル launch.json を別途定義し、node_modules 内のサードパーティモジュールの実装にステップインできるようにする。

launch.json の作成

.vscode/launch.json の定義は以下の通り。

./vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Playwright tests",
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**",
      ],
      "runtimeExecutable": "npx",
      "runtimeArgs": ["playwright", "test", "--debug", "${fileBasename}"]
    }
  ]
}

気にすべき設定は次の3点である。必要に応じて変更すること。

• skipFiles
  • デバッグ実行時にステップ実行したくないソースコードを指定する。
  • glob パターンでパスを指定できる。
  • Node.js の組み込みモジュール は <node_internals>/**/*.js のように指定することでスキップできる。（この例ではすべてをスキップする）
  • node_modules のパスは ${workspaceFolder}/node_modules で指定する。例えば、playwright モジュールだけを スキップしない 場合は以下のように設定する。

    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "!${workspaceFolder}/node_modules/playwright/**/*.js",
    ]
    

• runtimeExecutable
  • デバッグ実行時の実行ファイルを指定する。
  • 今回は playwright を実行したいため npx を指定する。
• runtimeArgs
  • デバッグ実行時の runtimeExecutable に与える引数を配列形式で指定する。
  • 今回は「playwright でのテスト実行をデバッグする: playwright test」「デバッグモードで実行する: --debug」「現在開いているファイルを対象にする: ${fileBaseName}」を指定する。

実行

デバッグ対象のソースコードを開き、Playwright API を使っている箇所にブレークポイントを設定する。

左サイドバーから Run and Debug パネルを開きパネル上部の再生ボタンを押すか、 F5 を押すなどしてデバッグ実行する。ブレークポイントで止まったら、ステップイン実行すると Playwright 内部のソースに飛ぶはずである。

Playwright Test for VS Code プラグイン の デバッグ実行とは異なる。

実行例

ブレークポイントを設定し、デバッグ実行する。

page.goto() の実装に飛ぶ。

以上