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

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

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

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

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

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

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

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

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

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

2. 録画の名前を入力します。録画の名前は、エクスポート時のファイル名およびSpeed Analysis Labでのシナリオ名になりますのでご注意ください。

3. ‘録画するセレクタータイプ’の下で、好みに応じて‘CSS’または‘XPath’を選択します。選択したセレクターのタイプは、Speed Analysis Labで使用されるものになりますのでご注意ください。

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

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

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

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

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

記録されたアクション

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

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

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

記録されたブラウジング

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

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

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

録画のインポートとシナリオの作成

ステップ1: 録画のインポート

1. ‘Speed Analysis Lab’に移動し、‘シナリオ’を選択します。

2. ‘ブラウザ録画から’をクリックします。

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

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

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

注意：Speed Analysis Labにインポートできるのは、以下のChromeレコーダーアクションのみです：

ステップ2: シナリオのレビューと洗練

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

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

ここでステップとアクションの管理について詳しく学びましょう。

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

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