テストの生成

イントロダクション

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

学習内容

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

Codegen の実行

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

npx playwright codegen demo.playwright.dev/todomvc

テストの記録

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

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

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

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

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

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

ロケーターの生成

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

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

エミュレーション

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

次は何をしますか？

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