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

新しい [レコーダー] パネル（プレビュー機能）については、次の動画をご覧ください。

このチュートリアルでは、[Recorder] パネルを使用してユーザーフローを記録、再生、測定する方法について説明します。

記録されたユーザーフローを共有し、編集して手順を確認する方法について詳しくは、レコーダー機能のリファレンスをご覧ください。

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

1. DevTools を開きます。

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

   

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

   

はじめに

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

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

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

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

1. このデモページを開きます。[新しい録画を開始] ボタンをクリックして開始します。
2. [Recording name] テキスト ボックスに「coffee checkout」と入力します。

詳細については、セレクタについてをご覧ください。1. [Start a new recording]（新しい録画を開始）ボタンをクリックします。録画が開始されます。パネルに [Recording...] と表示され、録画が進行中であることが示されます。 1. [Cappuccino] をクリックしてカートに追加します。 1. [Americano] をクリックしてカートに追加します。[Recorder] に、これまでに実行した手順が表示されます。 1. カートページに移動し、カートから「Americano」を削除します。

1. [Total: $19.00] ボタンをクリックしてご購入手続きを開始します。 1. お支払いの詳細フォームで、[名前] と [メール] のテキスト ボックスに入力し、[注文の最新情報とプロモーション メッセージを受け取る] チェックボックスをオンにします。 1. [送信] ボタンをクリックしてご購入手続きを完了します。 1. [Recorder] パネルで、 [End recording] ボタンをクリックして録音を終了します。

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

ユーザーフローを記録したら、[Replay] ボタンをクリックして再生します。

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

録画中に誤ってクリックした場合や、動作がうまくいかない場合は、ユーザーフローをデバッグできます。具体的には、再生速度を遅くしてブレークポイントを設定し、1 つずつ実行します。

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

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

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

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

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

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

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

ステップを編集する

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

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

ステップを展開

各ステップを開くと、アクションの詳細が表示されます。たとえば、[クリック要素「Cappuccino」] ステップを展開します。

上記の手順では、2 つのセレクタを使用しています。詳しくは、録画のセレクタについてをご覧ください。

ユーザーフローを再生すると、レコーダーはセレクタのいずれかを使用して、シーケンスによって要素をクエリしようとします。たとえば、レコーダーが最初のセレクタで要素を正常にクエリすると、2 番目のセレクタはスキップされて次のステップに進みます。

ステップでセレクタを追加または削除する

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

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

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

1. 代わりに、セレクタの値を aria/Mocha に変更します。

   

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

2. フローを再生します。[Cappuccino] ではなく [Mocha] が選択されていることを確認します。

3. type、target、value など、他のステップのプロパティを編集してみます。

ステップを追加、削除する

ステップを追加、削除することもできます。これは、余分なステップを追加する場合や、誤って追加したステップを削除する場合に便利です。ユーザーフローを再記録する代わりに、編集するだけで済みます。

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

   

2. [ステップを削除] を選択して削除できます。たとえば、「Mocha」ステップの後の「Scroll」イベントは必要ありません。

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

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

   • 型: waitForElement
   • セレクタ 1: .cup
   • 演算子: ==（[演算子を追加] をクリック）
   • count: 9（[add count] ボタンをクリックします）

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

次のステップ

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

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