経緯
playwright でブラウザ（Webアプリ）のE2Eテストを作成していました
その際に、
「あれ、うまくデバッグ実行できない・・・」
という状況におちいりました・・・
なお、
playwright を使っているということで、
Node.js、JavaScript(TypeScript)でE2Eテストを作成するときの話です
・・・
最近のWebアプリであればE2Eテストを作って毎日回したりするので
該当する人は割と多いんじゃないかなと思います
で、
playwright によるE2Eテストの実装時、
デバッグ実行したいですよね！！
「ここでテストがコケるんだけど何が原因なのか調査したい」
「実際、ブラウザがどういう画面、状態なのか見たい」
・・・
こういうことあるある・・・
playwrightをnode_modules に追加して
コンソール上から実行しているだけではデバッグ実行はうまくできないです
エディタ（VisualStudioCode）からテストケースを選択してデバッグ実行、ブレークポイントを立ててステップ実行する方法を自分用にメモ書きしたものを載せます
同じようにお悩みの開発者のお役に立てば嬉しいです
playwright のデバッグ実行の方法
０．事前準備：
・VisualStudioCode(以下、VSode) をインストールする
・playwright を追加する
※playwrightを実装している人なら既にやってると思うので詳細は割愛。
※この時点でplaywright のテストケースは1つ以上用意されていることとします。
余力があれば、playwright 自体の使い方も載せるかも。
１．VSCode に テストエクスプローラー機能を追加する
Playwright Test for VSCode
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
↓
すると、VSCodeに「テストエクスプローラー」が追加されます
２．「実行」⇒「構成の追加」からオプション引数を追加する
↓
「"args": ["--inspect-brk"]」 を追加する
３．テストエクスプローラーからテストケースを選択してデバッグ実行する
これで、デバッグ実行できるようになりました
あとは、必要に応じて、
テストコードの左端にブレークポイントを立てればそこで止まってくれます
ヘッドレスモードについては、
デバッグ実行すると、勝手にブラウザはヘッドレスモード：OFFで起動してくれるようです
結果
playwrightでデバッグ実行できた
・・・
この情報が皆さまのお役に立つことをねがっております
記事がいいなと思ったら❤ボタンをポチッとお願いします
おわり