テストジェネレーター
はじめに
Playwrightには、ブラウザでアクションを実行するとテストを生成する機能が備わっており、テストを素早く始めるのに最適な方法です。Playwrightはページを分析し、最適なロケーターを特定します。ロール、テキスト、テストIDのロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合、ターゲット要素を一意に識別するためにロケーターを改善し、堅牢にします。
Playwrightインスペクターでテストを生成する
codegenコマンドを実行すると、2つのウィンドウが開きます。1つはテストしたいウェブサイトを操作するブラウザウィンドウ、もう1つはテストを記録し、エディターにコピーできるPlaywrightインスペクターウィンドウです。
Codegenの実行
テストジェネレーターを実行するには、codegenコマンドに続けてテストを生成したいウェブサイトのURLを指定します。URLは任意であり、URLなしでコマンドを実行し、後でブラウザウィンドウに直接URLを追加することもできます。
playwright codegen demo.playwright.dev/todomvc
テストの記録
codegenコマンドを実行し、ブラウザウィンドウでアクションを実行します。Playwrightはユーザーインタラクションのコードを生成し、Playwrightインスペクターウィンドウで確認できます。テストの記録が終了したら、記録を停止し、コピーボタンを押して生成されたテストをエディターにコピーします。
テストジェネレーターでは、以下を記録できます。
- ページを操作するだけでクリックや入力などのアクション
- ツールバーのいずれかのアイコンをクリックし、ページ上の要素をクリックしてアサーションを実行することでアサーションを作成できます。選択できるのは：
- 要素が表示されていることをアサートする
'assert visibility' - 要素が特定のテキストを含んでいることをアサートする
'assert text' - 要素が特定の値を持っていることをアサートする
'assert value'
- 要素が表示されていることをアサートする
ページとの対話が終了したら、記録ボタンを押して記録を停止し、コピーボタンを使用して生成されたコードをエディターにコピーします。
コードをクリアして再度記録を開始するには、クリアボタンを使用します。完了したら、Playwrightインスペクターウィンドウを閉じるか、ターミナルコマンドを停止します。
ロケーターの生成
テストジェネレーターでロケーターを生成できます。
'Record'ボタンを押して記録を停止すると、'Pick Locator'ボタンが表示されます。'Pick Locator'ボタンをクリックし、ブラウザウィンドウの要素の上にマウスを移動すると、各要素の下にハイライトされたロケーターが表示されます。- ロケーターを選択するには、目的の要素をクリックすると、そのロケーターのコードがPick Locatorボタンの横のフィールドに表示されます。
- このフィールドでロケーターを編集して微調整したり、コピーボタンを使用してコピーしてコードに貼り付けたりできます。
エミュレーション
テストジェネレーターを使用して、特定のマウスビューポート、デバイス、カラースキームでのテストを生成したり、地理位置情報、言語、タイムゾーンをエミュレートしたりできます。テストジェネレーターは、認証された状態を保持しながらテストを生成することもできます。
ビューポートサイズのエミュレート
Playwrightは、特定の幅と高さにビューポートが設定されたブラウザウィンドウを開きます。テストは同じ条件下で実行する必要があるため、レスポンシブではありません。異なるビューポートサイズでテストを生成するには、--viewportオプションを使用します。
playwright codegen --viewport-size="800,600" playwright.dev
デバイスのエミュレート
ビューポートサイズやユーザーエージェントなどを設定する--deviceオプションを使用して、モバイルデバイスをエミュレートしながらスクリプトとテストを記録します。
playwright codegen --device="iPhone 13" playwright.dev
カラースキームのエミュレート
--color-schemeオプションを使用して、カラースキームをエミュレートしながらスクリプトとテストを記録します。
playwright codegen --color-scheme=dark playwright.dev
地理位置情報、言語、タイムゾーンのエミュレート
--timezone、--geolocation、--langオプションを使用して、タイムゾーン、言語、位置情報をエミュレートしながらスクリプトとテストを記録します。ページが開いたら
- クッキーを許可する
- 右上にある「現在地を特定」ボタンをクリックして、地理位置情報の動作を確認します。
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
認証状態の保持
codegenを--save-storageとともに実行して、セッション終了時にクッキー、localStorage、IndexedDBデータを保存します。これは、認証ステップを個別に記録し、後でさらにテストを記録する際に再利用するのに役立ちます。
playwright codegen github.com/microsoft/playwright --save-storage=auth.json
ログイン
認証を実行し、ブラウザを閉じると、auth.jsonにはストレージ状態が含まれており、これをテストで再利用できます。
auth.jsonには機密情報が含まれているため、ローカルでのみ使用してください。.gitignoreに追加するか、テスト生成が完了したら削除してください。
認証状態のロード
--load-storageを指定して実行すると、以前auth.jsonからロードされたストレージが消費されます。これにより、すべてのクッキー、localStorage、IndexedDBデータが復元され、ほとんどのウェブアプリが再度ログインすることなく認証された状態になります。これは、ログインした状態からテストを生成し続けることができることを意味します。
playwright codegen --load-storage=auth.json github.com/microsoft/playwright
カスタムセットアップを使用した記録
非標準のセットアップでcodegenを使用したい場合（例えば、browser_context.route()を使用する場合）は、codegenコントロールを含む別のウィンドウを開くpage.pause()を呼び出すことが可能です。
- 同期
- 非同期
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
# Make sure to run headed.
browser = p.chromium.launch(headless=False)
# Setup context however you like.
context = browser.new_context() # Pass any options
context.route('**/*', lambda route: route.continue_())
# Pause the page, and start recording manually.
page = context.new_page()
page.pause()
import asyncio
from playwright.async_api import async_playwright
async def main():
async with async_playwright() as p:
# Make sure to run headed.
browser = await p.chromium.launch(headless=False)
# Setup context however you like.
context = await browser.new_context() # Pass any options
await context.route('**/*', lambda route: route.continue_())
# Pause the page, and start recording manually.
page = await context.new_page()
await page.pause()
asyncio.run(main())