スクリプト化ブラウザの書き方

New Relic Syntheticsのスクリプト化されたブラウザを使用して、ウェブサイト内の移動や特定のアクションの実行、特定の要素があることの確認を行うブラウザのスクリプト化により、カスタムのユーザー体験を模倣、監視できます。

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

使用可能なすべての関数のリストについては、スクリプト化ブラウザのリファレンスをご覧ください。

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を指定した後、通常はページ要素を個別に特定することになるでしょう。要素を検索してページ上にその要素が存在することを確認し、ページ要素を操作することができます。

要素は、classidlink textname、またはXpathでも検索することができます。これらの属性を見つけるには、ブラウザの開発者ツールを使用するか、対象Webサイトのソースコードを確認してください。ロケーター関数のリストについては、「ロケーター: ページ要素の検索」をご覧ください。

CSSクラスで特定

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

$browser.findElement($driver.By.className("button"));
HTML IDで特定

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

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

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

要素を表示中のリンクテキストで特定します。たとえば、<a href="http://example.com>your link text here</a>Your Link Text Hereです。正確なリンクテキスト($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"));

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

XPathで特定

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

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

特定要素のXpathを素早く検索するには、Google Chrome Developer Toolsを使用してください。

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

スクリプト内でこのXPathを使用してください。Webサイトが頻繁に変更される場合、ページ構造が変わったときにこの方法ではモニターできなくなる可能性があります。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()mouseDownmouseUp、および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など)を追加できます。

待機処理とタイムアウト

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

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

ページタイトルを待つ

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

//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);

ページタイトルを待つ事例については、「ページの読み込みを待つ」をご覧ください。

特定要素を待つ

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

以下のように、待機関数と特定関数を併用します。以下で使用されている$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);

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

スクリプトが最大で3分間実行された後、Syntheticsはスクリプトを手動で停止します。

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

モニター結果を手動でスクリプトログに記録することもできます。スクリプトのトラブルシューティングにはログを利用します。スクリプトのどのステップが失敗しているかを知るには、スクリプトに各キーステップとともにログ機能を組み込みます。

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

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

//Send `That's one small step for man.` to the console log.
console.log('That\'s one small step for man.');

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

// ----------------------------------- Console log
That's one small step for man.
変数をログ関数に渡す

静的テキストをロギングすることに加えて、変数をconsole.log()に渡すこともできます:

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

console.log('That's one small step for man.');
//Load the website specified in `WEBSITE_URL`
$browser.get(WEBSITE_URL);
//Log our success to the console
console.log('One giant leap for', WEBSITE_URL);

この結果を探す

// ----------------------------------- Console log
That's one small step for man.
One giant leap 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モジュールのインポート」をご覧ください。

その他のヘルプ

追加のリソースは以下の通りです。

推奨する詳細情報: