テストのデバッグ

Playwrightインスペクター

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

デバッグモードで実行

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

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

ソースコードの場所を設定

デバッグ対象のソースコードをPlaywrightに認識させるには、`PLAYWRIGHT_JAVA_SRC` 環境変数を通じてソースディレクトリのリストを渡します。リスト内のパスは、macOS および Linux では `:` で、Windows では `;` で区切る必要があります。

Bash

# Source directories in the list are separated by : on macos and linux and by ; on win.
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

PowerShell

# Source directories in the list are separated by : on macos and linux and by ; on win.
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
$env:PWDEBUG=1
mvn test

Batch

# Source directories in the list are separated by : on macos and linux and by ; on win.
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
set PWDEBUG=1
mvn test

テストをステップ実行

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

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

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

page.pause();

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

ロケーターのライブ編集

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

ロケーターの選択

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

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

アクションログ

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

トレースビューアー

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

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

ブラウザ開発者ツール

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

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

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

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

page.pause();

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

Bash

# Source directories in the list are separated by : on macos and linux and by ; on win.
PWDEBUG=console PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

PowerShell

# Source directories in the list are separated by : on macos and linux and by ; on win.
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
$env:PWDEBUG=console
mvn test

Batch

# Source directories in the list are separated by : on macos and linux and by ; on win.
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
set PWDEBUG=console
mvn 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` 環境変数による詳細なロギングをサポートしています。

Bash

DEBUG=pw:api mvn test

PowerShell

$env:DEBUG="pw:api"
mvn test

Batch

set DEBUG=pw:api
mvn test

注意

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

ヘッド付きモード

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

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

// Chromium, Firefox, or WebKit
chromium.launch(new BrowserType.LaunchOptions()
  .setHeadless(false)
  .setSlowMo(100));