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

Syntheticsモニタリングのスクリプト化されたブラウザを使用して、ウェブサイトをナビゲートするブラウザのスクリプト化、特定のアクションの実行、特定の要素があることの確認により、カスタムのユーザー体験を模倣、監視できます。使用可能な関数のリストについては、スクリプト化ブラウザの参照をご覧ください。

スクリプト化モニターは、Selenium WebDriverJSで駆動されます。スクリプトを実行するたびに、New Relicはウェブサイト内を移動し、スクリプトの各ステップを実行する、完全に仮想化されたSelenium駆動のGoogle Chromeブラウザを作成します。Syntheticsモニタリングには、スクリプトの作成を単純化する関数、ロケーター、その他の要素を入力補完するIDE形式のスクリプトエディタが搭載されています。

Selenium IDEを使用してワークフローを記録し、New Relicで必要な形式でエクスポートする方法については、この短いYouTubeビデオをご覧ください（3分49秒）。

URLにアクセスする

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

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

連続操作を行う

WebDriverJSは非同期であるため、スクリプトのアクションが順不同に実行される場合があります。順序通りに実行されるようにスクリプトアクションを強制するには、各アクションをthen(function(){})コールにラップします。

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

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

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

要素を特定する

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

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

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

$browser.findElement($driver.By.className("button"));

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

$browser.findElement($driver.By.id("edit-submit"));

要素のidで要素を検索する例については、ページ要素を待機するを参照してください。

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

$browser.findElement($driver.By.linkText("Configuration Panel"));

$browser.findElement($driver.By.partialLinkText("Configuration Pa"));

リンクテキストを使用してリンクを特定する事例については、リンクへのアクセスをご覧ください。

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

$browser.findElement($driver.By.name("search-query-field"));

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

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

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

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

ヒント

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

ChromeでターゲットのWebサイトにアクセスします。
ターゲット要素を右クリックして、Inspect elementを選択します。
Developer Toolsのパネルが開き、ターゲット要素がハイライト表示されます。
ターゲット要素を右クリックして、Copy XPathを選択します。

要素を操作する

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

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

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

$browser.findElement($driver.By.linkText("Configuration Panel")).click();

$browser.findElement($driver.By.className("config-panel-02")).click();

特定した要素をクリックする事例については、リンクに移動するをご覧ください。

ヒント

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

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

$browser.findElement($driver.By.name("search-query-field")).sendKeys("EXAMPLE USER NAME");

$browser.findElement($driver.By.id("search-q-box")).sendKeys("EXAMPLE USER NAME");

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

$browser.findElement($driver.By.name("search-query-field")).clear();

$browser.findElement($driver.By.id("search-q-box")).clear();

フィールドにテキストを入力する事例については、ウェブサイトを検索するをご覧ください。

ヒント

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

待機処理とタイムアウト

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

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

重要

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

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

//Call the wait function
$browser.wait(function() {
//Tell the monitor to get the page title, then run a function on that title.
  return $browser.getTitle().then(function(title) {
//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関数を併用します。以下で使用されている$driver.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`.
$browser.waitForAndFindElement($driver.By.linkText("Your Link Text Here"), 7500);

特定のページ要素を待つ事例については、ページ要素を待つをご覧ください。

重要

waitForAndFindElement() 別の要素の背後にある、またはサイズが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`
$browser.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
$browser.addHostnameToWhitelist(hostnameArr: ['google-analytics.com']);

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

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

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

//Simulate Internet Explorer 10.6
$browser.addHeader('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
$browser.get('http://httpbin.org/user-agent');

重要

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

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

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

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

URLにアクセスする

連続操作を行う

要素を特定する

CSSクラスで特定

HTML IDで特定

リンクテキストで検索

名前で特定

XPathで特定

ヒント

要素を操作する

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

ヒント

テキストを入力する

ヒント

待機処理とタイムアウト

重要

ページタイトルを待つ

特定の要素を待つ

重要

スクリプトの結果をログに記録する

重要

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

変数をログ関数に渡す

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

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

重要

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