ウェブブラウザを使用してシナリオを記録およびインポートする方法

Chrome Recorder（Edgeや他のChromiumベースのブラウザでも利用可能）を使用して、ウェブサイトとのインタラクションを簡単に記録し、その後、Synthetic Monitoring機能内のシナリオとして録音をインポートします。

録音の作成とエクスポート

ステップ 1: Chrome開発者コンソールを開く

1. Google Chromeを使用して、録音したいウェブサイトを開きます。

2. プロフィール写真の隣にある'三点リーダー'アイコンをクリックして、開発者コンソールを開きます。

3. ‘その他のツール’をクリックし、次に‘開発者ツール’を選択します。

4. 開発者コンソールの右上隅にある'三点リーダー'アイコンをクリックし、次に‘その他のツール’ > ‘Recorder’を選択します。

ステップ 2: 録音を作成する

1. 開いたウィンドウで‘新しい録音を作成’を選択します。

2. 録音の名前を入力します。注意：録音の名前はエクスポート時のファイル名およびSynthetic Monitoring内のシナリオ名になります。

3. ‘録音するセレクタのタイプ’の下で、任意の好みに応じて‘CSS’または‘XPath’を選択します。注意：選択したセレクタのタイプはSynthetic Monitoringで使用されます。

4. ‘録音を開始’をクリックします。

5. 録音したいアクションを実行し、完了したら録音を停止します。

ステップ 3: 録音をエクスポートする

録音を停止したら、‘エクスポート’ボタンをクリックして、‘JSON’を選択することで、JSONファイルとしてエクスポートできます。

録音されたアクションとブラウジングについて

録音されたアクション

ウェブサイト上で実行するすべてのアクションは、録音を終了するまで記録されます。

ブラウジングを録音する際には、結果のシナリオの質を向上させるために、役立つアクションのみを実行するようにしてください。キーボードナビゲーションはSynthetic Monitoringではサポートされていないため、クリックのみを使用する必要があります（タブ、上矢印キー、フォームを提出するための‘Enter’キーなどは使用しないでください）。

録音されたアクションはタイムラインとして表示されます。タイムライン内のアクションをクリックすると、その詳細（例：アクションが発生したイベントのタイプやセレクタ）を確認できます。

録音されたブラウジング

Chromeは自動的にブラウジング（例：ページの変更）を検出し、Synthetic Monitoringはこの情報を再利用してステップとそのアクションを定義します。

ただし、ページの変更がない場合（例：‘カートに追加’やSPAナビゲーション）、ChromeはSynthetic Monitoringのための適切な実装を作成せず、すべてのアクションが同じステップに含まれます。

‘Add assertedEvents’をクリックすることで、録音機能にシナリオを複数のステップに分割させることができます。

録音をインポートしてシナリオを作成する

ステップ 1: 録音をインポートする

1. ‘Web Performance’ > 'Synthetic Monitoring'に移動し、‘Scenarios’を選択します。

2. ‘シナリオを作成’ボタンをクリックし、次に‘ブラウザ録音から’オプションを選択します。

3. エクスポートしたJSONファイルを見つけて選択し、アップロードします。

4. アップロードが完了すると、インポートできなかったアクションが画面に表示されます。

インポートされたアクションタイプ

注意：以下のChrome録音機能のアクションのみがシナリオにインポートできます：

ステップ 2: シナリオを確認し、絞り込む

シナリオを実行する前に、以下のアクションを確認し、レビューする必要があります：

• ステップとアクションの名前を変更: あなたとあなたのチームが理解しやすい命名規則を使用してください
• 任意のステップを必要に応じて分割: Chrome Recorderはページが変更されたときにのみ「ステップ」を作成します（したがって、SPAナビゲーションは検出されません）。ほとんどのシナリオでは、いくつかのインポートされたステップをいくつかに分割し、記録されたアクションとして定義されたアクションに特に注意を払う必要があります。
• 不要な「入力を埋める」アクションを削除:
  • 録画中に、入力フィールドを埋める前にクリックした可能性が高く、そのためシナリオにクリックアクションが表示されます。このアクションは削除できます。「入力を埋める」アクションはすでに入力フィールド内でクリックを実行するためです。
  • Chrome Recorderは、単一のキーボード入力に対して複数のアクションを記録した可能性があります。これは通常、大文字で最初の文字を入力したときに発生します。たとえば、「HEllo」は通常、「HE」を含むアクションと「HEllo」を含むアクションを生成します。シナリオから関連のないアクションを削除する必要があります。
• 必要に応じて「チェック」アクションを追加: デフォルトでは、シナリオをインポートすると「チェック」アクションはありません。チェックを使用すると、ページが期待される状態にあることを確認し、そうでない場合は実行時に警告を発行できます。
• シナリオの構成を編集: 場所と帯域幅を好みに応じて確認し、更新してください。
  • 場所は、最後に作成されたシナリオと同じか、ない場合はデフォルトで「フランス」になります。
  • デフォルトの帯域幅は、選択した場所/デバイスの最初のものです。

ステップとアクションの管理についてさらに詳しくはこちら。

追加のアクション（該当する場合）:

• 「スクロール」アクションを追加: Chrome Recorderはスクロールアクションを記録しません。シナリオが遅延読み込みされた要素と対話する必要がある場合は、手動でこれらを追加する必要があります。
• shadowDOMを使用しているウェブサイト: シナリオはXPATHおよびCSSセレクタのみをサポートします。shadowDOMの場合、以下のようにセレクタを::shadowRoot::キーワードを使用して更新する必要があります。