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

テストのデバッグ

VS Code デバッガー​

開発エクスペリエンスを向上させるために、デバッグにはVS Code 拡張機能を使用することをお勧めします。VS Code 拡張機能を使用すると、VS Code で直接テストをデバッグしたり、エラーメッセージを確認したり、ブレークポイントを設定してテストをステップ実行したりできます。

running test in debug mode

エラーメッセージ​

テストが失敗すると、VS Code は期待された値と受け取った値、および完全なコールログを示すエラーメッセージをエディターに表示します。

error messaging in vs code

ライブデバッグ​

VS Code でテストをライブデバッグできます。「ブラウザを表示」オプションをオンにしてテストを実行した後、VS Code の任意のロケーターをクリックすると、ブラウザウィンドウで強調表示されます。Playwright は、複数の一致があるかどうかも表示します。

live debugging in VS Code

VS Code でロケーターを編集すると、Playwright はブラウザウィンドウで変更をライブで表示します。

live debugging in VS Code

ロケーターの選択​

テストサイドバーのロケーターを選択ボタンをクリックして、ロケーターを選択し、テストファイルにコピーします。次に、ブラウザで必要な要素をクリックすると、VS Code のロケーターを選択ボックスに表示されます。キーボードの「Enter」を押してロケーターをクリップボードにコピーし、コードのどこにでも貼り付けます。キャンセルしたい場合は「Escape」を押してください。

Pick locators

Playwright はページを調べて最適なロケーターを特定し、ロール、テキスト、テスト ID ロケーターを優先します。Playwright がロケーターに一致する複数の要素を見つけた場合、ロケーターを改善して回復力を持たせ、ターゲット要素を一意に識別するため、ロケーターが原因でテストが失敗する心配をする必要はありません。

デバッグモードで実行​

ブレークポイントを設定するには、ブレークポイントを設定したい行番号の横をクリックして赤い点が表示されるまで待ちます。実行したいテストの横の行を右クリックして、デバッグモードでテストを実行します。

setting debug test mode

ブラウザウィンドウが開き、テストが実行され、ブレークポイントが設定されている場所で一時停止します。VS Code のメニューからテストをステップ実行したり、テストを一時停止したり、テストを再実行したりできます。

running test in debug mode

Chrome DevTools を使用したテストのデバッグ​

VS Code で「テストをデバッグ」の代わりに「テストを実行」を選択します。「ブラウザを表示」を有効にすると、ブラウザセッションが再利用され、Chrome DevTools を開いてテストと Web アプリケーションを継続的にデバッグできます。

異なるブラウザでのデバッグ​

デフォルトでは、デバッグは Chromium プロファイルを使用して行われます。テストサイドバーのデバッグアイコンを右クリックし、ドロップダウンから「デフォルトプロファイルの選択」オプションをクリックすることで、異なるブラウザでテストをデバッグできます。

debugging on specific profile

次に、テストのデバッグに使用するテストプロファイルを選択します。デバッグモードでテストを実行するたびに、選択したプロファイルが使用されます。テストの行番号を右クリックし、メニューから「テストをデバッグ」を選択することで、デバッグモードでテストを実行できます。

choosing a profile for debugging

デバッグの詳細については、Visual Studio Code でのデバッグを参照してください。

Playwright インスペクター​

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

Playwright Inspector

デバッグモードで実行​

--debug フラグを付けてテストを実行すると、インスペクターが開きます。これにより、Playwright はデバッグ用に設定され、インスペクターが開きます。--debug が使用されると、追加の便利なデフォルト設定が構成されます。

  • ブラウザはヘッドレスモードで起動します。
  • デフォルトのタイムアウトは 0 (= タイムアウトなし) に設定されます。

すべてのブラウザですべてのテストをデバッグ​

すべてのテストをデバッグするには、--debug フラグを付けてテストコマンドを実行します。これにより、テストが1つずつ実行され、各テストのインスペクターとブラウザウィンドウが開きます。

npx playwright test --debug

すべてのブラウザで1つのテストをデバッグ​

特定の行で1つのテストをデバッグするには、テストコマンドの後にテストファイルの名前とデバッグしたいテストの行番号、そして--debug フラグを付けて実行します。これにより、playwright.config で設定された各ブラウザで単一のテストが実行され、インスペクターが開きます。

npx playwright test example.spec.ts:10 --debug

特定のブラウザでデバッグ​

Playwright では、playwright.config でプロジェクトを設定できます。設定後、--project フラグの後にplaywright.config で設定されたプロジェクト名を付けて、特定のブラウザまたはモバイルビューポートでテストをデバッグできます。

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug
npx playwright test --project="Microsoft Edge" --debug

特定のブラウザで1つのテストをデバッグ​

特定のブラウザで1つのテストを実行するには、テストファイルの名前とデバッグしたいテストの行番号、そして--project フラグの後にプロジェクト名を追加します。

npx playwright test example.spec.ts:10 --project=webkit --debug

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

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

Playwright Inspector and browser

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

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

await 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() メソッドを使用して実行を一時停止するためにテストにブレークポイントを設定します。

await page.pause();

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

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

DEBUG=pw:api npx playwright test
注

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

ヘッダモード​

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

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

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });