機能リファレンス

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Chrome DevTools の [Recorder] パネルの包括的な機能リファレンスでは、ユーザーフローの共有、編集、編集の方法について説明します。

[レコーダー] パネルの基本的な操作については、ユーザーフローを記録、再生、測定するをご覧ください。

ショートカットについて学び、カスタマイズする

ショートカットを使用すると、レコーダーをすばやく操作できます。デフォルトのショートカットの一覧については、レコーダー パネルのキーボード ショートカットをご覧ください。

すべてのショートカットを一覧表示するヒントをレコーダーで開くには、右上にある ショートカットを表示します。 [Show shortcuts] をクリックします。

[ショートカットを表示] ボタン。

レコーダーのショートカットをカスタマイズするには:

  1. 設定] の順にタップします。 [設定] > [ショートカット] を開きます。
  2. [レコーダー] セクションまで下にスクロールします。
  3. ショートカットをカスタマイズするの手順に沿って操作します。

ユーザーフローの編集

DevTools の [Recorder] パネルのヘッダーにはプルダウン メニューがあり、編集するユーザーフローを選択できます。

[Recorder] パネルの上部には、次のオプションがあります。

  1. 新しい録音を追加[追加] をクリックします。します。+ アイコンをクリックして、新しい録音を追加します。
  2. すべての録音を表示開くプルダウンに、保存した録音のリストが表示されます。[[number] recording(s)] オプションを選択すると、保存した録音のリストを展開して管理できます。 すべての録音を表示します。

  3. 録音をエクスポートしますファイルのダウンロード。。スクリプトをさらにカスタマイズしたり、バグレポート用に共有したりするには、ユーザーフローを次のいずれかの形式でエクスポートします。

    形式の詳細については、ユーザーフローをエクスポートするをご覧ください。

  4. 録音をインポートしますファイルのアップロード。。JSON 形式のみ。

  5. 録音を削除削除します。選択した録音を削除します。

録音の名前を編集するには、録音の名前の横にある編集ボタン 編集] をクリックします。 をクリックします。

ユーザーフローを共有する

レコーダーでは、ユーザーフローのエクスポートとインポートを行うことができます。これは、バグを再現する手順の正確な記録を共有できるため、バグレポートに役立ちます。外部ライブラリを使用して、エクスポートして再生することもできます。

ユーザーフローをエクスポートする

ユーザーフローをエクスポートするには:

  1. エクスポートするユーザーフローを開きます。
  2. [Recorder] パネルの上部にある ファイルのダウンロード。 [Export] をクリックします。 エクスポートのファイル形式オプション。
  3. プルダウン リストから次のいずれかの形式を選択します。
    • JSON ファイル。録音を JSON ファイルとしてダウンロードします。
    • @puppeteer/replay。録画を Puppeteer リプレイ スクリプトとしてダウンロードします。
    • Puppeteer。録画を Puppeteer スクリプトとしてダウンロードします。
    • Puppeteer（Lighthouse 分析を含む）。録画を、Lighthouse 分析が埋め込まれた Puppeteer スクリプトとしてダウンロードします。
    • レコーダーのエクスポート拡張機能に用意されている 1 つ以上のオプション。
  4. ファイルを保存します。

デフォルトのエクスポート オプションでは、次のことができます。

  • JSON。人が読める形式の JSON オブジェクトを編集し、JSON ファイルをレコーダーにimportします。
  • @puppeteer/replay。Puppeteer Replay ライブラリを使用してスクリプトを再生します。@puppeteer/replay スクリプトとしてエクスポートする場合、ステップは JSON オブジェクトのままです。CI/CD パイプラインと統合したいが、ステップを JSON として編集し、後で変換して Recorder にインポートする柔軟性がある場合に最適です。
  • Puppeteer スクリプト。Puppeteer でスクリプトを再生します。ステップは JavaScript に変換されるため、ステップをループさせるなど、より細かいカスタマイズが可能です。注意点として、このスクリプトをレコーダーにインポートし直すことはできません。

  • Puppeteer（Lighthouse 分析を含む）。このエクスポート オプションは前のオプションと同じですが、Lighthouse 分析を生成するコードが含まれています。

    スクリプトを実行し、flow.report.html ファイルの出力を確認します。

    # npm i puppeteer lighthouse
