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

テストのデバッグ

Playwright インスペクター​

Playwright インスペクターは、Playwright テストのデバッグを支援する GUI ツールです。テストをステップ実行し、ロケーターをライブ編集し、ロケーターを選択し、アクショナビリティログを表示できます。

Playwright Inspector

デバッグモードで実行​

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

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

テストのステップ実行​

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

Playwright Inspector and browser

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

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

await page.PauseAsync();

Once you add a `page.pause()` call, run your tests in debug mode. Clicking the "Resume" button in the Inspector will run the test and only stop on the `page.pause()`.

test with page.pause

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

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

live editing locators

ロケーターの選択​

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

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.$(セレクター)​

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

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

<button>Log in</button>

playwright.$$(セレクター)​

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

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

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

playwright.inspect(セレクター)​

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

playwright.inspect('text=Log in')

playwright.locator(セレクター)​

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

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

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

playwright.selector(要素)​

指定された要素のセレクターを生成します。たとえば、Elementsパネルで要素を選択し、`$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 オプションを使用して実行を遅延させ（1操作あたりNミリ秒）、デバッグ中に追跡することもできます。

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