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

テストのデバッグ

Playwright インスペクター​

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

Playwright Inspector

デバッグモードで実行​

Playwright テストをデバッグモードで実行するには、PWDEBUG 環境変数を設定します。これにより、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 Inspector を起動すると、Playwright スクリプトのそれ以上の実行が妨げられ、事前に設定されたユーザーエージェントとデバイスエミュレーションがリセットされます。

ヘッダモード​

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

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

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