ブラウザテストのステップ

概要

ステップは、ブラウザテスト用に記録できる一連のアクションで、これは編集または作成できます。 Datadog テストレコーダー拡張機能を使用して直接記録するか、目的のステップを手動で追加することにより、ブラウザテストで実行するステップを定義できます。すべてのステップには、構成可能な高度なオプションのセットが付属しています。

: 各ステップのデフォルトのタイムアウトは約 60 秒です。このデフォルトのタイムアウトは、専用の高度なオプションを使用してオーバーライドできます。

自動記録されたステップ

次のステップは、Datadog ブラウザテストレコーダー拡張機能で自動的に記録されます。

クリック

Datadog ブラウザテストレコーダー拡張機能は、ページのクリックを自動的に記録します。ブラウザテストで実行時に実行するクリックのタイプを指定します。

以下から選択します。

  • プライマリクリック(左クリックに対応)
  • ダブルクリック
  • コンテキストクリック(右クリックに対応)

テキストを入力する

Datadog ブラウザテストレコーダー拡張機能は、ウェブサイトの任意のフィールド (フォームやテキストエリアなど) に入力されたテキストを自動的に記録します。

オプションを選択する

Datadog ブラウザテストレコーダー拡張機能は、select ドロップダウンメニューから選択されているオプションを自動的に記録します。

オプション選択ステップ

ファイルをアップロードする

ファイルのアップロードをステップとして記録できます。アップロードステップを記録するには、次のことができます。

  • ブラウザからデスクトップを開くか、
  • または、ファイルを記録する iframe にドラッグアンドドロップします。
ファイルのアップロードステップを作成する

ファイル数は 10 個、ファイルあたりのサイズは 5MB に制限されています。

手動で追加したステップ

次のステップは、ブラウザテストレコーダーページで構成することにより、ブラウザテストに手動で追加できます。

アサーション

ブラウザテストアサーション

アサーションを使用すると、シミュレートされたユーザージャーニーの任意の時点で、ブラウザテストが想定した状態にあることを検証できます。これが、ブラウザテストをアサーションで終了して、予期した状態になったことを確認する必要がある理由です。

一部のアサーションは、アクティブページで実行されます。アクティブページとは、たとえば、特定のページ要素でクリックアサーションを使用するなど、最後の操作を経験したページを指します。

要素のコンテンツをテストする

要素を選択し、特定の値が含まれているかどうかを確認します。たとえば、div を選択して、「hello」という単語が含まれているかどうかを確認できます。

要素の属性をテストする

ページの要素を選択し、その属性の 1 つが期待されるコンテンツと一致するかどうかを確認します。たとえば、src 属性値が期待される画像のパスと一致することをテストできます。

テキストがアクティブページに存在することをテストする

特定のテキストが現在のページにあることを確認します。

テキストがアクティブページに存在しないことをテストする

特定のテキストが現在のページにないことを確認します。

アクティブページの URL のコンテンツをテストする

操作した最後のページの URL を取得し、特定の値(stringnumberregex)がその中に存在するかどうかをアサートします。

要素がアクティブページに存在することをテストする

要素 (特定の spandivha など) が現在のページにあることを確認します。

メールが受信されたことをテストする

メールが送信されたこと、および特定の値(stringnumberregex)がメールの件名または本文内にあるかどうかをアサートします。このアサーションは、メール変数を利用します。このため、Test that an email was received アサーションを使用できるようにするために、最初にメール変数を作成する必要があります。

カスタム JavaScript で UI をテストする

独自の JavaScript コードを使用して、アクティブページでカスタムアサーションをテストします。

: JavaScript アサーションは、同期コードと非同期コードの両方をサポートしています。

JavaScript アサーション関数には以下のパラメーターが付属しており、return ステートメントが必要です。

  • return (必須) ステートメントは、ブラウザテストステップが成功するためにアサーションが満たす必要がある条件を反映する必要があります。任意のタイプを返すことができますが、値はブール値として自動的にキャストされます。

  • vars (オプション): ブラウザテスト変数を含む文字列。JavaScript スニペットでブラウザテスト変数を参照するには、vars.<YOUR_VARIABLE> を使用します。たとえば、ブラウザテストに USERNAME 変数が含まれている場合は、vars.USERNAME を使用して JavaScript スニペットでそれを呼び出します。

  • element (オプション): ページ上の要素のロケーター。これを設定するには、Select および Update ターゲット要素ボタンを使用します。選択された要素は、Datadog のブラウザテストの複数配置アルゴリズムを自動的に利用します。

