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

テストのデバッグ

Playwright インスペクター​

Playwright インスペクターは、Playwright テストのデバッグに役立つ GUI ツールです。テストをステップ実行したり、ロケーターをライブ編集したり、ロケーターを選択したり、アクションログを表示したりできます。

Playwright Inspector

デバッグモードで実行​

Playwright テストをデバッグモードで実行するには、PWDEBUG 環境変数を設定します。これにより、Playwright がデバッグ用に設定され、インスペクターが開きます。PWDEBUG=1 が設定されている場合、追加の便利なデフォルトも設定されます。

  • ブラウザはヘッドレスモードで起動します。
  • デフォルトのタイムアウトは 0 (= タイムアウトなし) に設定されます。
PWDEBUG=1 dotnet test

テストをステップ実行する​

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

Playwright Inspector and browser

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

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

await page.PauseAsync();

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

test with page.pause

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

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

live editing locators

ロケーターの選択​

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

Picking locators

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

アクションログ​

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

Actionability Logs

トレースビューア​

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

トレースを記録し、Trace Viewerを使用する方法の詳細については、Trace Viewerガイドをご覧ください。

ブラウザ開発者ツール​

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

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

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

Browser Developer Tools with Playwright object

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

await page.PauseAsync();

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

PWDEBUG=console dotnet 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)​

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

playwright.inspect('text=Log in')

playwright.locator(selector)​

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

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

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

playwright.selector(element)​

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

playwright.selector($0)

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

詳細な API ログ​

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

DEBUG=pw:api dotnet run
注

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

ヘッダモード​

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

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

// Chromium, Firefox, or WebKit
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
    Headless = false,
    SlowMo = 100
});