テストのデバッグ

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

ロケーターのライブ編集

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

ロケーターの選択

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

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)

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

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 環境変数を使用した詳細ロギングをサポートしています。

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));