このページは Cloud Translation API によって翻訳されました。

機能リファレンス

Sofia Emelianova

Jecelyn Yeen

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

[Recorder] パネルの基本的な使い方については、ユーザーフローの記録、再生、測定をご覧ください。

ショートカットの使い方とカスタマイズ

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

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

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

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

の [設定] >ショートカット。
[レコーダー] まで下にスクロールします。
ショートカットをカスタマイズする手順を行います。

ユーザーフローを編集する

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

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

新しい録音を追加する。+ アイコンをクリックして新しい録音を追加します。
すべての録音を表示。プルダウンに、保存済みの録音のリストが表示されます。[[number] recording(s)] を選択すると、保存済みの録音のリストを開いて管理できます。
録音をエクスポートする。スクリプトをさらにカスタマイズしたり、バグレポート用に共有したりするには、ユーザーフローを次のいずれかの形式でエクスポートします。
- JSON ファイルです。
- @puppeteer/replay スクリプト。
- Puppeteer スクリプト。
- Puppeteer（Lighthouse 分析を含む）。
形式の詳細については、ユーザーフローをエクスポートするをご覧ください。
録音をインポートする。JSON 形式のみ。
録音を削除する。選択した録音を削除します。

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

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

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

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

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

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

JSON。人が読める形式の JSON オブジェクトを編集し、JSON ファイルをレコーダーにインポートします。
@puppeteer/replay.Puppeteer Replay ライブラリを使用して、スクリプトを再生します。@puppeteer/replay スクリプトとしてエクスポートする場合、ステップは JSON オブジェクトのままです。このオプションは、CI/CD パイプラインと統合しながら、ステップを JSON として柔軟に編集し、後で変換してレコーダーに再インポートする場合に最適です。
Puppeteer スクリプト。Puppeteer でスクリプトを再生します。ステップは JavaScript に変換されるため、ステップをループするなど、より詳細なカスタマイズを行うことができます。ただし、このスクリプトをレコーダーにインポートし直すことはできません。
Puppeteer（Lighthouse 分析を含む）。このエクスポートオプションは前のオプションと同じですが、Lighthouse 分析を生成するコードが含まれています。

スクリプトを実行して、flow.report.html ファイルの出力を確認します。
```
# npm i puppeteer lighthouse
node your_export.js
```

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

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

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

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

[Recorder] パネルの上部にある [Import] ボタンをクリックします。
ユーザーフローが記録された JSON ファイルを選択します。
[リプレイ] ボタンをクリックして、インポートしたユーザーフローを実行します。

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

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

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

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

Cypress Chrome Recorderこれを使用して、ユーザーフローの JSON ファイルを Cypress テストスクリプトに変換できます。こちらのデモで実際に動作する様子をご覧ください。
Chrome の「ナイトウォッチ」レコーダー。これを使用して、ユーザーフローの JSON ファイルを Nightwatch のテストスクリプトに変換できます。
CodeceptJS Chrome レコーダー。これを使用して、ユーザーフローの JSON ファイルを CodeceptJS のテストスクリプトに変換できます。

JSON のユーザーフローを再生する:

Testcafe で再現する。TestCafe を使用すると、ユーザーフローの JSON ファイルを再生し、これらの記録のテストレポートを生成できます。
Sauce Labs でもう一度プレイするJSON ファイルは Sauce Labs で saucectl を使用して再生できます。

で確認できます。

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

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

[Recorder] パネルでは、リプレイの遅さ、ブレークポイントの設定、実行のステップスルー、さまざまな形式のコードの検査をステップと並行して行うことができるため、デバッグに役立ちます。

リプレイを遅らせる

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

[リプレイ] プルダウンメニューを開きます。
再生速度のオプションを選択します。 <ph type="x-smartling-placeholder">
- 標準（デフォルト）
- 低速
- 非常に遅い
- 非常に遅い

リプレイが遅い。

コードを検査する

さまざまな形式のユーザーフローのコードを検査するには:

[Recorder] パネルで録音を開きます。
手順リストの右上にある [コードを表示] をクリックします。
レコーダーには、ステップとそのコードが横並びで表示されます。
ステップにカーソルを合わせると、レコーダーによってそれぞれのコードが（拡張機能で提供されるコードを含む）あらゆる形式でハイライト表示されます。
形式のプルダウンリストを展開して、ユーザーフローのエクスポートに使用する形式を選択します。

3 つのデフォルト形式（JSON、@puppeteer/replay、Puppeteer script）、または拡張機能によって提供される形式のいずれかを使用できます。
ステップのパラメータと値を編集して、記録のデバッグに進みます。コードビューは編集できませんが、左側のステップを変更すると、コードビューが更新されます。