node your_export.js

    Chrome で Lighthouse レポートが開きました。

拡張機能をインストールしてカスタム形式でエクスポートする

レコーダーの拡張機能をご覧ください。

ユーザーフローをインポートする

ユーザーフローをインポートするには:

  1. [Recorder] パネルの上部にあるインポート ボタン ファイルのアップロード。 をクリックします。 録音をインポートします。
  2. 記録されたユーザーフローを含む JSON ファイルを選択します。
  3. もう一度再生。 [Replay] ボタンをクリックして、インポートしたユーザーフローを実行します。

外部ライブラリを使用して再生する

Puppeteer Replay は、Chrome DevTools チームが管理するオープンソース ライブラリです。Puppeteer 上に構築されています。これはコマンドライン ツールで、JSON ファイルを再生することができます。

それとは別に、次のサードパーティ ライブラリを使用して JSON ファイルを変換して再生することもできます。

JSON ユーザーフローをカスタム スクリプトに変換します。

  • Cypress Chrome レコーダー。これを使用して、ユーザーフローの JSON ファイルを Cypress テスト スクリプトに変換できます。実際の動作については、こちらのデモをご覧ください。
  • Nightwatch Chrome のレコーダー。これを使用して、ユーザーフローの JSON ファイルを Nightwatch テスト スクリプトに変換できます。
  • CodeceptJS Chrome レコーダー。これを使用して、ユーザーフローの JSON ファイルを CodeceptJS テスト スクリプトに変換できます。

JSON ユーザーフローを再生します。

ユーザーフローをデバッグする

他のコードと同様に、記録されたユーザーフローのデバッグが必要になることがあります。

[Recorder] パネルでは、リプレイの速度を下げ、ブレークポイントを設定し、実行をステップ実行し、ステップと並行してさまざまな形式のコードを検査できます。

リプレイを遅らせる

デフォルトでは、レコーダーは可能な限り速くユーザーフローをリプレイします。録画中の状況を把握するには、再生速度を遅くします。

  1. [もう一度再生。再生] プルダウン メニューを開きます。
  2. リプレイ速度のオプションを選択します。
    • 標準（デフォルト）
    • 低速
    • 非常に遅い
    • 非常に遅い

リプレイが遅い。

コードを検査する

さまざまな形式でユーザーフローのコードを調べるには:

  1. [Recorder] パネルで録音を開きます。
  2. 手順リストの右上にある [コードを表示] をクリックします。 [コードを表示] ボタン。
  3. [レコーダー] では、ステップとそのコードが並んで表示されます。 ステップとそのコードを並べて表示します。
  4. ステップにカーソルを合わせると、レコーダーによって、拡張機能のコードも含め、あらゆる形式で該当するコードがハイライト表示されます。

  5. 形式のプルダウン リストを展開して、ユーザーフローのエクスポートに使用する形式を選択します。

    形式のプルダウン リスト。

    これは、3 つのデフォルト形式（JSON、@puppeteer/replay、Puppeteer スクリプト、または拡張機能によって提供されている形式）のいずれかになります。

  6. ステップのパラメータと値を編集して、記録のデバッグに進みます。コードビューは編集できませんが、左側のステップに変更を加えるとそれに応じて更新されます。

ブレークポイントを設定してステップごとに実行する

ブレークポイントを設定してステップごとに実行する手順は次のとおりです。

  1. 録音内のステップの横にある ステップ。 の円にカーソルを合わせます。円が ブレークポイント。 ブレークポイント アイコンに変わります。
  2. ブレークポイント。 ブレークポイント アイコンをクリックして、記録を再生します。実行はブレークポイントで一時停止します。 実行の一時停止。
  3. ステップを順に実行するには、[Recorder] パネルの上部にあるアクションバーの [1 つのステップを実行します。 Execute one step] ボタンをクリックします。
  4. リプレイを停止するには、一時停止する。 [リプレイをキャンセル] をクリックします。

ステップを編集する

録画中の任意のステップは、録画中と録画後に、その横にある 開く ボタンをクリックすると編集できます。

足りない歩数を追加したり、誤って記録した歩数を削除したりすることもできます。

ステップを追加する

