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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

  1. DevTools を開きます。

  2. その他アイコン   その他。   > [その他のツール] > [Recorder] をクリックします。

    メニューの [Recorder]

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

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

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

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

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

録画中に誤ってクリックしてしまった場合や、何かが機能しない場合は、ユーザーフローをデバッグできます。再生速度を遅くしたり、ブレークポイントを設定したりして、手順ごとに実行できます。

ネットワークの遅延をシミュレートする

[Replay settings]（再生の設定）で低速のネットワーク接続をシミュレーションできます。たとえば、[Replay settings] を展開し、[Network]（ネットワーク）プルダウンで [Slow 3G] を選択します。

リプレイの設定。

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

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

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

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

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

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

ステップを編集する

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

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

ステップを展開

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

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

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

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

ステップからセレクタを追加、削除する

セレクタは追加、削除できます。たとえば、この場合は aria/Cappuccino で十分なため、セレクタ 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] で、次の詳細を指定して新しいステップを編集します。

    • type: waitForElement
    • selector #1: .cup
    • operator: ==（[add operator]（演算子を追加）をクリックします）
    • count: 9（[add count]（数量を追加）をクリックします） 上記の内容に更新されたコーヒー購入手続きの新しいステップ

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

次のステップ

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

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