ブラウザテストのステップ
セキュリティモニタリングが使用可能です セキュリティモニタリングが使用可能です

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

概要

ステップは、ブラウザテスト用に記録できる一連のアクションで、これは編集または作成できます。 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 ステートメントが必要です。

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

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

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

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')

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

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

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

ナビゲーション

ページを更新する

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

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

このステップでは、メール変数を作成した後、一意の 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 オプションを使用して、ブラウザテストでスクロールする要素を選択します。

変数

変数の作成

変数を作成するには、最初に変数に名前を付け、次に値を定義します。

要素

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

JavaScript

独自の JavaScript コードを使用し、てカスタム変数を生成します。JavaScript ステップは、同期コードと非同期コードの両方をサポートしています。

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

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

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

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

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')

グローバル変数

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

メール

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

パターン

パターン説明
{{ numeric(n) }}n 桁の数字列を生成します。
{{ alphabetic(n) }}n 文字のアルファベット文字列を生成します。
{{ alphanumeric(n) }}n 文字の英数字文字列を生成します。
{{ date(n, format) }}テストが開始された日付 + n 日の値を使用して、許容される形式のいずれかで日付を生成します。

変数の使用

作成すると、変数ボックスの手のアイコンを使用して、テスト対象のウェブサイトに変数を挿入できます。

これにより、テスト実行時に常に {{ <変数> }} の値に置き換えられるコンテンツを含むテキスト入力ステップが生成されます。

場合によっては、変数値は実行時にのみ計算されます (HTTP リクエストから変数を作成するとき、JavaScript ステップから変数を抽出するときなど)。記録時に Web サイトで直接 {{ <変数> }} を使用して変数を挿入できます。ブラウザテストでは、テストの実行時にそのフィールドに前の手順で生成された変数値が自動的に入力されます。

: {{ 表示のあるすべてのフィールドは、変数のオートコンプリートをサポートしています。

待機

デフォルトでは、Datadog はステップまたは次のステップを実行する前に、ページが完全にロードされるのを待ちます。タイムアウトは 60 秒です。ただし、場合によっては、カスタムの待機時間を設定することもできます。たとえば、ページまたはページ要素のロードに 60 秒以上かかることがわかっている場合は、待機ステップを利用して、デフォルトのタイムアウトを延長できます。この機能を使用する場合、待機ステップの値は 300 秒を超えてはなりません。

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

サブテスト

既存のワークフローを再利用するために、他のブラウザテスト内でブラウザテストを実行できます。これは、テストスイート間のメンテナンスポイントの数を減らすのに特に役立ちます。ブラウザテストは、最大 2 レベルのネストをサポートします。高度なオプションでは、サブテストを再生するタブを選択することもできます。

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

HTTP リクエスト

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

セットアップ

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

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

アサーションの追加

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

タイプ値の型演算子
ステータスコード整数isis not
応答時間整数 (ms)lessThan
ヘッダー文字列
Regex
contains, does not contain, is, is not
matches, does not match
本文文字列
Regex
contains, does not contain, is, is not
matches, does not match

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

  • Response time lessThan 2000 ms
  • Header content-type is “戻り値”
  • Status code is “戻り値”

応答から変数を抽出する

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

変数をパースするには

  1. Variable Name を入力します。変数名に使用できるのは大文字、数字、アンダースコアのみです。また、3 文字以上にする必要があります。
  2. 変数を応答ヘッダーから抽出するか、本文から抽出するか決定します。

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

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

その他の参考資料