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

ソフィア・エメリアノバ
Sofia Emelianova

新しい [レコーダー] パネル(プレビュー機能)の概要動画を以下に示します。

このチュートリアルでは、レコーダー パネルを使用してユーザーフローの記録、リプレイ、測定を行う方法について説明します。

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

レコーダー パネルを開く

  1. DevTools を開きます
  2. その他のオプション アイコン より多く。   > [その他のツール] > [レコーダー] をクリックします。

    メニューのレコーダー。

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

    コマンド メニューにレコーダー コマンドを表示します。

はじめに

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

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

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

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

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

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

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

ユーザーフローをもう一度再生する

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

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

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

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

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

リプレイの設定。

今後、さらに多くの設定がサポートされる予定です。ご希望のリプレイ設定についてお知らせください

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

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

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

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

[パフォーマンス] パネル

ステップを編集

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

編集オプションの一覧については、対象物リファレンスの編集手順をご覧ください。

ステップを展開

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

レコーダー パネルで、[Cappuccino] 要素が展開され、タイプ、ターゲット、セレクタ、オフセット X、オフセット Y が表示されています。

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

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

ステップのセレクタの追加と削除

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

DevTools のレコーダー パネルに、セレクタを削除するオプションが表示されている。

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

セレクタも編集可能です。たとえば、「カプチーノ」ではなく「モカ」を選択する場合は、次のように指定します。

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

    セレクタを編集します。

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

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

  3. タイプターゲットなど、ステップの他のプロパティを編集してみてください。

ステップの追加と削除

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

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

    ステップのプルダウン メニュー。前後にステップを削除、追加するオプションもあります。

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

  3. たとえば、ページにコーヒーが 9 個表示されるまで待ってからなんらかの手順を行いたいとします。[Mocha] ステップ メニューで、[以前にステップを追加] を選択します。 [Assert Element] という新しいステップが追加され、編集できるようになりました。

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

    • 型: waitForElement
    • セレクタ 1: .cup
    • 演算子: ==演算子を追加ボタンをクリック)
    • count: 9([add count] ボタンをクリックします) コーヒーの購入手続きの新しい手順が更新され、前述の詳細情報が追加されました。
  5. もう一度再生。今すぐフローを再生して変更を確認してください。

次のステップ

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

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