テストの生成
はじめに
Playwrightにはテストをすぐに生成する機能が付属しており、テストを迅速に開始するための優れた方法です。テストしたいウェブサイトを操作するブラウザウィンドウと、テストの記録、コピー、クリア、言語の変更ができるPlaywrightインスペクターウィンドウの2つのウィンドウが開きます。
学習内容
Codegenの実行
テストを生成したいウェブサイトのURLの後にcodegenコマンドを使ってテストジェネレーターを実行します。URLはオプションであり、コマンドをURLなしで実行し、後でブラウザウィンドウに直接URLを追加することもできます。
npx playwright codegen demo.playwright.dev/todomvc
テストの記録
codegenを実行し、ブラウザで操作を行います。Playwrightはユーザーのインタラクションに対するコードを生成します。Codegenはレンダリングされたページを分析し、推奨されるロケーターを特定します。その際、ロール、テキスト、テストIDのロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を特定した場合、ロケーターを改善して堅牢にし、ターゲット要素を一意に識別するようにします。これにより、ロケーターに起因するテストの失敗や不安定さを排除・軽減します。
テストジェネレーターを使用して記録できること
- ページを操作するだけでクリックや入力などのアクション
- ツールバーのいずれかのアイコンをクリックし、ページ上の要素をクリックしてアサーションを行うことで、アサーションを記録できます。選択できるのは次のとおりです。
'assert visibility'(要素が表示されていることをアサートする)'assert text'(要素が特定のテキストを含んでいることをアサートする)'assert value'(要素が特定の値を持っていることをアサートする)
ページの操作が完了したら、'record'ボタンを押して記録を停止し、'copy'ボタンを使用して生成されたコードをエディタにコピーします。
コードをクリアして記録を再度開始するには'clear'ボタンを使用します。完了したら、Playwrightインスペクターウィンドウを閉じるか、ターミナルコマンドを停止します。
テストの生成についてさらに学ぶには、Codegenに関する詳細ガイドを参照してください。
ロケーターの生成
テストジェネレーターでロケーターを生成できます。
- 記録を停止するために
'Record'ボタンを押すと、'Pick Locator'ボタンが表示されます。 'Pick Locator'ボタンをクリックし、ブラウザウィンドウ内の要素にカーソルを合わせると、各要素の下にハイライト表示されたロケーターが表示されます。- ロケーターを選択するには、対象の要素をクリックすると、そのロケーターのコードが「Pick Locator」ボタンの隣にあるロケータープレイグラウンドに表示されます。
- その後、ロケータープレイグラウンドでロケーターを編集して微調整し、ブラウザウィンドウで一致する要素がハイライト表示されるのを確認できます。
- コピーボタンを使用してロケーターをコピーし、コードに貼り付けます。
エミュレーション
エミュレーションを使用してテストを生成することもできます。これにより、特定のビューポート、デバイス、カラースキーム用のテストを生成したり、ジオロケーション、言語、タイムゾーンをエミュレートしたりできます。テストジェネレーターは、認証状態を保持したままテストを生成することも可能です。詳細については、テストジェネレーターガイドを参照してください。