JavaScript アサーションはアクティブページのコンテキストで実行されるため、これらのステップはアクティブページで定義されたすべてのオブジェクト (ライブラリ、組み込み、グローバル変数など) にアクセスできます。外部ライブラリをロードするには、promise を使用します。例:

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://code.jquery.com/jquery-3.5.1.slim.min.js";
const promise = new Promise((r) => script.onload = r)
document.head.appendChild(script)

await promise

// スクリプトが読み込まれました

return jQuery().jquery.startsWith('3.5.1')

: ブラウザテストは、外部 JavaScript をページに追加することでロードするため、ウェブサイトが許可する場合のみ実行可能です。

ダウンロードされたファイルのテスト

前のステップでダウンロードしたファイルに対して検証を実行します。ファイルが正しくダウンロードされたことを確認し、ファイル名、サイズ、MD5 値をアサートできます。

: ダウンロードのテスト方法の詳細については、この専用ガイドをご覧ください。

テストがレスポンス本文にアサーションを含まない場合、本文のペイロードはドロップし、Synthetics Worker で設定されたタイムアウト制限内でリクエストに関連するレスポンスタイムを返します。

テストがレスポンス本文に対するアサーションを含み、タイムアウトの制限に達した場合、Assertions on the body/response cannot be run beyond this limit というエラーが表示されます。

ナビゲーション

ブラウザテストナビゲーションステップ

ページを更新する

シナリオの現在のページを更新する。

メールに移動してリンクをクリックする

このステップでは、メール変数を作成した後、一意の Synthetic メール受信ボックスにアクセスできます。興味のあるメールを選択し、ブラウザテストでクリックするリンクをクリックします。このステップでは、対応するページにテストが表示され、その特定のページから残りのジャーニーに進むことができます。

特定のリンクをたどる

特定のページに移動します。

: Enter link URL ボックスで URL の先頭に http または https を付ける必要があります。

特別なアクション

Datadog ブラウザテストレコーダー拡張機能は、監視したいユーザージャーニーに関連するほとんどのステップを記録できます。ただし、ホバーキーを押すスクロールなどの一部のステップは自動的に記録されません。レコーダーの左上隅にある Special Actions メニューを使用して、明示的にステップを追加する必要があります。

ホバー

記録中にホバーする各要素でステップを生成しないようにするために、このブラウザテストステップは、実際のホバーメカニズムではなく、クリックによる専用ステップを使用して追加されます。

Hover ステップを選択したら、新しいステップとして作成する要素をクリックします。

キーの押下

Press Key ステップを使用して、ユーザーがキーストロークを入力するのをシミュレートできます。以下のキーは、Datadog ブラウザテストレコーダー拡張機能を使用して記録できます。

  • Enter
  • 矢印(上、下、右、左)
  • Tab(フォーム外)
  • Escape
  • Backspace

自動的に記録されないキーを押すには、特別なステップ Press Key の値ボックスで、どの値を押す必要があるかを指定します。

ブラウザテストのキーの押下

以下の修飾キーは、入力された値にも適用できます。

  • Alt
  • Control
  • Meta
  • Shift

スクロール

ブラウザテストは、操作する必要のある要素まで自動的にスクロールします。したがって、ほとんどの場合、手動でスクロールステップを追加する必要はありません。スクロールステップは、無限スクロールなど、追加のネットワークリクエストをトリガーする必要がある場合にのみ追加する必要があります。

ブラウザテストのスクロールステップ

ブラウザテストで縦または横にスクロールするピクセル数を指定する必要があります。

デフォルトでは、Scroll ステップはページ全体をスクロールします。特定の要素(たとえば、特定の <div>)にスクロールする必要がある場合は、Target Element オプションを使用して、ブラウザテストでスクロールする要素を選択します。

待機

デフォルトでは、Datadog はページが完全にロードされるのを待ってから、ステップまたは次のステップを実行します。タイムアウトは 60 秒です。ページまたはページ要素のロードに 60 秒以上かかることがわかっている場合は、ステップの詳細オプションでそのタイムアウトをカスタマイズするか、ハードコードされた待機ステップ (最大値 300 秒) を追加できます。

