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

テストジェネレーター

イントロダクション​

Playwright には、ブラウザでアクションを実行する際にテストを生成する機能が付属しており、テストを迅速に開始するのに最適な方法です。Playwright はページを調べて最適なロケーターを見つけ、ロール、テキスト、テスト ID ロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合、ターゲット要素を一意に識別する回復力のあるロケーターに改善します。

Playwright Inspector を使用してテストを生成する​

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

Codegen の実行​

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen demo.playwright.dev/todomvc"

テストの記録​

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

テストジェネレーターを使用すると、以下を記録できます。

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

recording a test

​

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

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

ロケーターの生成​

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

  • 'Record' ボタンを押して記録を停止すると、'Pick Locator' ボタンが表示されます。
  • 'Pick Locator' ボタンをクリックし、ブラウザウィンドウ内の要素の上にカーソルを置くと、各要素の下にロケーターが強調表示されます。
  • ロケーターを選択するには、配置する要素をクリックすると、そのロケーターのコードが [ロケーターを選択] ボタンの横のフィールドに表示されます。
  • 次に、このフィールドでロケーターを編集して微調整したり、コピーボタンを使用してコピーしてコードに貼り付けたりできます。
​

picking a locator

エミュレーション​

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

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

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --viewport-size='800,600' playwright.dev"
​
Codegen generating code for tests for playwright.dev website with a specific viewport java

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

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 13" playwright.dev'
​
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 java

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

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --color-scheme=dark playwright.dev"
​
Codegen generating code for tests for playwright.dev website in dark mode java

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

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

  1. Cookie に同意する
  2. 右上の [現在地を特定] ボタンをクリックして、地理位置情報が動作していることを確認します。
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='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 java

認証された状態の保持​

セッションの最後に Cookie、localStorage、IndexedDB データを保存するには、--save-storage を指定して codegen を実行します。これは、認証ステップを個別に記録し、後でより多くのテストを記録するときに再利用するのに役立ちます。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen github.com/microsoft/playwright  --save-storage=auth.json"
​
github page before logging in java

ログイン​

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

login to GitHub screen

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

認証された状態のロード​

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"
​
github signed in showing use of load storage java

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

(たとえば、BrowserContext.route() を使用するなど) 標準以外のセットアップで codegen を使用する場合は、codegen コントロールを備えた別のウィンドウを開く Page.pause() を呼び出すことができます。

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      // Make sure to run headed.
      Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false));
      // Setup context however you like.
      BrowserContext context = browser.newContext(/* pass any options */);
      context.route("**/*", route -> route.resume());
      // Pause the page, and start recording manually.
      Page page = context.newPage();
      page.pause();
    }
  }
}