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

テストジェネレーター

はじめに​

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

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

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

Codegenの実行​

テストを生成したいウェブサイトのURLに続けて`codegen`コマンドを使用し、テストジェネレーターを実行します。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ウィンドウで確認できます。テストの記録が完了したら、記録を停止し、**コピー**ボタンを押して生成されたテストをエディターにコピーします。

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

  • ページと対話するだけで、クリックや入力などのアクション
  • ツールバーのいずれかのアイコンをクリックし、ページ上の要素をクリックしてアサーションを行うことによるアサーション。選択できる項目は次のとおりです。
    • `'assert visibility'` (要素が表示されていることをアサートする)
    • `'assert text'` (要素が特定のテキストを含むことをアサートする)
    • `'assert value'` (要素が特定の値を持つことをアサートする)

recording a test

​

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

**クリア**ボタンを使用してコードを消去し、再度記録を開始します。終了したら、Playwright Inspectorウィンドウを閉じるか、ターミナルコマンドを停止してください。

ロケーターの生成​

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

  • 「'Record'」ボタンを押して記録を停止すると、「'Pick Locator'」ボタンが表示されます。
  • 「'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. クッキーを承諾する
  2. 右上の「locate me」ボタンをクリックして、地理位置情報が動作するのを確認してください。
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

認証状態の保持​

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

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`に追加するか、削除してください。

認証状態の読み込み​

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

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

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

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

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