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

テストのデバッグ

Playwright Inspector​

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

Playwright Inspector

デバッグモードで実行​

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

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

テストをステップ実行する​

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

Playwright Inspector and browser

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

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

page.pause()

`page.pause()`呼び出しを追加したら、デバッグモードでテストを実行します。Inspectorの「Resume」ボタンをクリックするとテストが実行され、`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.pause()メソッドを使用してテストにブレークポイントを設定し、実行を一時停止します。

page.pause()

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

PWDEBUG=console pytest -s

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`環境変数による詳細なログ記録をサポートしています。

DEBUG=pw:api pytest -s
注意

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

ヘッドフルモード​

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

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

# Chromium, Firefox, or WebKit
chromium.launch(headless=False, slow_mo=100)