Scripted Browser の例

Scripted Browsers を使うと、JavaScript ベースのスクリプト言語で、複雑なフローのモニターも作成できます。ここでは、サンプルな URL もにモニターからリンク先への移動サイトの検索まで、スクリプトを構築する手順を説明します。特定のページの要素の読み込みまで待ったりログインをテストすることもできます。

利用できる全関数に関する内容は、Synthetics scripted browser リファレンスをご覧ください。

その他のスクリプトの例を見たり、共有するには、New Relic のコミュニティフォーラムの Synthetics Scripts セクションをご覧ください。

1つの URL の監視

これは、https://docs.newrelic.com をモニターする例です。

//Visit https://docs.newrelic.com
$browser.get("https://docs.newrelic.com");

このスクリプトの動作は、全スクリプトの基本となります。詳しくは、URL へアクセスをご覧ください

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

ユーザーエージェントをカスタマイズできます。アプリ内のブラウザ固有の処理が正しく動作することを確認したり、内部サイトをフィルタしているセキュリティの仕組みを回避することなどに使えます。

これは、インターネット・エクスプローラー 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');
$browser.get('http://httpbin.org/user-agent');

リンク先へ移動

これは、モニタは https://docs.newrelic.com に移動し、Release Notes完全一致するリンクのテキストを検索します。これらのステップは、シーケンス関数によって順番に実行されます。そして、見つけたリンクをクリックします。

$browser.get("https://docs.newrelic.com").then(function(){
// `Release Notes` というテキストのリンクを探し、見つかればそれをクリックする
    return $browser.findElement($driver.By.linkText("Release Notes")).click();
});

また、部分一致での要素の検索も可能です。以下の例では、Amazon Web Services を含むリンクのテキストで検索すると、Amazon Web Services (AWS) users が見つかります。

$browser.get("https://docs.newrelic.com").then(function(){
// `Amazon Web Services` を含むテキストのリンクを探し、見つかればそれをクリックする
    return $browser.findElement($driver.By.partialLinkText("Amazon Web Services")).click();
});

詳しい説明や要素を検索する他のメソッドについては、要素の検索をご覧ください。全ロケーターのリストは、Locators: ページ要素の検索をご覧ください。

これは、https://docs.newrelic.com にアクセスし、tshirt を検索する例です。

$browser.get("https://docs.newrelic.com").then(function(){
//Id を指定して、検索フィールドを探し、見つかれば、`shirt` を入力する
    return $browser.findElement($driver.By.id("edit-search-block-form--2")).sendKeys("tshirt");
}).then(function(){
//検索ボタンをクリックする
    return $browser.findElement($driver.By.id("edit-submit")).click();
});

モニターは、id で検索ボックスを探ます。id (対象 id は、idedit-search-block-form--2<input> フィールドです)
そして、サブミットボタン(edit-submit) を探し、ボタンをクリックして、検索を行います。

フィールドに文字をセットする方法については、文字の入力をご覧ください。

ページ読み込みを待つ

これは、ページ読み込み完了を待って、https://docs.newrelic.com 内にある tshirt を探し、結果の1つをクリックする例です。

$browser.get("https://docs.newrelic.com").then(function(){
    return $browser.findElement($driver.By.id("edit-search-block-form--2")).sendKeys("tshirt");
}).then(function(){
    return $browser.findElement($driver.By.id("edit-submit")).click();
});
//wait 関数の呼び出し
$browser.wait(function() {
//ページタイトルを取得し、次の関数に渡して、その関数を実行する
  return $browser.getTitle().then(function(title) {
//タイトルが `Search | New Relic Documentation` と一致するかチェックする
    return title === "Search | New Relic Documentation";
    });
//10000 ミリ秒(10秒)以内にタイトルたみつからない場合は、処理を続行する
}, 10000);
//想定通りに対象のリンクが見つかれば、それをクリックする
$browser.findElement($driver.By.linkText("Creating your New Relic account")).click();

モニターは、サイトを検索します。そして、HTML ページタイトルが、Search | New Relic Documentation と一致するまで最大 10 秒待ちます。ページタイトルが一致したら、Creating your New Relic account というテキストのリンクを探し、Creating your New Relic account 要素を探します。

詳しくは、ページタイトルを待つをご覧ください。

ページ要素を待つ

また、idclass を持つページ要素の読み込みを待つこともできます。wait 関数にある isElementPresent ドライバーを使うと、ページ要素を特定するのと同じ方法で、ページ要素を特定できます。これは、name 要素が表示されるまで待つ例です。

//New Relic ブログにアクセスする
$browser.get("http://blog.newrelic.com");
//wait 関数を呼び出す
$browser.waitForAndFindElement($driver.By.name("email"), 22000).then(function(){
//メール購読の入力欄にメールアドレスを入力
    $return = $browser.findElement($driver.By.name("email")).sendKeys("test-synth-script@example.com");
}).then(function(){
//XPath を使って、`Sign Me Up` ボタンを特定
    $return = $browser.findElement($driver.By.xpath("//*[@id='blog-leads-form']/input[4]")).click()
});

モニターは、New Relic のブログにアクセスします。そして、メール購読フォームが表示されるまで、最大22秒待ちます。要素が表示されたら、メールアドレス入力フィールド (name="email") を探し、テスト用のメールアドレスを入力します。そして、XPath を使ってサブミットボタンを探し、フォームの内容を送信します。

詳しくは、特定の要素を待つ条件: 条件に応じて一時停止や待つをご覧ください。

サイトにログインする

これは、Wordpress の管理画面にアクセスし、ユーザー名とパスワードを入力してログインする例です。

$browser.get("http://www.example.com/wp-admin").then(function(){
//ID を指定してユーザー名フィールドを特定し、ユーザー名を入力する
    return $browser.findElement($driver.By.id("user_login")).sendKeys("EXAMPLE USER NAME");
}).then(function(){
//ID を指定してパスワードフィールドを特定し、パスワードを入力する
    return $browser.findElement($driver.By.id("user_pass")).sendKeys("EXAMPLE PASSWORD");
}).then(function(){
//サブミットボタンを押す
    return $browser.findElement($driver.By.id("wp-submit")).click();
});

id からユーザー名とパスワードの入力フィールドを特定します。そして、テストユーザー名とパスワードを入力し、サブミットボタン(wp-submit)を探し、クリックします。

その他の例

ここでは、New Relic Synthetics のブウラザ用のスクリプトについて少数の例だけしか紹介できていません。他の例や WebDriverJS スクリプトについての議論が気になる方は、New Relic コミュニティフォーラムの Synthetics Scripts セクションに是非アクセスしてください。

関連情報

関連する情報は以下のとおりです。