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

デバッグテスト

Playwright Inspector​

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

Playwright Inspector

デバッグモードで実行​

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

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

テストのステップ実行​

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

Playwright Inspector and browser

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

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

await page.PauseAsync();

page.pause() 呼び出しを追加したら、デバッグモードでテストを実行します。Inspector の「再開」ボタンをクリックすると、テストが実行され、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.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 インスペクターを起動すると、Playwright スクリプトのそれ以上の実行が妨げられ、事前構成済みのユーザーエージェントとデバイスエミュレーションがリセットされます。

ヘッド付きモード​

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

SlowMo オプションを使用して、実行速度を遅くする (操作ごとに N ミリ秒ずつ) こともでき、デバッグ中に動作を追跡できます。

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