テストのデバッグ

Playwright インスペクター

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

デバッグモードで実行

Playwright テストをデバッグモードで実行するには、PWDEBUG 環境変数を設定します。これにより、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 Trace Viewerは、テストの記録されたPlaywrightトレースを探索できるGUIツールです。左側で各アクションを前後に行き来でき、アクション中に何が起こっていたかを視覚的に確認できます。画面中央には、アクションのDOMスナップショットが表示されます。右側には、時間、パラメーター、戻り値、ログなどのアクションの詳細が表示されます。コンソールメッセージ、ネットワークリクエスト、ソースコードも探索できます。

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

ブラウザ開発者ツール

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 Inspector を起動すると、Playwright スクリプトのそれ以上の実行が妨げられ、事前に設定されたユーザーエージェントとデバイスエミュレーションがリセットされます。

ヘッダモード

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

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

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