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

テストジェネレーター

はじめに​

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

VS Code でテストを生成する​

VS Code 拡張機能をインストールし、VS Code から直接テストを生成します。拡張機能は、VS Code Marketplaceで入手できます。VS Code を使ってみるガイドをご覧ください。

新規テストの記録​

テストを記録するには、テストサイドバーの新規記録ボタンをクリックします。これにより、test-1.spec.tsファイルが作成され、ブラウザウィンドウが開きます。

record new in vs code

ブラウザで、テストしたい URL に移動し、クリックしてユーザーアクションの記録を開始します。

generating user actions

Playwright はアクションを記録し、VS Code で直接テストコードを生成します。ツールバーのアイコンのいずれかを選択し、ページ上の要素をクリックしてアサートすることで、アサーションを生成することもできます。次のアサーションを生成できます

  • 要素が表示されていることをアサートする'assert visibility'
  • 要素に特定のテキストが含まれていることをアサートする'assert text'
  • 要素が特定の値を持っていることをアサートする'assert value'

generating assertions

記録が完了したら、キャンセルボタンをクリックするか、ブラウザウィンドウを閉じます。その後、test-1.spec.tsファイルを確認し、必要に応じて手動で改善できます。

code from a generated test

カーソル位置から記録​

テストの特定の位置から記録するには、カーソルをさらにアクションを記録したい場所に移動し、テストサイドバーのカーソル位置から記録ボタンをクリックします。ブラウザウィンドウがまだ開いていない場合は、最初に「ブラウザを表示」をチェックしてテストを実行し、次にカーソル位置から記録ボタンをクリックします。

record at cursor in vs code

ブラウザウィンドウで、記録したいアクションの実行を開始します。

add feed the dog to todo app

VS Code のテストファイルで、新しく生成されたアクションがカーソル位置のテストに追加されていることがわかります。

code from a generated test

ロケーターの生成​

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

  • テストサイドバーのロケーターを選択ボタンをクリックし、ブラウザウィンドウの要素にカーソルを合わせると、各要素の下にロケーターがハイライト表示されます。
  • 必要な要素をクリックすると、VS Code のロケーターを選択ボックスに表示されます。
  • キーボードの Enter を押してロケーターをクリップボードにコピーし、コード内の任意の場所に貼り付けます。キャンセルする場合は「escape」を押します。
Pick locators in VS code

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

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

Codegen の実行​

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

npx playwright codegen demo.playwright.dev/todomvc

テストの記録​

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

テストジェネレーターでは、次のものを記録できます

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

Recording a test

​

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

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

ロケーターの生成​

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

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

picking a locator

エミュレーション​

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

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

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

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

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

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

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

配色をエミュレート​

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

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

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

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

  1. Cookie に同意する
  2. 右上で、現在地を特定するボタンをクリックして、地理位置情報が動作していることを確認します。
npx 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

認証済み状態の保持​

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

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

ログイン​

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

login to GitHub screen

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

認証済み状態のロード​

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

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

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

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

const { chromium } = require('@playwright/test');

(async () => {
  // Make sure to run headed.
  const browser = await chromium.launch({ headless: false });

  // Setup context however you like.
  const context = await browser.newContext({ /* pass any options */ });
  await context.route('**/*', route => route.continue());

  // Pause the page, and start recording manually.
  const page = await context.newPage();
  await page.pause();
})();