ユーザー フローを記録および再生し、パフォーマンスを測定する
レコーダー ツールを使用して、DevTools が開いているブラウザー ウィンドウまたはタブで一連の手順を記録し、必要に応じてパフォーマンスを測定しながら、手順を自動的に再生します。
レコーダー ツールを使用する場合
ブラウザーで一連のユーザー操作を自動的に再生することで、反復的なタスクを高速化する場合は、 レコーダー ツールを使用します。
レコーダー ツールは、マウス クリック、キーボード入力、ページ ナビゲーション イベントなどのユーザー操作を記録し、操作を自動的に再生できます。 記録されたユーザー操作を再生しながら、 レコーダー ツールを使用して実行時のパフォーマンスを測定することもできます。 レコーダー ツールを使用すると、必要な数のユーザー フローを記録し、必要な回数再生できます。
この記事の残りの部分では、 レコーダー ツールを使用して、デモ TODO アプリへのタスクの追加を自動化します。
レコーダー ツールを開く
新しいタブまたはウィンドウで TODO アプリ を開きます。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools の アクティビティ バーで、[ レコーダー ] タブを選択します。そのタブが表示されない場合は、 その他のツール (
) ボタンをクリックし、[ レコーダー] を選択します。 レコーダー ツールが開きます。
ユーザー フローを記録する
新しいユーザー フローの記録を開始するには:
[ 新しい録音の作成] をクリックします。
[ 記録名] に、記録の名前 ("TODO タスクの追加" など) を入力します。
レコーダー ツールの下部にある [記録の開始] をクリックします。
レンダリングされた Web ページで、ページを操作します。 たとえば、[タスクの追加] 入力ボックスに「 タスク 1」と入力し、 Enter キーを押します。 これらの手順を複数回繰り返します。
録音中であることを示す赤い円が録音名の横に表示されます。 レコーダー ツールは、操作を記録し、手順の一覧として表示します。
記録を停止するには、記録された操作の一覧の下部にある [ 記録の終了 ] ボタンをクリックします。
録音が停止し、録音名の横の円が青に変わり、録音が完了したことを示します。
他のユーザー フローを記録する
前のユーザー フローの記録を停止した後、新しいユーザー フローを記録するには:
レコーダー ツールの左上隅にある [新しい録音の作成] (
![[新しい録音の作成] ボタン](index-images/new-recording-icon.png)
) ボタンをクリックします。![[新しい記録の作成] ボタン](index-images/create-new-recording.png)
上記の「 ユーザー フローを記録する」の手順を繰り返します。
ユーザー フローを再生する
記録されたユーザー フローの一覧から、または特定のユーザー フローの詳細を表示するときに、ユーザー フローを再生できます。
記録されたユーザー フローの一覧を表示するには、 レコーダー ツール ツール ツール バーの上部にあるドロップダウン メニューをクリックし、 2 つの記録を選択します。 行った録音の数に応じて、ラベルに異なる数の録音が表示される場合があります。
特定のユーザー フローの詳細を表示するには、 上部の [レコーダー ] ツール バーにあるドロップダウン リストをクリックし、ユーザー フローの名前をクリックします。
記録の一覧からユーザー フローを再生する
録音の横にある [ 録音の再生 ] ボタンをクリックします。
![各録音の横に [録音の再生] ボタンが表示された録音の一覧](index-images/play-from-list.png)
レコーダー ツールが以前に記録したユーザー操作を再生するまで待ちます。 再生されている手順のアニメーションが レコーダー ツールに表示されます。
再生が完了すると、アニメーションが停止し、 記録 ツールに記録の手順が表示されます。
記録からユーザー フローを再生する
レコーダー ツールの右上隅にある [再生] ボタンをクリックします。
![記録されたユーザー フローの詳細ページの [再生] ボタン](index-images/play-from-recording.png)
レコーダー ツールが以前に記録したユーザー操作を再生するまで待ちます。 再生されている手順のアニメーションが レコーダー ツールに表示されます。
再生が完了すると、アニメーションが停止し、 記録 ツールに記録の手順が表示されます。
ユーザー フローをゆっくり再生して問題を調査する
ユーザー操作の再生中にレンダリングされたページで何が起こっているかを確認するには、再生速度を遅くします。 既定では、 レコーダー ツールは可能な限り高速にユーザー フローを再生します。
再生速度を遅くするには:
レコーダー ツールの右上隅にある [再生] の横にあるドロップダウン矢印をクリックし、ドロップダウン メニューから [低速]、[非常に遅い]、[非常に遅い] などの速度を選択します。
![[再生] ボタンと [速度] ドロップダウン メニュー](index-images/replay-slow.png)
ブレークポイントを使用してユーザー フローの再生中に一時停止する
ユーザー フローの特定のポイントでレンダリングされた Web ページを検査するには、ブレークポイントを使用して再生を一時停止します。
ユーザー フローにブレークポイントを追加するには:
一時停止するフロー ステップの横にある [ ステップ アクションを開く ] ([
![ステップ アクションを開く] アイコン](index-images/step-actions-icon.png)
) ボタンをクリックし、[ ブレークポイントの追加] を選択します。![[ステップ アクションを開く] ボタンと [ブレークポイントの追加] メニュー項目](index-images/add-breakpoint.png)
ユーザー フローを開始するには、レコーダー ツールの右上隅にある [再生] をクリックします。
再生は、ブレークポイントがあるステップに達すると一時停止します。 [ 続行] ボタンと [1 ステップ実行 ] ボタンもツール バーで使用できるようになります。
[ 1 つのステップの実行 ] ボタンをクリックして次のステップを実行し、もう一度一時停止するか、[ 続行 ] ボタンをクリックして、次のブレークポイント (またはユーザー フローの最後) に達するまで再生を続行します。
パフォーマンスを測定する
一連のユーザー操作の再生中に Web サイトの実行速度を測定するには、 レコーダー ツールを使用します。 ユーザー フローを 1 回記録することで、Web サイトのランタイム パフォーマンスの向上に取り組みながら、記録を何度も再生できます。
新しいユーザー フローを記録するには、「 ユーザー フローを記録する」の手順に従います。
パフォーマンスの測定中にユーザー フローを再生するには、レコーダー ツールの右上隅にある [パフォーマンス] パネルをクリックします。
![[パフォーマンス] パネル ボタン](index-images/measure-performance.png)
レコーダー ツールが以前に記録したユーザー操作を再生するまで待ちます。
パフォーマンス ツールが開き、ユーザー操作の再生中に Web サイトのパフォーマンスの記録が表示されます。
ユーザー フローの手順を編集する
ユーザー フローを記録したら、ユーザー フローの手順を編集できます。 たとえば、新しいステップを追加したり、既存のステップを削除したり、ステップの詳細を編集したりできます。
新しい手順を追加する
既存のユーザー フローに新しいステップを追加するには:
新しいステップを追加する前またはそれ以降のステップの横にある [ステップ アクションを開く ] (
) ボタンをクリックし、[ ステップの前に追加 ] または [ 後にステップを追加] を選択します。![[ステップ アクションを開く] アイコンと [ステップの追加] ボタン](index-images/add-step.png)
追加した新しい ステップ の詳細を編集するには、以下の「ステップを編集する」の手順に従います。 新しいステップの名前は、一時的に Wait for 要素です。
ステップを編集する
既存の手順の詳細を編集するには:
編集するステップの詳細セクションを開くには、ステップの横にある三角形 (
) ボタンをクリックします。 手順の詳細セクションが開きます。
ステップの 種類 、ステップが適用される DOM 要素の セレクター 、ステップのプロパティなど、ステップの詳細を編集します。 以下のセクションでは、さまざまな種類の手順とそのプロパティを示します。 変更内容は自動的に保存されます。
ステップの種類を変更する
ステップの詳細を編集するときにステップの種類を変更するには:
入力の横にある入力ボックスをクリック します。 たとえば、編集するステップに waitForElement 型がある場合は、値 waitForElement を含む入力ボックスをクリックします。
入力ボックスの内容を削除し、表示されるドロップダウン メニューから使用する新しい種類のステップを選択します。
![[種類] ドロップダウン メニュー](index-images/step-type-dropdown.png)
ユーザー フローでステップを編集するときは、次の種類の手順を使用できます。 各ステップの種類には、ステップに適用されるプロパティの一覧があります。
| ステップの種類 | 説明 | プロパティ |
|---|---|---|
change |
フォーム入力フィールドの値を変更します。 | セレクター: この手順が適用される要素を検索する方法。 value: フォーム入力フィールドを に設定する値。 |
click |
要素をクリックします。 | セレクター: この手順が適用される要素を検索する方法。 Offsetx/offsetY: 要素の左上隅からクリックする距離。 |
close |
ブラウザー ウィンドウを閉じます。 | なし。 |
doubleClick |
要素をダブルクリックします。 | セレクター: この手順が適用される要素を検索する方法。 Offsetx/offsetY: 要素の左上隅からダブルクリックまでの距離。 |
emulateNetworkConditions |
さまざまなネットワーク条件をエミュレートします。 | ダウンロード/upload: ダウンロードとアップロードの速度 (1 秒あたりのバイト数)。 latency: 受信する応答に送信される要求からの最小待機時間 (ミリ秒単位)。 |
hover |
要素の上にポインターを置いてエミュレートします。 | セレクター: この手順が適用される要素を検索する方法。 |
keyDown |
キーを押します。 | セレクター: この手順が適用される要素を検索する方法。 key: どのキーを押すか。 |
keyUp |
押されたキーを離します。 | セレクター: この手順が適用される要素を検索する方法。 key: リリースするキー。 |
navigate |
別の Web ページに移動します。 | url: 移動するページの URL。 |
scroll |
Web ページ内の位置までスクロールします。 | X/y: ページ内でスクロールする位置のオプションの水平座標と垂直座標。 |
setViewport |
ビューポートのサイズ、デバイスのピクセル比率、機能を変更します。 | 幅/height: ビューポートのサイズ。 deviceScaleFactor: デバイスのピクセル比率。 isMobile: ビューポートがモバイル デバイス ビューポートかどうか。 hasTouch: ビューポートがタッチ イベントをサポートするかどうか。 isLandscape: ビューポートが横向きかどうか。 |
waitForElement |
1 つの要素または複数の要素が Web ページに存在するまで待ちます。 | セレクター: この手順が適用される要素を検索する方法。 |
waitForExpression |
JavaScript 式が に true評価されるまで待ちます。 |
式: 評価する JavaScript 式。 |
ステップのセレクターを編集する
多くのステップの種類には、ステップが適用される DOM 要素を指定する selectors プロパティがあります。 たとえば、ステップにはセレクター プロパティがあり、clickユーザー フローのそのステップの実行時にページ内のどの要素をクリックするかを定義します。
selectors プロパティは、1 つ以上のセレクターの一覧です。 リスト内の各セレクターは、ページ内の要素を見つける別の方法になります。 レコーダー ツールは、リスト内の各セレクターが、セレクターと一致するページ内の要素を見つけるまで順番に試行します。
セレクターには、次のいずれかの種類を指定できます。
- または
.my-classなどの#my-element-with-idCSS セレクター。 - プレフィックスに が付
xpath/いた XPath セレクター (などxpath//html/body/form/div/label)。 - 要素のテキスト コンテンツ 。プレフィックスは
text/、 などtext/Add a taskです。
ステップのセレクターは、次のいずれかの方法で編集できます。
レンダリングされた Web ページで要素を選択する。
セレクターを手動で追加、削除、または変更します。
レンダリングされた Web ページで要素を選択してセレクターを編集するには、 ページ内の要素を選択してセレクターを更新し、選択するレンダリングされた Web ページ内の要素をクリックします。 レコーダー ツールは、選択した要素と一致するようにセレクターの一覧を更新します。
![[要素の選択] ボタン](index-images/select-element-in-page.png)
セレクターを手動で追加、削除、または変更できます。
セレクターを追加または削除するには、[ セレクター] でセレクターにマウス ポインターを合わせ、[ セレクターの追加 ] または [ セレクターの削除] をクリックします。
![[セレクターの追加と削除] ボタン](index-images/add-remove-selector.png)
セレクターの値を変更するには、[セレクター] で、 セレクターの値を含む入力ボックスをクリックし、セレクターの新しい値を入力します。
ステップを削除する
既存のユーザー フローからステップを削除するには:
削除するステップの横にある [ ステップ アクションを開く ] ([
) ボタンをクリックし、[ ステップの削除] を選択します。![[ステップ アクションを開く] ボタンと [ステップの削除] ボタン](index-images/remove-step.png)
ユーザー フローを削除する
以前に記録したユーザー フローを削除するには、記録の一覧を表示するときに、 削除する記録 の横にある [記録の削除] (![[記録の削除] アイコン](index-images/delete-icon.png){kind=icon}
) をクリックします。
![記録の一覧と、各記録の横にある [記録の削除] ボタン](index-images/delete-recording.png)
ユーザー フローをファイルとしてエクスポートおよびインポートする
ユーザー フローを他のユーザーと共有するには、記録されたユーザー フローを JSON ファイルとしてエクスポートします。 たとえば、ユーザー フローを共有すると、他のユーザーが同じ手順セットを実行してバグを再現するのに役立ちます。
ユーザー フローをファイルとしてエクスポートする
ユーザー フローを別のユーザーと共有するには、ユーザー フローを JSON ファイルとしてエクスポートします。
ユーザー フローの手順を表示するときは、レコーダー ツール ツール ツール バーの [エクスポート] (
![[エクスポート] ボタン](index-images/export-icon.png)
) ボタンをクリックし、[JSON] を選択します。![[エクスポート] ボタンドロップダウン メニューと [JSON] オプション](index-images/export-json.png)
ファイルを保存する場所を選択します。 ファイルは、ユーザー フローの名前と拡張子
.jsonを使用して保存されます。
ファイルからユーザー フローをインポートする
JSON ファイルからユーザー フローをインポートするには:
レコーダー ツール のツール バーで、[記録のインポート] (
![[記録のインポート] アイコン](index-images/import-icon.png)
) ボタンをクリックします。![[記録のインポート] ボタン](index-images/import-recording.png)
開いたファイル選択ダイアログで、ユーザー フロー JSON ファイルを選択し、[ 開く ] ボタンをクリックします。 ユーザー フローがインポートされ、 レコーダー ツールの記録の一覧に表示されます。
テスト自動化のためにユーザー フローをエクスポートする
テスト スクリプトを生成し、テスト自動化フレームワークで自動的に実行するには、次のようにユーザー フローを .js テスト スクリプト ファイルとしてエクスポートします。
ユーザー フローの手順を表示するときは、 レコーダー ツール ツール ツール バーの [エクスポート] ( [エクスポート ]
) ボタンをクリックし、エクスポート形式を選択します。![[エクスポート] ボタンドロップダウン メニューとさまざまなテスト自動化形式](index-images/export-for-test.png)
エクスポート形式 自動化フレームワークをテストする @puppeteer/replay再生ライブラリのテスト スクリプトとしてユーザー フローを エクスポート します。 puppeteer/replay リポジトリを参照してください。 Puppeteer Puppeteer テスト オートメーション フレームワークのテスト スクリプトとしてユーザー フローをエクスポートします。 「Puppeteer」を参照してください。 Puppeteer (ライトハウス分析を含む) Puppeteer テスト オートメーション フレームワークのテスト スクリプトとしてユーザー フローをエクスポートし、Web サイトのパフォーマンスの Lighthouse 分析を含みます。 [ 名前を付けて保存] ダイアログが開きます。
ファイルを保存する場所を選択します。 ファイルは、ユーザー フローの名前と拡張子
.jsを使用して保存されます。