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

デバッグテスト

Playwright Inspector​

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

Playwright Inspector

デバッグモードで実行​

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

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

テストのステップ実行​

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

Playwright Inspector and browser

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

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

page.pause()

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

test with page.pause

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

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

live editing locators

ロケーターの選択​

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

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

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

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

DEBUG=pw:api pytest -s
注

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

ヘッド付きモード​

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

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

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