: この追加の時間は、ブラウザテストシナリオの各実行に体系的に追加されます。

変数

ブラウザテスト変数

変数を作成するには、最初に変数に名前を付けてから、以下のいずれかの方法を使用してその値を定義します。ステップ内で変数を使用する方法については、変数の使用を参照してください。

パターン

以下の利用可能な組み込みの 1 つから値を定義して変数を作成します。

{{ numeric(n) }}
n 桁の数字列を生成します。
{{ alphabetic(n) }}
n 文字のアルファベット文字列を生成します。
{{ alphanumeric(n) }}
n 文字の英数字文字列を生成します。
{{ date(n, format) }}
テストが開始された日付 + n 日の値を使用して、許容される形式のいずれかで日付を生成します。
{{ timestamp(n, unit) }}
テストが +/- n 選択単位で開始されたタイムスタンプの値を使用して、許容される単位のいずれかでタイムスタンプを生成します。

要素

spandiv などの要素のテキストを抽出して、その内容から変数を作成できます。

JavaScript

変数を割り当てたい値を返すカスタム JavaScript コードを記述します。

: JavaScript ステップは、同期コードと非同期コードの両方をサポートしています。

JavaScript 関数には以下のパラメーターが付属しており、return ステートメントが必要です。

  • return (必須) ステートメントは JavaScript 変数に関連付けたい値を返す必要があります。任意のタイプを返すことができますが、値は文字列として自動的にキャストされます。

  • vars (オプション): コード内で活用したい既存のブラウザテスト変数を含む文字列。JavaScript スニペットでブラウザテスト変数を参照するには、vars.<YOUR_VARIABLE> を使用します。たとえば、ブラウザテストですでに PRICE 変数を使用している場合は、vars.PRICE を使用して JavaScript スニペットでそれを呼び出します。

  • element (オプション): ページ上の要素のロケーター。これを設定するには、Select および Update ターゲット要素ボタンを使用します。選択された要素は、Datadog のブラウザテストの複数配置アルゴリズムを自動的に利用します。

JavaScript アサーションはアクティブページのコンテキストで実行されるため、これらのステップはアクティブページで定義されたすべてのオブジェクト (ライブラリ、組み込み、グローバル変数など) にアクセスできます。外部ライブラリをロードするには、たとえば次のように promise を使用します。

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://code.jquery.com/jquery-3.5.1.slim.min.js";
const promise = new Promise((r) => script.onload = r)
document.head.appendChild(script)

await promise

// スクリプトが読み込まれました

return jQuery().jquery.startsWith('3.5.1')

: ブラウザテストは、外部 JavaScript をページに追加することでロードするため、ウェブサイトが許可する場合のみ実行可能です。

グローバル変数

Synthetic Monitoring Settings で定義されたグローバル変数を選択します。

グローバル変数 - MFA

Synthetic Monitoring Settings で定義された MFA グローバル変数を選択します。

このタイプのグローバル変数にはタイムベースのワンタイムパスワード (TOTP) のシークレットキーが格納されており、MFA モジュールや MFA で保護されたワークフローのテストが可能になります。

ブラウザテストにおける TOTP ベースの MFA については、こちらの TOTP ガイドをご覧ください。

Email

テストステップで使用できるランダムな Synthetic メールアドレスを生成して、メールが正しく送信されたかどうかをアサートしたり、メールに含まれるリンクに移動 (たとえば、確認用のリンクをクリック) したりします。テスト実行間の競合を回避するために、テスト実行ごとに一意のメールボックスが生成されます。

サブテスト

ブラウザテストサブテスト

既存のワークフローを再利用するために、他のブラウザテスト内でブラウザテストを実行できます(最大 2 レベルのネスト)。サブテストを使用する理由と例については、専用ガイドをご参照ください。

親テストのレベルで作成された変数が、サブテストで表示される変数と同じ名前である場合、サブテストの変数を親テストで上書きできます。デフォルトで、サブテストは親テストの前の手順に続いて実行されますが、Subtest Advanced オプションを使用すると、これを変更できます。