場合によっては、ステップを手動で追加する必要があります。たとえば、レコーダーは hover イベントを自動的にキャプチャしません。これは、録画に汚染されるためです。このようなイベントすべてが有用とは限らないためです。ただし、プルダウン メニューなどの UI 要素は hover にのみ表示されます。このような要素に依存するユーザーフローに、hover ステップを手動で追加できます。

手動でステップを追加するには:

  1. このデモページを開き、新しい録画を開始します。 録画を開始して、ホバーイベントをキャプチャします。
  2. ビューポートの要素にカーソルを合わせます。操作メニューが表示されます。 要素にカーソルを合わせます。
  3. メニューから操作を選択して、録画を終了します。レコーダーがクリック イベントのみをキャプチャします。 アクションをクリックして記録を終了する。
  4. もう一度再生。 [再生] をクリックして、録画を再生してみます。レコーダーがメニュー内の要素にアクセスできないため、タイムアウト後にリプレイが失敗します。 再生に失敗しました。
  5. [クリック] ステップの横にある その他ボタン。 のその他アイコンをクリックし、[前にステップを追加] を選択します。 クリックの前にステップを追加する
  6. 新しいステップを開きます。デフォルトでは、waitForElement 型です。type の横にある値をクリックして、[hover] を選択します。カーソルを合わせています。
  7. 次に、新しいステップに適したセレクタを設定します。選択する [選択] をクリックし、Hover over me! 要素のポップアップ メニュー以外の領域をクリックします。セレクタは #clickable に設定されています。セレクタの設定
  8. 録音をもう一度再生してみます。カーソルを合わせるステップが追加されると、レコーダーでフローが正常にリプレイされます。 再生成功。

アサーションを追加する

記録中に、HTML 属性や JavaScript プロパティなどのアサーションを行うことができます。アサーションを追加するには:

  1. こちらのデモページなどで録画を開始します。

  2. [Add assertion] をクリックします。

    [Add assertion] ボタン。

    レコーダーにより、構成可能な waitForElement ステップが作成されます。

  3. このステップのセレクタを指定します。

  4. ステップを構成します。ただし、waitForElement タイプは変更しないでください。たとえば、次の項目を指定できます。

    • HTML 属性。[属性を追加] をクリックし、このページの要素で使用する属性の名前と値を入力します。例: data-test: <value>
    • JavaScript プロパティ。[プロパティを追加] をクリックし、プロパティの名前と値を JSON 形式で入力します。例: {".innerText":"<text>"}
    • その他のステップのプロパティ。例: visible: true

  5. 残りのユーザーフローの録画に進み、録画を停止します。

  6. [もう一度再生。 再生] をクリックします。アサーションが失敗した場合、タイムアウト後にレコーダーにエラーが表示されます。

このワークフローの実際の動作については、次の動画をご覧ください。

ステップをコピー

ユーザーフロー全体をエクスポートする代わりに、1 つのステップをクリップボードにコピーできます。

  1. コピーするステップを右クリックするか、その横にあるその他アイコン その他メニュー。 をクリックします。
  2. プルダウン メニューで、[Copy as ...] オプションのいずれかを選択します。

プルダウン メニューからコピー オプションを選択する。

JSON、Puppeteer、@puppeteer/replay、拡張機能によって提供される形式など、さまざまな形式でステップをコピーできます。

ステップを削除

誤って記録したステップを削除するには、ステップを右クリックするか、その横にあるその他アイコン その他メニュー。 をクリックして [ステップを削除] を選択します。

ステップを削除します。

また、レコーダーでは、各録音の先頭に次の 2 つのステップが自動的に追加されます。

ビューポートとナビゲーション ステップが設定された録画。

  • ビューポートを設定します。ビューポートのサイズ、スケーリング、その他のプロパティを制御できます。
  • ナビURL を設定し、リプレイごとにページを自動的に更新します。

ページを再読み込みせずにページ内自動化を行うには、上記のナビゲーション ステップを削除します。

ステップを構成する

ステップを構成するには:

  1. タイプ（click、doubleClick、hover、（入力）change、keyUp、keyDown、scroll、close、navigate（ページ単位）、waitForElement、waitForExpression、setViewport）を指定します。

    他のプロパティは type 値に依存します。

  2. type の下で必須プロパティを指定します。

    ステップを構成します。

  3. 対応するボタンをクリックして、オプションのタイプ固有のプロパティを追加し、指定します。

