メインコンテンツへスキップ

テストのデバッグ

VS Codeデバッガー​

より良い開発者エクスペリエンスのために、VS Code拡張機能をデバッグに使用することをお勧めします。VS Code拡張機能を使用すると、VS Codeでテストを直接デバッグし、エラーメッセージを確認し、ブレークポイントを設定してテストをステップ実行できます。

running test in debug mode

エラーメッセージ​

テストが失敗した場合、VS Codeはエディター内でエラーメッセージを直接表示し、期待されるもの、実際に受け取ったもの、および完全な呼び出しログを示します。

error messaging in vs code

ライブデバッグ​

VS Codeでテストをライブデバッグできます。「Show Browser」オプションをオンにしてテストを実行した後、VS Codeのいずれかのロケーターをクリックすると、ブラウザウィンドウでハイライト表示されます。Playwrightは、複数のマッチがある場合も表示します。

live debugging in VS Code

VS Codeでロケーターを編集することもでき、Playwrightはブラウザウィンドウで変更をリアルタイムで表示します。

live debugging in VS Code

ロケーターの選択​

テストサイドバーからロケーターを選択ボタンをクリックして、ロケーターを選択し、テストファイルにコピーします。次にブラウザで必要な要素をクリックすると、VS Codeのロケーターを選択ボックスに表示されます。キーボードの「Enter」を押してロケーターをクリップボードにコピーし、コードのどこにでも貼り付けます。キャンセルしたい場合は「Escape」を押してください。

Pick locators

Playwrightはページを検査し、ロール、テキスト、テストIDのロケーターを優先して最適なロケーターを特定します。Playwrightがロケーターに一致する複数の要素を見つけた場合、ロケーターを改善して、堅牢性を高め、ターゲット要素を一意に識別するようにします。これにより、ロケーターが原因でテストが失敗する心配がなくなります。

デバッグモードで実行​

ブレークポイントを設定するには、ブレークポイントを設定したい行番号の横をクリックし、赤い点が表示されるまで待ちます。実行したいテストの横の行を右クリックして、デバッグモードでテストを実行します。

setting debug test mode

ブラウザウィンドウが開き、テストが実行され、ブレークポイントが設定された場所で一時停止します。VS Codeのメニューからテストをステップ実行したり、一時停止したり、再実行したりできます。

running test in debug mode

Chrome DevToolsを使用したテストのデバッグ​

VS Codeで「Debug Test」を使用する代わりに、「Run Test」を選択します。「Show Browser」を有効にすると、ブラウザセッションが再利用され、テストとWebアプリケーションを継続的にデバッグするためにChrome DevToolsを開くことができます。

異なるブラウザでのデバッグ​

デフォルトでは、デバッグはChromiumプロファイルを使用して行われます。テストサイドバーのデバッグアイコンを右クリックし、ドロップダウンから「Select Default Profile」オプションをクリックすることで、異なるブラウザでテストをデバッグできます。

debugging on specific profile

次に、テストのデバッグに使用したいテストプロファイルを選択します。デバッグモードでテストを実行するたびに、選択したプロファイルが使用されます。テストの行番号を右クリックし、メニューから「Debug Test」を選択することで、デバッグモードでテストを実行できます。

choosing a profile for debugging

デバッグの詳細については、Visual Studio Codeでのデバッグを参照してください。

Playwrightインスペクター​

Playwrightインスペクターは、Playwrightテストのデバッグに役立つGUIツールです。テストのステップ実行、ロケーターのライブ編集、ロケーターの選択、アクションログの確認が可能です。

Playwright Inspector

デバッグモードで実行​

インスペクターを開くには、--debugフラグを付けてテストを実行します。これにより、Playwrightがデバッグ用に設定され、インスペクターが開きます。--debugが使用されると、その他の便利なデフォルト設定も適用されます。

  • ブラウザはヘッドフルモードで起動します
  • デフォルトのタイムアウトは0（=タイムアウトなし）に設定されます

すべてのブラウザで全テストをデバッグ​

すべてのテストをデバッグするには、--debugフラグを付けてテストコマンドを実行します。これにより、テストが1つずつ実行され、各テストに対してインスペクターとブラウザウィンドウが開きます。

npx playwright test --debug

すべてのブラウザで1つのテストをデバッグ​

特定の行の1つのテストをデバッグするには、テストコマンドの後にテストファイル名とデバッグしたいテストの行番号、そして--debugフラグを指定して実行します。これにより、playwright.configで設定された各ブラウザで単一のテストが実行され、インスペクターが開きます。

npx playwright test example.spec.ts:10 --debug

特定のブラウザでデバッグ​

Playwrightでは、playwright.configでプロジェクトを設定できます。設定後、--projectフラグとplaywright.configで設定したプロジェクト名を指定して、特定のブラウザまたはモバイルビューポートでテストをデバッグできます。

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug
npx playwright test --project="Microsoft Edge" --debug

特定のブラウザで1つのテストをデバッグ​

特定のブラウザで1つのテストを実行するには、テストファイル名とデバッグしたいテストの行番号、および--projectフラグとプロジェクト名を指定します。

npx playwright test example.spec.ts:10 --project=webkit --debug

テストのステップ実行​

