テストジェネレーター
はじめに
Playwright には、ブラウザでアクションを実行するとテストを生成する機能が付属しており、テストを迅速に開始するのに最適な方法です。Playwright はページを調べて最適なロケーターを判断し、ロール、テキスト、テスト ID ロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合、ターゲット要素を一意に識別するロケーターになるように改善します。
Playwright Inspector を使用してテストを生成する
codegen コマンドを実行すると、2 つのウィンドウが開きます。1 つはテスト対象のウェブサイトを操作するブラウザウィンドウ、もう 1 つはテストを記録し、エディターにコピーできる Playwright Inspector ウィンドウです。
Codegen の実行
codegen コマンドを使用してテストジェネレーターを実行し、その後にテストを生成するウェブサイトの URL を指定します。URL はオプションであり、URL なしでコマンドを実行し、代わりにブラウザウィンドウに直接 URL を追加することもできます。
pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc
テストの記録
codegen コマンドを実行し、ブラウザウィンドウでアクションを実行します。Playwright は、Playwright Inspector ウィンドウに表示されるユーザーインタラクションのコードを生成します。テストの記録が完了したら、記録を停止し、copy ボタンを押して、生成されたテストをエディターにコピーします。
テストジェネレーターでは、次のものを記録できます
- ページを操作するだけで、クリックや入力などのアクション
- ツールバーのアイコンの 1 つをクリックし、ページ上の要素をクリックしてアサートすることにより、アサーションを行います。選択できるのは
'assert visibility'で要素が表示されていることをアサートする'assert text'で要素に特定のテキストが含まれていることをアサートする'assert value'で要素に特定の値があることをアサートする
ページの操作が完了したら、record ボタンを押して記録を停止し、copy ボタンを使用して生成されたコードをエディターにコピーします。
clear ボタンを使用してコードをクリアし、再度記録を開始します。完了したら、Playwright inspector ウィンドウを閉じるか、ターミナルコマンドを停止します。
ロケーターの生成
テストジェネレーターでロケーターを生成できます。
'Record'ボタンを押して記録を停止すると、'Pick Locator'ボタンが表示されます。'Pick Locator'ボタンをクリックし、ブラウザウィンドウの要素にカーソルを合わせると、各要素の下にロケーターが強調表示されます。- ロケーターを選択するには、特定したい要素をクリックすると、そのロケーターのコードが Pick Locator ボタンの横のフィールドに表示されます。
- 次に、このフィールドでロケーターを編集して微調整したり、コピーボタンを使用してコピーしてコードに貼り付けたりできます。
エミュレーション
テストジェネレーターを使用してエミュレーションを使用してテストを生成し、特定のビューポート、デバイス、配色、および地理位置情報、言語、またはタイムゾーンをエミュレートするテストを生成できます。テストジェネレーターは、認証された状態を保持しながらテストを生成することもできます。
ビューポートサイズのエミュレート
Playwright は、ビューポートが特定の幅と高さに設定されたブラウザウィンドウを開きます。テストは同じ条件下で実行する必要があるため、レスポンシブではありません。別のビューポートサイズでテストを生成するには、--viewport オプションを使用します。
pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size="800,600" playwright.dev
デバイスのエミュレート
--device オプションを使用してモバイルデバイスをエミュレートしながら、スクリプトとテストを記録します。このオプションは、ビューポートサイズやユーザーエージェントなどを設定します。
pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 13" playwright.dev
配色スキームのエミュレート
--color-scheme オプションを使用して配色スキームをエミュレートしながら、スクリプトとテストを記録します。
pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev
地理位置情報、言語、タイムゾーンのエミュレート
--timezone、--geolocation、および --lang オプションを使用して、タイムゾーン、言語、および場所をエミュレートしながら、スクリプトとテストを記録します。ページが開いたら
- Cookie を受け入れる
- 右上の [現在地を取得] ボタンをクリックして、地理位置情報が動作していることを確認します。
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
認証状態の保持
セッションの最後に Cookie、localStorage、および IndexedDB データを保存するには、--save-storage を指定して codegen を実行します。これは、認証ステップを個別に記録し、後でより多くのテストを記録するときに再利用するのに役立ちます。
pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --save-storage=auth.json
ログイン
認証を実行してブラウザを閉じると、auth.json にストレージ状態が含まれ、テストで再利用できます。
auth.json には機密情報が含まれているため、ローカルでのみ使用してください。テストの生成が完了したら、.gitignore に追加するか、削除してください。
認証状態のロード
auth.json から以前にロードされたストレージを使用するには、--load-storage を指定して実行します。これにより、すべての Cookie、localStorage、および IndexedDB データが復元され、ほとんどの Web アプリを再度ログインする必要なしに認証状態にすることができます。これは、ログイン状態からテストの生成を続行できることを意味します。
pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright
カスタム設定を使用した記録
非標準のセットアップ (たとえば、BrowserContext.RouteAsync() を使用するなど) で codegen を使用する場合は、codegen コントロールを備えた別のウィンドウを開く Page.PauseAsync() を呼び出すことができます。
using Microsoft.Playwright;
using var playwright = await Playwright.CreateAsync();
var chromium = playwright.Chromium;
// Make sure to run headed.
var browser = await chromium.LaunchAsync(new() { Headless = false });
// Setup context however you like.
var context = await browser.NewContextAsync(); // Pass any options
await context.RouteAsync("**/*", route => route.ContinueAsync());
// Pause the page, and start recording manually.
var page = await context.NewPageAsync();
await page.PauseAsync();