使用可能なプロパティのリストについては、ステップのプロパティをご覧ください。

オプションのプロパティを削除するには、その横にある 削除 [削除] ボタンをクリックします。

配列プロパティに要素を追加したり、配列プロパティから要素を削除したりするには、要素の横にある [+] ボタンまたは [-] ボタンをクリックします。

ステップのプロパティ

各ステップには、次のオプションのプロパティを指定できます。

  • target - Chrome DevTools プロトコル（CDP）ターゲットの URL。デフォルトの main キーワードは現在のページを参照します。
  • assertedEvents（現時点では 1 つの navigation イベントのみ可能）

ほとんどのステップタイプで使用できるその他の一般的なプロパティは次のとおりです。

  • frame - ネスト可能な iframe を識別するゼロベースのインデックスの配列。たとえば、メイン ターゲットの 2 番目の iframe 内にある 1 番目の iframe を [1, 0] として識別できます。
  • timeout - ステップ実行までの待機時間（ミリ秒単位）。詳細については、ステップのタイムアウトを調整するをご覧ください。
  • selectors - セレクタの配列。詳細については、セレクタについてをご覧ください。

タイプ固有のプロパティは次のとおりです。

タイプ プロパティ 必須 説明
click
doubleClick		 offsetX
offsetY		 チェックします。 要素のコンテンツ ボックスの左上からの相対位置（ピクセル単位）
click
doubleClick		 button ポインタボタン: メイン | 補助 | 秒 | 戻る | 進む
change value チェックします。 最終値
keyDown
keyUp		 key チェックします。 キーの名前
scroll x
y		 絶対スクロールの x 位置と y 位置（ピクセル単位）、デフォルトは 0
navigate url チェックします。 ターゲット URL
waitForElement operator >= | ==（デフォルト）| <=
waitForElement count セレクタによって識別される要素の数
waitForElement attributes HTML 属性とその値
waitForElement properties JavaScript プロパティと JSON 形式の値
waitForElement visible データ型はブール値です。要素が DOM 内にあり、可視（display: none または visibility: hidden がない）場合は true。
waitForElement
waitForExpression		 asserted events 現時点では type: navigation のみですが、タイトルと URL を指定できます。
waitForElement
waitForExpression		 timeout 最大待機時間（ミリ秒）
waitForExpression expression チェックします。 true に解決される JavaScript 式
setViewport width
height		 チェックします。 ビューポートの幅と高さ（ピクセル単位）
setViewport deviceScaleFactor チェックします。 デバイス ピクセル比（DPR）、デフォルトは 1
setViewport isMobile
hasTouch
isLandscape		 チェックします。 次のいずれかを指定するブール値のフラグ:
  • メタタグを考慮する
  • タッチイベントをサポートする
  • 横表示
    		•

    リプレイが一時停止するプロパティは 2 つあります。

    • waitForElement プロパティは、セレクタによって識別される複数の要素が存在する（または存在しない）までステップを待機させます。たとえば次のステップでは、セレクタ .my-class に一致するページ内にある要素が 3 つ未満になるまで待機します。

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • waitForExpression プロパティは、JavaScript 式が true に解決されるまでステップを待機させます。たとえば、次のステップは 2 秒間一時停止してから true に解決され、リプレイを続行できます。

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    ステップのタイムアウトを調整する

    ページのネットワーク リクエストが遅い場合やアニメーションが長い場合、デフォルトのタイムアウト（5000 ミリ秒）を超えるステップでリプレイが失敗する可能性があります。

    この問題を回避するには、各ステップのデフォルトのタイムアウトを一度に調整するか、ステップごとに個別のタイムアウトを設定します。特定のステップでタイムアウトが発生すると、デフォルトの値が上書きされます。

    各ステップのデフォルトのタイムアウトを一度に調整するには:

    1. [リプレイ設定] をクリックして、[タイムアウト] ボックスを編集可能にします。

      リプレイ設定。

    2. [タイムアウト] ボックスで、タイムアウト値をミリ秒単位で設定します。

    3. もう一度再生。 [再生] をクリックして、調整されたデフォルトのタイムアウトの動作を確認します。

    特定のステップでデフォルトのタイムアウトを上書きするには:

    1. ステップを展開して、[タイムアウトを追加] をクリックします。

      タイムアウトを追加。

    2. timeout: <value> をクリックして、値をミリ秒単位で設定します。

      タイムアウト値を設定します。

    3. もう一度再生。 [再生] をクリックして、タイムアウトが設定されたステップを確認します。

    ステップのタイムアウトの上書きを削除するには、その横にある [削除] ボタン 削除 をクリックします。

    セレクタについて

    新しい録画を開始すると、以下の項目を設定できます。

    新しい録音を設定しています。

    • [セレクタ属性] テキスト ボックスにカスタムテスト属性を入力します。レコーダーは、一般的なテスト属性のリストではなく、この属性を使用してセレクタを検出します。

    • [記録するセレクタの種類] のチェックボックスで、自動検出するセレクタのタイプを選択します。

      • チェックボックス。 CSS。構文セレクタ。
      • チェックボックス。 ARIA。セマンティック セレクタ。
      • チェックボックス。 テキスト。一意のテキストが最も短いセレクタ（利用可能な場合）。
      • チェックボックス。 XPath。XML パス言語を使用するセレクタ。
      • チェックボックス。 Pierce。CSS のセレクタと似ていますが、Shadow DOM を突破できます。

    一般的なテストセレクタ

    単純なウェブページの場合、レコーダーがセレクタを検出するには id 属性と CSS の class 属性で十分です。ただし、以下の理由により、必ずしもそうなるとは限りません。

    • 動的クラスや変更される ID がウェブページで使用されることがあります。
    • コードまたはフレームワークの変更が原因で、セレクタが破損する場合があります。

    たとえば、最新の JavaScript フレームワーク（React、Angular、Vue など）や CSS フレームワークで開発されたアプリケーションの場合、CSS の class 値が自動生成される場合があります。

    ランダムな名前を持つ自動生成された CSS クラス。

    このような場合は、data-* 属性を使用して復元性に優れたテストを作成できます。デベロッパーが自動化に使用する一般的な data-* セレクタはすでにいくつかあります。レコーダーもサポートしています。

    ウェブサイトで次の一般的なテストセレクタを定義している場合、レコーダーはまずそれらを自動的に検出して使用します。

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    たとえば、こちらのデモページの「Cappuccino」要素で、テスト属性を確認します。

    定義済みのテストセレクタ

    「Cappuccino」のクリックを記録し、録音の対応するステップを展開して、検出されたセレクタを確認します。

    検出された共通テストセレクタ。

    録画のセレクタをカスタマイズする

    一般的なテストセレクタが機能しない場合は、録音のセレクタをカスタマイズできます。

    たとえば、こちらのデモページでは、セレクタとして data-automate 属性を使用しています。新しい録画を開始し、セレクタ属性として data-automate を入力します。

    録音のセレクタをカスタマイズします。

    メールアドレスを入力し、セレクタの値（[data-automate=email-address]）を確認します。

    カスタム セレクタの選択結果。

    セレクタの優先度

    レコーダーは、カスタム CSS セレクタ属性を指定しているかどうかに応じて、次の順序でセレクタを検索します。

    • 指定する場合:
      1. カスタム CSS 属性を含む CSS セレクタです。
      2. XPath セレクタ。
      3. ARIA セレクタ（見つかった場合）。
      4. 見つかった一意のテキストが最も短いセレクタ。
    • 指定しない場合:
      1. ARIA セレクタ（見つかった場合）。
      2. 次の優先度の CSS セレクタ:
        1. テストに使用される最も一般的な属性は次のとおりです。
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. ID 属性（例: <div id="some_ID">）。
        3. 標準の CSS セレクタ。
      3. XPath セレクタ。
      4. セレクタをピアスします。
      5. 見つかった一意のテキストが最も短いセレクタ。

    通常の CSS、XPath、Pierce セレクタを複数指定することができます。レコーダーは以下をキャプチャします。

    • 各ルートレベル（存在する場合はネストされたシャドウホスト）の通常の CSS セレクタと XPath セレクタ。
    • すべてのシャドウルート内のすべての要素で一意のピアス セレクタを使用する。