スクリプト化ブラウザモニターの概要

スクリプト化されたブラウザはカスタムのユーザー体験をエミュレートするもので、ウェブサイト内のナビゲーションや特定のアクションの実行、特定の要素があることの確認を行うようにブラウザをスクリプト化できます。スクリプト化モニターはSeleniumウェブドライバで駆動されます。スクリプトを実行するたびに、New Relicはウェブサイト内を移動し、スクリプトの各ステップを実行する、完全に仮想化されたSelenium駆動のChromeブラウザまたはFirefoxブラウザを作成します。外形監視には、スクリプトの作成を単純化する関数、ロケーター、その他の要素を入力補完するIDE形式のスクリプトエディタが搭載されています。利用可能な全関数の一覧については、スクリプト化ブラウザのリファレンスを参照してください。

スクリプト化ブラウザモニターを作成する方法

one.newrelic.com > All capabilities > Synthetic monitoringに移動します。
Create monitorをクリックします。
さまざまな場所でのサイトの可用性と機能をテストするには、User flow / functionalityタイルを選択します
モニターを設定します。必要なフィールドに入力してください。モニターの名前を追加します。テストするブラウザとエミュレートされたデバイスを選択します。
Select locationsをクリックして、モニターをテストする場所を選択します
Write scriptをクリックして、モニターに実行させるアクションを記述するスクリプトを追加します。モニターは、作業に使用できるサンプルスクリプトをエディターに事前に入力します。または、これを削除して最初から開始することもできます
スクリプトをテストする場合は、 Validateをクリックします。スクリプトによっては数分かかる場合があります
Save monitorをクリックします。

URLにアクセスする

すべてのスクリプトは、モニターがナビゲートする必要があるURLを指定することで開始します。URLを指定するには、$webDriver.get("url")を呼び出します。

await $webDriver.get("https://mywebsite.com");

連続操作を行う

WebDriverJSは非同期であるため、スクリプトのアクションが順不同に実行される場合があります。順序通りに実行されるようにスクリプトアクションを強制するには、awaitキーワードを使用します。

await $webDriver.get("https://my-website.com");
await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

各アクションをthen(function(){})呼び出しでラップすることもできます。ただし、その場合、ラップされた関数は、スクリプトが進む前に各非同期関数が完了するように、各非同期関数をreturn必要があります。

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
});

複数のアクションを順に接続するには、各アクションをthen(function(){})コールにラップし、コールをチェーンします。

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
}).then(function(){
    return $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));
});

要素を特定する

モニター対象のURLを指定した後、通常はページ上の特定の要素を検索します。要素を検索してページ上にその要素が存在することを確認し、ページ要素を操作できます。

要素は、class、id、link text、nameまたはXPathでも検索できます。これらの属性を検索するには、ブラウザの開発者ツールを使用、またはウェブサイトのソースコードを確認してください。ロケーター関数のリストについては、ロケーター: ページ要素の検索をご覧ください。

要素をHTMLclassで検索します（例： class="button"）。クラスは通常、CSSのスタイルで指定されています。要素をクラスで検索する際、モニターは該当クラスを持つページ内の最初の要素を選択します。

await $webDriver.findElement($selenium.By.className("button"));

要素をその正確なHTMLidで検索します（例： id="edit-submit"）。これは直接的なページ要素の特定方法ですが、変わる可能性の低いidの指定は慎重に行ってください。

await $webDriver.findElement($selenium.By.id("edit-submit"));

要素のidで要素を特定する例については、特定の要素を待機するのセクションを参照してください。

要素を表示中のリンクテキストで検索します（例：<a href="http://example.com>your link text here</a> ）。正確なリンクテキスト（$selenium.By.linkText）または部分一致（$selenium.By.partialLinkText）で検索できます。

await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

await $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));

要素をその正確なHTMLnameで検索します（例： name="search-query-field"）。これは、検索ボックスなどの入力フィールドで一般的に使用されています。

await $webDriver.findElement($selenium.By.name("search-query-field"));

nameで要素を検索する例については、ウェブサイトにログインするを参照してください。

より複雑なページ構造の場合は、XPathを使用してターゲット要素を特定できます。

await $webDriver.findElement($selenium.By.xpath("//input[@placeholder = 'search-query-field']"));

ウェブサイトの構造が変更されると、XPathセレクタが破損する場合があります。適切なXPathセレクターの作成のヒントについては、XPathセレクターの最適化を参照してください。

