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"));
return $browser.findElement($driver.By.partialLinkText("Configuration Pa"));
要素を特定する モニター対象のURLを指定した後、通常はページ上の特定の要素を検索します。要素を検索してページ上にその要素が存在することを確認し、ページ要素を操作 できます。
要素は、class
、id
、link text
、name
またはXPathでも検索できます。これらの属性を検索するには、ブラウザの開発者ツールを使用、またはウェブサイトのソースコードを確認してください。ロケーター関数のリストについては、ロケーター: ページ要素の検索 をご覧ください。
CSSクラスで特定 要素をそのHTMLclass
で検索します(例:class="button"
)。クラスは通常、CSSのスタイルで指定されています。要素をクラスで検索する際、モニターは該当クラスを持つページ内の最初の要素を選択します。
$browser.findElement($driver.By.className("button"));
HTML IDで特定 要素をその正確な 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で特定 より複雑なページ構造の場合は、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はスクリプトを手動で停止します。
ページタイトルを待つ ページタイトルが所定の値になるまで待つよう、モニターに指示します。これによって、ブラウザが少なくともターゲットページからデータを受信していることを保証します。ページタイトルを待つには、所定のタイトルとタイムアウト値 (ミリ秒) を指定します。
$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.
ページタイトルを待つ事例については、ページの読み込みを待つ をご覧ください。
特定の要素を待つ ページ要素が読み込まれるまで待つよう、モニターに指示します。これは、スクリプトの対象となる要素の読み込みに時間がかかる場合や、ページ要素をクリックする前にその存在を確認したりする場合に便利です。
以下のように、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
変数をログ関数に渡す 静的テキストをログに記録する ほか、変数を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
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モジュールのインポート をご覧ください。