ブレークポイントを設定して一つずつ実行する

次の手順でブレークポイントを設定して実行します。

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

ステップを編集

記録中のステップの横にあるボタンをクリックすると、記録中でも終了後でも、記録内の任意のステップを編集できます。

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

ステップを追加する

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

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

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

アサーションを追加する

記録中に、たとえば HTML 属性や JavaScript のプロパティをアサートできます。アサーションを追加するには:

たとえば、こちらのデモページから録画を開始します。
[Add assertion] をクリックします。

レコーダーは、構成可能な waitForElement ステップを作成します。
このステップのセレクタを指定します。
ステップを構成します。ただし、waitForElement タイプは変更しないでください。たとえば、次の項目を指定できます。
- HTML 属性。[属性を追加] をクリックし、このページの要素が使用する属性の名前と値を入力します。例: data-test: <value>
- JavaScript プロパティ:[プロパティを追加] をクリックし、プロパティの名前と値を JSON 形式で入力します。例: {".innerText":"<text>"}
- ステップのその他のプロパティ。例: visible: true
残りのユーザーフローを記録し、記録を停止します。
[リプレイ] をクリックします。アサーションが失敗すると、タイムアウト後にレコーダーでエラーが表示されます。

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

ステップをコピー

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

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

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

ステップは、JSON、Puppeteer、@puppeteer/replay、extensions で提供される形式など、さまざまな形式でコピーできます。

ステップを削除

誤って記録されたステップを削除するには、ステップを右クリックするか、その隣にあるその他アイコンをクリックして [Remove step] を選択します。

ステップを削除します。

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

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

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

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

ステップを構成する

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

タイプを指定します。click、doubleClick、hover、（入力）change、keyUp、keyDown、scroll、close、navigate（ページに対して）、waitForElement、waitForExpression、setViewport のいずれかを指定します。

他のプロパティは type 値に依存します。
type の下で必須プロパティを指定します。
対応するボタンをクリックして、オプションのタイプ固有のプロパティを追加して指定します。

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

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

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

ステップのプロパティ

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

target - Chrome DevTools Protocol（CDP）ターゲットの URL。デフォルトの main キーワードは現在のページを参照します。
assertedEvents - 現在、1 つの navigation イベントにのみ存在できる

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

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

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

タイプ	プロパティ	必須	説明
`click` `doubleClick`	`offsetX` `offsetY`		要素のコンテンツボックスの左上に対する相対位置（ピクセル単位）
`click` `doubleClick`	`button`		ポインタボタン: メイン \|補助 \|第 2 \|戻る \|転送
`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 内にあり、表示されている場合は true（`display: none` または `visibility: hidden` がない場合）
`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 ミリ秒）を超えたステップでリプレイが失敗することがあります。

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

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

[リプレイ設定] をクリックして、[タイムアウト] ボックスを編集できるようにします。
[タイムアウト] ボックスで、タイムアウト値をミリ秒単位で設定します。
[リプレイ] をクリックして、調整されたデフォルトのタイムアウトが動作していることを確認します。

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

ステップを展開し、[タイムアウトを追加] をクリックします。
timeout: <value> をクリックし、値をミリ秒単位で設定します。
[リプレイ] をクリックして、タイムアウトが動作するステップを確認します。

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

セレクタについて

新しい録画を開始するときに、以下の設定を行うことができます。

新しい録画を設定します。

[セレクタの属性] テキストボックスにカスタムテスト属性を入力します。レコーダーは、一般的なテスト属性のリストではなく、この属性を使用してセレクタを検出します。
[記録するセレクタの種類] チェックボックスで、自動検出するセレクタのタイプを選択します。
- 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 セレクタ属性を指定しているかどうかに応じて、以下の順序でセレクタを探します。

指定する場合: <ph type="x-smartling-placeholder">
1. カスタム CSS 属性を含む CSS セレクタです。
2. XPath セレクタ。
3. ARIA セレクタ（見つかった場合）。
4. 一意のテキストが最も短いセレクタ。
指定しない場合: <ph type="x-smartling-placeholder">
1. ARIA セレクタ（見つかった場合）。
2. 優先度が次の CSS セレクタ: <ph type="x-smartling-placeholder">
  1. テストによく使用される属性は次のとおりです。 <ph type="x-smartling-placeholder">
    - 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 セレクタ。
すべてのシャドウルート内にあるすべての要素間で一意のセレクタをピアスします。