ヒント

特定要素のXpathを素早く検索するには、ブラウザの開発者ツールを使用してください。たとえば、Chromeから：

Chromeからターゲットのウェブサイトに移動します。
ターゲット要素を右クリックし、 Inspect elementを選択します。
Developer Toolsのパネルが開き、ターゲット要素がハイライト表示されます。
ターゲット要素を右クリックし、 Copy XPathを選択します。

要素を操作する

スクリプト化モニターはSeleniumを使用して実際にChromeブラウザまたはFirefoxブラウザを操作するため、スクリプト化モニターはユーザーと同じようにページ要素を操作できます。たとえば、リンクのクリック、検索ボックスへのテキスト入力などの操作をモニターが実行できます。使用可能なアクションのリストについては、「ActionSequence：複数のアクションをリンクする」を参照してください。

まず、ページ要素を特定してからインタラクション関数をコールしてください。

リンクまたはその他のページ要素をクリックするには、その要素を検索し、click()関数を呼び出します。

await $webDriver.findElement($selenium.By.linkText("Configuration Panel")).click();

await $webDriver.findElement($selenium.By.className("config-panel-02")).click();

特定した要素をクリックする事例については、リンクテキストによる検索を参照してください。

ヒント

doubleClick()、dragAndDrop()、mouseDown、mouseUpおよびmouseMove関数を使用して、他の方法でマウスを制御できます。

フィールドにテキストを入力するには、フィールドを検索し、sendKeys()関数を呼び出します。

await $webDriver.findElement($selenium.By.name("search-query-field")).sendKeys("EXAMPLE USER NAME");

await $webDriver.findElement($selenium.By.id("search-q-box")).sendKeys("EXAMPLE USER NAME");

一部のフィールドには、デフォルトのテキストが含まれている場合があります。テキストを送信する前に、これらのフィールドをクリアしてください。

await $webDriver.findElement($selenium.By.name("search-query-field")).clear();

await $webDriver.findElement($selenium.By.id("search-q-box")).clear();

フィールドにテキストを入力する事例については、リンクテキストによる検索を参照してください。

ヒント

ALTおよびSHIFT関数を使用して、修飾キー（keyDown()およびkeyUp()など）を追加できます。

待機処理とタイムアウト

画像または複雑な動的コンテンツなど、大きなページ要素の読み込みには時間がかかる場合があります。まだ読み込まれていない要素をモニターが処理したり、特定したりしようとするとスクリプトが失敗する可能性があります。

これらの問題を回避するには、指定のページ要素が読み込まれるまでスクリプトを停止する待ち条件を設定するか、または手動でアクションを順番に実行します。条件のリストについては、条件: 一時停止と条件待ちをご覧ください。

重要

最大で3分間のランタイム後、New Relicはスクリプトを手動で停止します。

ページタイトルが所定の値になるまで待つよう、モニターに指示します。これによって、ブラウザが少なくともターゲットページからデータを受信していることを保証します。ページタイトルを待つには、所定のタイトルとタイムアウト値（ミリ秒）を指定します。

//Call the wait function
await $webDriver.wait(async function() {
  //Tell the monitor to get the page title.
  var title = await $webDriver.getTitle();
  //Specify the expected page title.
  return title === "Your Page Title Here";
//If the condition is not satisfied within a timeout of 1000 milliseconds (1 second), proceed anyway.
}, 1000);

ページタイトルを待つ事例については、ページタイトルを待つを参照してください。

ページ要素が読み込まれるまで待つよう、モニターに指示します。これは、スクリプトの対象となる要素の読み込みに時間がかかる場合や、ページ要素をクリックする前にその存在を確認したりする場合に便利です。

以下のように、Wait関数とLocate関数を併用します。以下で使用されている$selenium.By.linkText関数の代わりに、任意の関数を使用します。

// Tell the monitor to wait up to 7,500 milliseconds (7.5 seconds) for a link whose text is `Your Link Text Here`.
var linkText = "Your Link Text Here"

var element = await $webDriver.wait(
  $selenium.until.elementLocated(
    $selenium.By.linkText(linkText),
  ),
  7500,
  'Timed-out waiting for element to be located using link text: "' +linkText+ '"',
);
// Wait for the element to be visible
await $webDriver.wait(
  $selenium.until.elementIsVisible(element),
  7500,
  "Timed-out waiting for element to be visible using ${element}",
);

重要

elementIsVisible() 別の要素の背後にある、またはサイズが0の場合、は要素の検索に失敗します。不透明度が0の要素は引き続き検索されます。

結果を手動でスクリプトログに記録する

モニター結果を手動でスクリプトログに記録することもできます。ログ記録を使用してスクリプトのトラブルシューティングを行う：スクリプトのどのステップが失敗しているかを知るには、スクリプトに各キーステップとともにログ関数を含めます。

重要

最大ログ長は50,000バイトです。50,000バイトを超えるスクリプトログは切り捨てられます。

一行の静的テキストを記録するには、console.log()を呼び出します。

//Send `Hello world.` to the console log.
console.log('Hello world.');

この結果は、次のように出力されます。

// ----------------------------------- Console log
Hello world.

静的テキストをログに記録するほか、変数をconsole.log()に渡すこともできます。

//Declare the variable `WEBSITE_URL`
var assert = require('assert'),
  WEBSITE_URL = 'https://my-website.com/';

console.log('Hello world.');
//Load the website specified in `WEBSITE_URL`
await $webDriver.get(WEBSITE_URL);
//Log our success to the console
console.log('Success for', WEBSITE_URL);

この結果を探す：

// ----------------------------------- Console log
Hello world.
Success for https://my-website.com/

解析サービスのブロックを解除する

Syntheticsはデフォルトで一般的な解析サービスのスクリプトをブロックします。指定サービスのスクリプトの実行を許可できます。これによって該当サービスのスクリプトを実行し、実際のユーザーがアクセスした場合と同様のデータを収集することができます。

//Allow Google Analytics scripts to run
await $urlFilter.addToAllowList(['google-analytics.com']);

//Visit https://my-website.com
await $webDriver.get('https://my-website.com');

ユーザーエージェントのカスタマイズ

スクリプト化ブラウザのユーザーエージェントをカスタマイズして、アプリケーションのブラウザ特定の修正が適切に機能していることを確認するか、内部サイトを絞り込むためにセキュリティメカニズムをバイパスします。

//Simulate Internet Explorer 10.6
$headers.add('User-Agent', 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0');

//Visit http://httpbin.org/user-agent
await $webDriver.get('http://httpbin.org/user-agent');

重要

これは、サーバーへのリクエストのユーザーエージェントHTTPヘッダーになりすましているに過ぎません。navigator.userAgentの値を変更しません。

追加モジュールをインポートする

多くの一般的なNode.jsのモジュールをインポートして、テストスイートを強化、テストデータを自動投入、複雑な関数を簡略化できます。詳細については、Node.jsモジュールのインポートをご覧ください。

重要

For Non-Legacy Runtimes

スクリプト環境には書き込み保護されたディレクトリが含まれています。スクリプトでファイルを保存する必要がある場合は、ファイル名の先頭に次のいずれかのパスを追加します。

runtime/input-output/input/
runtime/input-output/output/

スクリプト化ブラウザモニターの概要

スクリプト化ブラウザモニターを作成する方法

URLにアクセスする

連続操作を行う

要素を特定する

CSSクラスで特定

HTML IDで特定

リンクテキストで検索

名前で特定

XPathで特定

ヒント

要素を操作する

ページ要素をクリックする

ヒント

テキストを入力する

ヒント

待機処理とタイムアウト

重要

ページタイトルを待つ

特定の要素を待つ

重要

結果を手動でスクリプトログに記録する

重要

静的テキストをログに記録する

変数をログ関数に渡す

解析サービスのブロックを解除する

ユーザーエージェントのカスタマイズ

重要

追加モジュールをインポートする

重要

スクリプト化ブラウザモニターの概要

スクリプト化ブラウザモニターを作成する方法 .css-21sua1{background:none;border:none;width:0;padding:0;}

URLにアクセスする

連続操作を行う

要素を特定する

HTML IDで特定

リンクテキストで検索

名前で特定

XPathで特定

要素を操作する

ページ要素をクリックする

テキストを入力する

待機処理とタイムアウト

重要

ページタイトルを待つ

特定の要素を待つ

結果を手動でスクリプトログに記録する

重要

静的テキストをログに記録する

変数をログ関数に渡す

解析サービスのブロックを解除する

ユーザーエージェントのカスタマイズ

重要

追加モジュールをインポートする

重要

スクリプト化ブラウザモニターを作成する方法