テストジェネレーター
はじめに
Playwrightには、ブラウザーでアクションを実行する際にテストを生成する機能が備わっており、テストをすばやく開始するのに最適な方法です。Playwrightはページを分析し、最適なロケーターを特定します。その際、ロール、テキスト、テストIDロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合、ターゲット要素を一意に識別できるようにロケーターを改善し、堅牢にします。
Playwright Inspector でテストを生成する
`codegen`コマンドを実行すると、2つのウィンドウが開きます。1つはテストしたいウェブサイトを操作するブラウザーウィンドウ、もう1つはテストを記録してエディターにコピーできるPlaywright Inspectorウィンドウです。
Codegen の実行
テストを生成したいウェブサイトのURLに続けて`codegen`コマンドを使用すると、テストジェネレーターが実行されます。URLはオプションであり、URLなしでコマンドを実行し、後でブラウザーウィンドウに直接URLを追加することもできます。
pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc
テストの記録
`codegen`コマンドを実行し、ブラウザーウィンドウで操作を行います。Playwrightはユーザーのインタラクションのコードを生成し、それはPlaywright Inspectorウィンドウで確認できます。テストの記録が完了したら、記録を停止し、コピーボタンを押して生成されたテストをエディターにコピーします。
テストジェネレーターで記録できること
- ページの操作によるクリックや入力などのアクション
- ツールバーのアイコンのいずれかをクリックし、その後ページ上の要素をクリックしてアサーションを行うことで、アサーションを記録できます。選択できるのは以下です。
- `'assert visibility'` は要素が可視であることをアサートします
- `'assert text'` は要素が特定のテキストを含むことをアサートします
- `'assert value'` は要素が特定の値を持つことをアサートします
ページの操作が完了したら、記録ボタンを押して記録を停止し、コピーボタンを使用して生成されたコードをエディターにコピーします。
クリアボタンを使用してコードをクリアし、再度記録を開始します。完了したら、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
認証状態の保持
`codegen`を`--save-storage`オプション付きで実行すると、セッションの最後にクッキー、localStorage、およびIndexedDBのデータを保存できます。これは、認証ステップを個別に記録し、後で他のテストを記録する際に再利用するのに役立ちます。
pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --save-storage=auth.json
ログイン
認証を実行してブラウザーを閉じると、`auth.json`にストレージ状態が保存され、これをテストで再利用できます。
`auth.json`には機密情報が含まれているため、ローカルでのみ使用するようにしてください。テストの生成が完了したら、`.gitignore`に追加するか、削除してください。
認証状態の読み込み
`--load-storage`オプションで実行すると、以前`auth.json`から読み込まれたストレージを消費します。これにより、すべてのクッキー、localStorage、およびIndexedDBのデータが復元され、ほとんどのウェブアプリが再度ログインすることなく認証状態になります。これにより、ログインした状態からテストの生成を続行できます。
pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright
カスタムセットアップを使用した記録
非標準のセットアップでcodegenを使用したい場合（例えば、BrowserContext.RouteAsync()を使用する場合）は、Page.PauseAsync()を呼び出すことで、codegenコントロールを含む別のウィンドウを開くことができます。
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();