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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

新しい [Recorder] パネル（プレビュー機能）の概要は、こちらの動画でご覧いただけます。

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

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

Recorder（レコーダー）パネルを開く

  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] をクリックしてカートに追加します。レコーダーに、これまでに実行したステップが表示されます。 [Recorder] パネルに表示されるステップ。
  6. カートページに移動し、カートから Americano を削除します。
  7. [Total: $19.00] ボタンをクリックしてご購入手続きを開始します。
  8. 支払い情報フォームで [Name]（名前）と [Email]（メール）のテキスト ボックスに入力し、[I would like to receive order updates and promotional messages.]（ご注文の状況とお得な情報を受け取る）チェックボックスをオンにします。 お支払い情報フォーム。
  9. [送信] ボタンをクリックしてご購入手続きを完了します。
  10. [レコーダー] パネルで、録音を終了します。 [録画を終了] ボタンをクリックして録画を終了します。

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

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

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

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

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

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

リプレイ設定。

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

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

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

[Measure performance] をクリックすると、ユーザーフローが再生され、[パフォーマンス] パネルにパフォーマンス トレースが表示されます。

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

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

ステップを編集

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

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

ステップを展開

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

[Recorder] パネルで「Cappuccino」要素を展開して、type、target、selector、offset X、offset Y を表示

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

ユーザーフローを再生すると、レコーダーはセレクタが関連付けられている要素のクエリを順番に試行します。たとえば、レコーダーが最初のセレクタで要素のクエリを正常に実行した場合、2 番目のセレクタはスキップされ、次のステップに進みます。

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

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

セレクタを削除するオプションが表示されている DevTools の [Recorder] パネル

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

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

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

    セレクタを編集する。

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

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

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

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

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

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

    ステップの前後に削除または追加するオプションを含むステップのプルダウン メニュー。

  2. この場合は [Remove step]（ステップを削除）を選択して削除できます。たとえば、「Mocha」ステップの後の「Scroll」イベントは不要です。

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

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

    • タイプ: waitForElement
    • selector #1: .cup
    • operator: ==（[add operator]（演算子を追加）をクリックします）
    • カウント: 9（[カウントを追加] ボタンをクリックします）コーヒー購入手続きの新しい手順が更新され、上述の内容が加わりました。

  5. もう一回見る。フローを再生して変更を確認します。

次のステップ

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

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