テストの生成

はじめに

Playwright には、すぐにテストを生成する機能が付属しており、テストを始めるのに最適な方法です。テストしたいウェブサイトを操作するブラウザウィンドウと、テストを記録、コピー、クリアしたり、テストの言語を変更したりできる Playwright Inspector ウィンドウの 2 つのウィンドウが開きます。

学習内容

• テストを記録する方法
• ロケーターを生成する方法

Codegen の実行

codegen コマンドを使用して、テストジェネレーターを実行し、その後にテストを生成するウェブサイトの URL を続けます。URL はオプションであり、URL なしでコマンドを実行し、代わりにブラウザウィンドウに直接 URL を追加することもできます。

playwright codegen demo.playwright.dev/todomvc

テストの記録

codegen を実行し、ブラウザでアクションを実行します。Playwright は、ユーザーインタラクションのコードを生成します。Codegen は、レンダリングされたページを見て、推奨されるロケーターを把握し、role、text、test id ロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を識別した場合、ロケーターを改善して、ターゲット要素を回復力があり、一意に識別できるようにし、その結果、ロケーターが原因でテストの失敗と不安定さを排除および軽減します。

テストジェネレーターを使用すると、以下を記録できます

• ページを操作するだけで、クリックや入力などのアクション
• ツールバーのアイコンの 1 つをクリックし、ページ上の要素をクリックしてアサートすることにより、アサーションを行います。以下を選択できます
  • 要素が表示されていることをアサートする 'assert visibility'
  • 要素に特定のテキストが含まれていることをアサートする 'assert text'
  • 要素が特定の値を持っていることをアサートする 'assert value'

ページとのインタラクションが完了したら、'record' ボタンを押して記録を停止し、'copy' ボタンを使用して生成されたコードをエディターにコピーします。

'clear' ボタンを使用してコードをクリアし、再度記録を開始します。完了したら、Playwright インスペクターウィンドウを閉じるか、ターミナルコマンドを停止します。

テストの生成の詳細については、Codegen の詳細ガイドをご覧ください。

ロケーターの生成

テストジェネレーターでロケーターを生成できます。

• 'Record' ボタンを押して記録を停止すると、'Pick Locator' ボタンが表示されます。
• 'Pick Locator' ボタンをクリックし、ブラウザウィンドウの要素の上にマウスを置くと、各要素の下にロケーターが強調表示されます。
• ロケーターを選択するには、特定したい要素をクリックすると、そのロケーターのコードが [Pick Locator] ボタンの横のロケータープレイグラウンドに表示されます。
• ロケータープレイグラウンドでロケーターを編集して微調整し、一致する要素がブラウザウィンドウで強調表示されるのを確認できます。
• コピーボタンを使用してロケーターをコピーし、コードに貼り付けます。

エミュレーション

特定​​のビューポート、デバイス、配色、および地理位置情報、言語、またはタイムゾーンをエミュレートするためのテストを生成するために、エミュレーションを使用してテストを生成することもできます。テストジェネレーターは、認証された状態を維持しながらテストを生成することもできます。詳細については、テストジェネレーターガイドをご覧ください。

次のステップ

• テストのトレースを見る