インスペクターの上部にあるツールバーを使用して、テストの各アクションを再生、一時停止、またはステップ実行できます。テストコード内で現在の操作がハイライト表示され、ブラウザウィンドウで一致する要素がハイライト表示されます。

Playwright Inspector and browser

特定のブレークポイントからのテスト実行​

デバッグプロセスを高速化するには、テストにpage.pause()メソッドを追加できます。これにより、デバッグしたいポイントに到達するためにテストの各アクションをステップ実行する必要がなくなります。

await page.pause();

page.pause()呼び出しを追加したら、テストをデバッグモードで実行します。インスペクターの「Resume」ボタンをクリックすると、テストが実行され、page.pause()の場所でのみ停止します。

test with page.pause

ロケーターのライブ編集​

デバッグモードで実行中、ロケーターをライブ編集できます。「ロケーターを選択」ボタンの横には、テストが一時停止しているロケーターを示すフィールドがあります。このロケーターをロケーターを選択フィールドで直接編集でき、一致する要素がブラウザウィンドウでハイライト表示されます。

live editing locators

ロケーターの選択​

デバッグ中、より堅牢なロケーターを選択する必要がある場合があります。これを行うには、ロケーターを選択ボタンをクリックし、ブラウザウィンドウの任意の要素にカーソルを合わせます。要素にカーソルを合わせると、その要素を特定するために必要なコードが下にハイライト表示されます。ブラウザで要素をクリックすると、ロケーターがフィールドに追加され、そこで調整したり、コードにコピーしたりできます。

Picking locators

Playwrightはページを検査し、ロール、テキスト、テストIDのロケーターを優先して最適なロケーターを特定します。Playwrightがロケーターに一致する複数の要素を見つけた場合、ロケーターを改善して、堅牢性を高め、ターゲット要素を一意に識別するようにします。これにより、ロケーターが原因でテストが失敗する心配がなくなります。

アクションログ​

Playwrightがクリックアクションで一時停止するまでに、ログで確認できるアクション可能性チェックをすでに実行しています。これは、テスト中に何が起こったか、Playwrightが何をしたか、またはしようとしたかを理解するのに役立ちます。ログは、要素が可視であるか、有効であるか、安定しているか、ロケーターが要素に解決されたか、ビューにスクロールされたかなど、多くの情報を示します。アクション可能性が達成できない場合は、アクションが保留中として表示されます。

Actionability Logs

トレースビューア​

Playwright トレースビューアは、記録されたPlaywrightテストトレースを探索できるGUIツールです。左側で各アクションを前後に移動でき、アクション中に何が起こっていたかを視覚的に確認できます。画面中央には、アクションのDOMスナップショットが表示されます。右側には、時間、パラメーター、戻り値、ログなどのアクションの詳細が表示されます。コンソールメッセージ、ネットワークリクエスト、およびソースコードも探索できます。

トレースの記録方法とトレースビューアの使用方法の詳細については、トレースビューアガイドを参照してください。

ブラウザ開発者ツール​

PWDEBUG=consoleを設定してデバッグモードで実行すると、開発者ツールのコンソールでplaywrightオブジェクトが利用可能になります。開発者ツールは、次のことに役立ちます。

  • DOMツリーを検査し、要素セレクターを見つける
  • 実行中にコンソールログを確認する（またはAPI経由でログを読み取る方法を学ぶ）
  • ネットワークアクティビティおよびその他の開発者ツール機能を確認する

これにより、Playwrightのデフォルトタイムアウトも0（=タイムアウトなし）に設定されます。

Browser Developer Tools with Playwright object

ブラウザ開発者ツールを使用してテストをデバッグするには、まずpage.pause()メソッドを使用してテストにブレークポイントを設定し、実行を一時停止します。

await page.pause();

テストにブレークポイントを設定したら、PWDEBUG=consoleでテストを実行できます。

PWDEBUG=console npx playwright test

Playwrightがブラウザウィンドウを起動したら、開発者ツールを開くことができます。コンソールパネルでplaywrightオブジェクトが利用可能になります。

playwright.$(selector)​

実際のPlaywrightクエリエンジンを使用して、Playwrightセレクターをクエリします。例：

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

playwright.$と同じですが、一致するすべての要素を返します。

playwright.$$('li >> text=John')

[<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

Elementsパネルで要素を表示します。

playwright.inspect('text=Log in')

playwright.locator(selector)​

ロケーターを作成し、一致する要素をクエリします。例：

playwright.locator('.auth-form', { hasText: 'Log in' });

Locator ()
  - element: button
  - elements: [button]

playwright.selector(element)​

指定された要素のセレクターを生成します。例えば、Elementsパネルで要素を選択し、$0を渡します。

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

詳細なAPIログ​

Playwrightは、DEBUG環境変数を使用した詳細なロギングをサポートしています。

DEBUG=pw:api npx playwright test
注

WebKitの場合：実行中にWebKitインスペクターを起動すると、Playwrightスクリプトのそれ以上の実行が妨げられ、事前に設定されたユーザーエージェントとデバイスエミュレーションがリセットされます。

ヘッドフルモード​

Playwrightはデフォルトでブラウザをヘッドレスモードで実行します。この動作を変更するには、起動オプションとしてheadless: falseを使用します。

slowMoオプションを使用して実行を遅延させ（操作ごとにNミリ秒）、デバッグ中に追跡することもできます。

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });