テストの生成
はじめに
Playwright はテストを自動的に生成でき、テストをすぐに開始できる迅速な方法を提供します。Codegen は、インタラクション用のブラウザウィンドウと、生成されたテストの記録、コピー、管理用の Playwright Inspector を開きます。
学習内容
Codegen の実行
codegen コマンドを使用して、テストを生成する Web サイトの URL の後にテストジェネレーターを実行します。URL はオプションであり、省略した場合はブラウザウィンドウに直接追加できます。
npx playwright codegen demo.playwright.dev/todomvc
テストの記録
codegen を実行し、ブラウザでアクションを実行します。Playwright は、インタラクションのコードを自動的に生成します。Codegen は、レンダリングされたページを分析し、役割、テキスト、テスト ID ロケーターを優先して、最適なロケーターを推奨します。複数の要素がロケーターに一致する場合、ジェネレーターはそれを改善してターゲット要素を一意に識別し、テストの失敗や不安定さを軽減します。
テストジェネレーターで記録できること
- ページとのインタラクションによるクリックや入力などのアクション
- ツールバーアイコンをクリックし、次にアサートするページ要素をクリックすることによるアサーション。選択できるもの:
- 要素が表示されていることをアサートする
'assert visibility' - 要素が特定のテキストを含んでいることをアサートする
'assert text' - 要素が特定の値を持っていることをアサートする
'assert value'
- 要素が表示されていることをアサートする
ページとのインタラクションが完了したら、'record' ボタンを押して記録を停止し、'copy' ボタンを使用して生成されたコードをエディターにコピーします。
'clear' ボタンを使用してコードをクリアし、再度記録を開始します。完了したら、Playwright Inspector ウィンドウを閉じるか、ターミナルコマンドを停止します。
テストの生成の詳細については、Codegen に関する詳細ガイドをご覧ください。
ロケーターの生成
テストジェネレーターを使用してロケーターを生成できます。
'Record'ボタンを押して記録を停止すると、'Pick Locator'ボタンが表示されます。'Pick Locator'ボタンをクリックし、ブラウザウィンドウの要素の上にマウスカーソルを置くと、各要素の下にロケーターがハイライト表示されます。- 特定したい要素をクリックすると、そのロケーターのコードが Pick Locator ボタンの隣のロケータープレイグラウンドに表示されます。
- ロケータープレイグラウンドでロケーターを編集して微調整し、一致する要素がブラウザウィンドウでハイライト表示されるのを確認します。
- コピーボタンを使用してロケーターをコピーし、コードに貼り付けます。
エミュレーション
特定のビューポート、デバイス、カラースキーム、地理的位置、言語、またはタイムゾーンのエミュレーションを使用してテストを生成できます。テストジェネレーターは、認証された状態を維持することもできます。詳細については、テストジェネレーターガイドをご覧ください。