メインコンテンツにスキップ

テストジェネレーター

はじめに​

Playwrightには、ブラウザでアクションを実行するとテストを生成する機能が備わっており、テストを素早く開始するのに最適な方法です。Playwrightはページを検査し、最良のロケーターを特定します。ロール、テキスト、テストIDロケーターを優先します。ジェネレーターがロケーターと一致する複数の要素を見つけた場合、ターゲット要素を一意に識別できるよう、ロケーターをより堅牢なものに改善します。

Playwright Inspector でテストを生成する​

codegenコマンドを実行すると、2つのウィンドウが開きます。1つはテストしたいウェブサイトを操作するブラウザウィンドウ、もう1つはテストを記録してエディターにコピーできる Playwright Inspector ウィンドウです。

Codegen の実行​

codegenコマンドを使用してテストジェネレーターを実行し、その後にテストを生成したいウェブサイトの URL を指定します。URL はオプションであり、指定せずにコマンドを実行し、後でブラウザウィンドウに直接 URL を追加することもできます。

playwright codegen demo.playwright.dev/todomvc

テストの記録​

codegenコマンドを実行し、ブラウザウィンドウでアクションを実行します。Playwright はユーザーインタラクションのコードを生成し、それを Playwright Inspector ウィンドウで見ることができます。テストの記録が完了したら、記録を停止し、copyボタンを押して生成されたテストをエディターにコピーします。

テストジェネレーターで記録できること

  • ページを操作するだけでクリックや入力などのアクション
  • ツールバーのアイコンのいずれかをクリックし、ページ上の要素をクリックしてアサートすることでアサーション。選択できます。
    • 要素が表示されていることをアサートする 'assert visibility'
    • 要素が特定のテキストを含んでいることをアサートする 'assert text'
    • 要素が特定の値を持っていることをアサートする 'assert value'

recording a test

​

ページとのインタラクションが完了したら、recordボタンを押して記録を停止し、copyボタンを使用して生成されたコードをエディターにコピーします。

clearボタンを使用してコードをクリアし、再度記録を開始します。完了したら、Playwright inspector ウィンドウを閉じるか、ターミナルコマンドを停止します。

ロケーターの生成​

テストジェネレーターを使用してロケーターを生成できます。

  • 'Record'ボタンを押して記録を停止すると、'Pick Locator'ボタンが表示されます。
  • 'Pick Locator'ボタンをクリックし、ブラウザウィンドウの要素の上にマウスを置くと、各要素の下にハイライト表示されたロケーターが表示されます。
  • ロケーターを選択するには、目的の要素をクリックすると、そのロケーターのコードが「Pick Locator」ボタンの隣のフィールドに表示されます。
  • このフィールドでロケーターを編集して微調整するか、コピーボタンを使用してコピーしてコードに貼り付けることができます。
​

picking a locator

エミュレーション​

テストジェネレーターを使用してエミュレーションを使用してテストを生成できます。これにより、特定のビューポート、デバイス、カラースキームのテストを生成したり、地理的位置、言語、タイムゾーンをエミュレートしたりできます。テストジェネレーターは、認証された状態を維持しながらテストを生成することもできます。

ビューポートサイズのエミュレート​

Playwright は、ビューポートが特定の幅と高さに設定されたブラウザウィンドウを開き、テストは同じ条件下で実行する必要があるため、応答性がありません。異なるビューポートサイズでテストを生成するには、--viewportオプションを使用します。

playwright codegen --viewport-size="800,600" playwright.dev
​
Codegen generating code for tests for playwright.dev website with a specific viewport python

デバイスのエミュレート​

--deviceオプションを使用してモバイルデバイスをエミュレートしながらスクリプトとテストを記録します。これにより、ビューポートサイズやユーザーエージェントなどが設定されます。

playwright codegen --device="iPhone 13" playwright.dev
​
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 python

カラースキームのエミュレート​

--color-schemeオプションを使用してカラースキームをエミュレートしながらスクリプトとテストを記録します。

playwright codegen --color-scheme=dark playwright.dev
​
Codegen generating code for tests for playwright.dev website in dark mode python

地理的位置、言語、タイムゾーンのエミュレート​

--timezone、--geolocation、--langオプションを使用して、タイムゾーン、言語、位置をエミュレートしながらスクリプトとテストを記録します。ページが開いたら

  1. クッキーを承諾します
  2. 右上の「locate me」ボタンをクリックして、地理的位置の動作を確認します。
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
​
Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language python

認証状態の保持​

--save-storageオプションを指定してcodegenを実行すると、セッション終了時にクッキー、localStorage、およびIndexedDBデータが保存されます。これは、認証ステップを個別に記録し、後でさらにテストを記録する際に再利用するのに役立ちます。

playwright codegen github.com/microsoft/playwright --save-storage=auth.json
​
github page before logging in python

ログイン​

認証を実行し、ブラウザを閉じると、auth.jsonにストレージ状態が含まれるので、テストで再利用できます。

login to GitHub screen

auth.jsonには機密情報が含まれているため、ローカルでのみ使用するようにしてください。.gitignoreに追加するか、テストの生成が完了したら削除してください。

認証状態のロード​

--load-storageを指定して実行すると、auth.jsonから以前にロードされたストレージが使用されます。これにより、すべてのクッキー、localStorage、およびIndexedDBデータが復元され、ほとんどのWebアプリケーションは再度ログインすることなく認証状態になります。つまり、ログイン状態からテストを生成し続けることができます。

playwright codegen --load-storage=auth.json github.com/microsoft/playwright
​
github signed in showing use of load storage python

既存の userDataDir を使用する​

--user-data-dirを指定してcodegenを実行すると、ブラウザセッションの固定ユーザーデータディレクトリが設定されます。カスタムのブラウザユーザーデータディレクトリを作成した場合、codegen はこの既存のブラウザプロファイルを使用し、そのプロファイルに存在する認証状態にアクセスできます。

警告

Chrome 136 以降、デフォルトのユーザーデータディレクトリは Playwright などの自動化ツール経由ではアクセスできません。テストで使用するために別のユーザーデータディレクトリを作成する必要があります。

playwright codegen --user-data-dir=/path/to/your/browser/data/ github.com/microsoft/playwright

カスタムセットアップを使用した記録​

非標準のセットアップでcodegenを使用したい場合（例えば、browser_context.route()を使用する場合など）、page.pause()を呼び出すことで、codegenコントロール付きの別ウィンドウを開くことができます。

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()