: サブテストを個別に実行しても意味がない場合は、一時停止できます。メインテストの一部として引き続き呼び出されますが、個別に実行されることはありません。

HTTP リクエスト

ブラウザテストの一環として HTTP リクエストを実行できます。

HTTP リクエストの手順

セットアップ

HTTP リクエストを定義するには、

  1. クエリする MethodURL を選択します。使用可能なメソッドには、GETPOSTPATCHPUTHEADDELETEOPTIONS が含まれます。
  2. Advanced Options を指定します(オプション)
    • Follow redirects: トグルボタンで、監視しているエンドポイントが最大 10 個のリダイレクトをフォローするよう設定します。
    • Allow insecure certificates: トグルボタンで、証明書の検証中にエラーが発生しても、HTTP の接続テストを続行するよう設定できます。
    • Headers: 定義されたヘッダーは、デフォルトのブラウザヘッダをオーバーライドします。
    • Body: リクエストの本文と本文のタイプ(text/plainapplication/jsontext/xmltext/htmlapplication/x-www-form-urlencoded または None)。: リクエスト本文の最大サイズは 50 キロバイトに制限されています。
    • Cookies: 定義したクッキーをデフォルトのブラウザクッキーに追加します。複数のクッキーを設定するには、次の書式を使用します <クッキー名1>=<クッキーの値1>; <クッキー名2>=<クッキーの値2>
  3. Test URL をクリックし、リクエストのコンフィギュレーションをテストします。これにより、反応データのプレビューが表示されます。
HTTP リクエストの作成

アサーションの追加

任意で、定義済みの HTTP リクエストに関するアサーションに基づきステップの成功をテストすることができます。

タイプ演算子値の型
本文containsdoes not containisis not
matchesdoes not match
jsonpathxpath
String
Regex
String, Regex
ヘッダーcontainsdoes not containisis not
matchesdoes not match
String
Regex
response timeis less than整数 (ms)
ステータスコードisis not整数

Test URL をクリックすると、基本のアサーションが自動的に入力されます。

  • Response time is less than 2000 ms
  • Header content-type is “戻り値”
  • Status code is “戻り値”
アサーション

応答から変数を抽出する

オプションで、応答ヘッダーまたは本文をパースすることにより、HTTP リクエストの応答から変数を抽出することもできます。変数の値は、HTTP リクエストステップが実行されるたびに更新されます。

変数をパースするには

  1. Variable Name を入力します。変数名に使用できるのは大文字、数字、アンダースコアのみです。また、3 文字以上にする必要があります。

  2. 変数を応答ヘッダーから抽出するか、本文から抽出するか決定します。

    • 応答ヘッダーから値を抽出: HTTP リクエストの応答ヘッダー全体を変数値に使用するか、正規表現 によりパースします。
    • 応答本文から値を抽出: HTTP リクエストの応答本文全体を変数値に使用し、正規表現JSONPath または XPath によりパースします。
応答から抽出された変数

作成されたこの変数は、ブラウザテストの次の手順で使用できます。

変数の使用

手動で追加したステップの場合

{{ 表示のあるすべてのステップ入力フィールドは変数をサポートします。

変数オートコンプリートインジケーター

使用可能なすべての変数を表示するには、入力フィールドに {{ と入力し、目的の変数を選択します。

自動記録されたステップの場合

変数を利用してステップを記録したい場合は、変数ボックスの手のアイコンを使うことができます。

記録時に、これは、Web サイトの入力に挿入される変数の実際の値に変換され (その結果、残りのステップに進むことができます)、{{ <YOUR_VARIABLE_NAME> }} を特徴とする関連する Type text ステップが作成されます。 テストの実行時に、{{ <YOUR_VARIABLE_NAME> }} は体系的に変数に関連付けられた値に置き換えられます。

変数の中には、ランタイム時にのみ計算されるものもあります (たとえば、HTTP リクエストや JavaScript ステップから渡される変数など)。これらの変数のひとつを使用してステップを記録するには、実際の変数値でステップを記録し、テストを保存する前にステップ定義で実際の値を {{ <YOUR_VARIABLE_NAME> }} で置き換えます。

注: ブラウザのテストステップで変数に異なる値が割り当てられる場合 (サブテストなど)、変数は最初に割り当てられた値を体系的に使用します。

その他の参考資料