ユーザーフローを記録、再生、測定する

Jecelyn Yeen

Sofia Emelianova

新しい [レコーダー] パネル（プレビュー機能）の概要を次の動画でご覧ください。

このチュートリアルを完了すると、[レコーダー] パネルを使用してユーザーフローを記録、再生、測定する方法を学びます。

記録されたユーザーフローの共有、編集、およびそのステップについて詳しくは、レコーダー機能のリファレンスをご覧ください。

[レコーダー] パネルを開く

1. DevTools を開きます。

2. その他のオプション     > [その他のツール] > [レコーダー] の順にクリックします。

   

   または、コマンド メニューを使用して [Recorder] パネルを開きます。

   

はじめに

このコーヒーの注文デモページを使用します。購入手続きは、ショッピング ウェブサイトでの一般的なユーザーフローです。

以降のセクションでは、[Recorder] パネルで以下の購入手続きフローを録画、再生、監査する方法について説明します。

1. カートにコーヒーを追加します。
2. カートに別のコーヒーを追加します。
3. カートページに移動します。
4. カートからコーヒー 1 枚を取り出します。
5. 購入手続きを開始します。
6. お支払いの詳細を入力します。
7. チェックアウトします。

ユーザーフローを記録する

1. このデモページを開きます。[Start new recording] ボタンをクリックして開始します。
2. [Recording name] テキスト ボックスに「coffee checkout」と入力します。
3. [Start a new recording] ボタンをクリックします。録画が開始されます。パネルに [Recording...] が表示され、録音が進行中であることが示されます。
4. [Cappuccino] をクリックしてカートに追加します。
5. [Americano] をクリックしてカートに追加します。レコーダーに、これまでに実行したステップが表示されます。
6. カートページに移動し、カートから Americano を削除します。
7. [Total: $19.00] ボタンをクリックしてご購入手続きを開始します。
8. お支払いの詳細フォームで、[名前] と [メール] のテキスト ボックスに入力し、[注文の最新情報とプロモーションに関するメッセージを受け取る] チェックボックスをオンにします。
9. [送信] ボタンをクリックしてご購入手続きを完了します。
10. [レコーダー] パネルで、 [録画を終了] ボタンをクリックして録画を終了します。

ユーザーフローを再生する

ユーザーフローを記録した後、[Replay] ボタンをクリックすると、そのフローを再生できます。

このページでユーザーフローが再生されます。リプレイの進行状況は [Recorder] パネルにも表示されます。

記録中に誤クリックをした場合や、動作がうまくいかない場合は、ユーザーフローをデバッグして、リプレイを遅らせ、ブレークポイントを設定して、1 つずつ実行します。

低速ネットワークをシミュレートする

リプレイ設定を構成することで、低速のネットワーク接続をシミュレートできます。たとえば、[リプレイ設定] を展開し、[ネットワーク] プルダウンで [3G 低速] を選択します。

今後、その他の設定もサポートされる可能性があります。ご希望のリプレイ設定をお知らせください。

ユーザーフローを測定する

[パフォーマンスを測定] ボタンをクリックすると、ユーザーフローのパフォーマンスを測定できます。たとえば、購入手続きはショッピング ウェブサイトの重要なユーザーフローです。[Recorder] パネルでは、購入手続きのフローを 1 回記録して定期的に測定できます。

[パフォーマンスを測定] ボタンをクリックすると、まずユーザーフローの再生がトリガーされた後、[パフォーマンス] パネルでパフォーマンス トレースが開きます。

[パフォーマンス] パネルでページのランタイム パフォーマンスを分析する方法を確認する。[Performance] パネルの [Web Vitals] チェックボックスを有効にすると、Web Vitals の指標を表示して、ユーザーのブラウジング エクスペリエンスを改善する機会を特定できます。

ステップを編集

記録されたワークフロー内のステップを編集するための基本的なオプションを見ていきましょう。

編集オプションの一覧については、機能リファレンスのステップを編集するをご覧ください。

ステップを展開

各ステップを開いて、アクションの詳細を確認します。たとえば、[クリック要素「Cappuccino」」のステップを展開します。

上のステップには 2 つのセレクタが表示されています。詳しくは、録音のセレクタについてをご覧ください。

ユーザーフローを再生すると、レコーダーはセレクタの 1 つを含む要素を順にクエリしようとします。たとえば、レコーダーが最初のセレクタで要素のクエリを正常に実行した場合、2 番目のセレクタはスキップされ、次のステップに進みます。

ステップのセレクタを追加および削除する

セレクタは追加または削除できます。たとえば、この場合は aria/Cappuccino で十分であるため、selector #2 を削除できます。セレクタ 2 にカーソルを合わせ、- をクリックして削除します。

ステップのセレクタを編集する

セレクタも編集できます。たとえば、[Cappuccino] ではなく [Mocha] を選択する場合は、次のようにします。

1. セレクタの値を aria/Mocha に変更してください。

   

   または、選択ボタン をクリックして、ページで [Mocha] をクリックします。

2. フローを再生します。[Cappuccino] ではなく [Mocha] が選択されます。

3. type、target、value など、他のステップ プロパティも編集してみてください。

ステップの追加と削除

ステップを追加または削除するオプションもあります。これは、ステップを追加する場合や、誤って追加したステップを削除する場合に便利です。ユーザーフローを再記録する代わりに、編集することができます。

1. 編集するステップを右クリックするか、その横にあるその他アイコン をクリックします。

   

2. [ステップを削除] を選択すると、ステップを削除できます。たとえば、Mocha ステップの後の スクロール イベントは必要ありません。

3. たとえば、ページに 9 コーヒーが表示されるまで待って、なんらかの手順を実行するとします。[Mocha] ステップメニューで、[Add step before] を選択します。

4. [Assert Element] で、新しいステップを次のように編集します。

   • タイプ: waitForElement
   • セレクタ #1: .cup
   • 演算子: ==（[演算子を追加] ボタンをクリック）
   • カウント: 9（[カウントを追加] ボタンをクリックします）

5. 今すぐフローを再生して、変更を確認します。

次のステップ

これでチュートリアルは完了です。

レコーダーに関連する機能やワークフロー（インポートやエクスポートなど）について詳しくは、レコーダー機能のリファレンスをご覧ください。