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

テストジェネレーター

はじめに​

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

VS Codeでテストを生成​

VS Code拡張機能をインストールし、VS Codeから直接テストを生成します。この拡張機能はVS Code Marketplaceで入手できます。「VS Codeではじめに」ガイドをご覧ください。

新しいテストを記録​

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

record new in vs code

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

generating user actions

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

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

generating assertions

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

code from a generated test

カーソル位置で記録​

テストの特定のポイントから記録するには、さらにアクションを記録したい場所にカーソルを移動し、テストサイドバーの「Record at cursor」ボタンをクリックします。ブラウザウィンドウがまだ開いていない場合は、まず「Show browser」にチェックを入れてテストを実行し、その後「Record at cursor」ボタンをクリックします。

record at cursor in vs code

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

add feed the dog to todo app

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

code from a generated test

ロケーターの生成​

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

  • テストサイドバーから「Pick locator」ボタンをクリックし、ブラウザウィンドウ内の要素にカーソルを合わせると、各要素の下にハイライト表示されたロケーターが表示されます。
  • 必要な要素をクリックすると、VS Codeの「Pick locator」ボックスに表示されます。
  • キーボードの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ウィンドウで確認できます。テストの記録が完了したら、記録を停止し、「copy」ボタンを押して生成されたテストをエディタにコピーします。

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

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

Recording a test

​

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

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

ロケーターの生成​

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

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

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. クッキーを承認する
  2. 右上にある「locate me」ボタンをクリックして、地理位置情報が動作していることを確認します。
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

認証状態を保持する​

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

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

認証状態のロード​

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

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

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

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

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