New Relic スクリプトブラウザ監視 - 複雑なユーザージャーニーの自動化監視
スクリプトブラウザ監視は、実際のWebブラウザを使用して複雑なユーザー操作を自動化し、Webアプリケーションの機能を包括的に監視する手法です。ログイン処理、フォーム入力、ページ遷移、データ検索など、実際のユーザーが行う一連の操作を定期的に実行して、システムの動作を確認できます。
スクリプトブラウザ監視の特徴
スクリプトブラウザ監視では、JavaScript（Node.js）とSelenium WebDriverを使用してブラウザ操作を記述します。New Relicダッシュボードの左側メニューから**「Synthetic monitoring」を選択し、「Create monitor」から「Scripted browser」**タイプを選択して設定します。シンプルブラウザ監視とは異なり、複数のページにわたる操作や条件分岐を含む複雑なシナリオを定義できます。
この監視方法では、実際のChrome ブラウザが自動実行されるため、JavaScriptの動作、CSS の描画、Ajax通信なども含めた実際のユーザー体験を正確に再現できます。また、認証が必要なページやセッション管理が必要なWebアプリケーションも監視対象にできます。
スクリプト作成には多少の学習コストが必要ですが、ビジネスクリティカルな機能の監視において非常に強力な効果を発揮します。ECサイトの購入フロー、会員サイトのログイン機能、SaaSアプリケーションの主要機能などを定期的に検証できます。
スクリプト作成の基本構造
New Relicのスクリプトブラウザ監視では、以下の基本構造でスクリプトを作成します。
最初に必要なライブラリをインポートし、ブラウザインスタンスを初期化します。$webDriverオブジェクトを使用してブラウザ操作を制御し、$browserオブジェクトでページ要素にアクセスします。
基本的なページアクセスは$browser.get()メソッドを使用します。その後、$browser.findElement()でページ要素を特定し、click()、sendKeys()、getText()などのメソッドで操作や検証を行います。
エラーハンドリングにはtry-catch文を使用し、予期しない動作が発生した場合の適切な処理を記述します。また、$browser.waitForAndFindElement()を使用して、要素の表示を待機してから操作を実行することで、安定したスクリプト実行を実現できます。
スクリプトの最後では、期待する結果が得られたかをassert文で検証し、監視の成功・失敗を判定します。
実用的なスクリプト例
ログイン機能の監視スクリプト
ログインページにアクセス、認証情報の入力、ログイン実行、成功確認までの一連の流れを自動化する具体的なコード例です。
const assert = require('assert');
$webDriver.get('https://example.com/login').then(function() {
// ページが完全に読み込まれるまで待機
return $browser.waitForAndFindElement($driver.By.id('username'), 5000);
}).then(function(usernameField) {
// ユーザー名の入力
return usernameField.sendKeys('[email protected]');
}).then(function() {
// パスワードフィールドの特定と入力
return $browser.findElement($driver.By.id('password'));
}).then(function(passwordField) {
return passwordField.sendKeys('test_password');
}).then(function() {
// ログインボタンのクリック
return $browser.findElement($driver.By.css('button[type="submit"]'));
}).then(function(loginButton) {
return loginButton.click();
}).then(function() {
// ダッシュボード画面への遷移を確認
return $browser.waitForAndFindElement($driver.By.id('dashboard'), 10000);
}).then(function(dashboardElement) {
// ログイン成功の確認
return dashboardElement.getText();
}).then(function(text) {
assert.ok(text.includes('ようこそ'), 'ログイン成功メッセージが表示されていません');
});フォーム送信の監視スクリプト
お問い合わせフォームや申込みフォームの動作を検証するスクリプトの例です。
$webDriver.get('https://example.com/contact').then(function() {
// 名前フィールドの入力
return $browser.waitForAndFindElement($driver.By.name('name'), 5000);
}).then(function(nameField) {
return nameField.sendKeys('テスト太郎');
}).then(function() {
// メールアドレスフィールドの入力
return $browser.findElement($driver.By.name('email'));
}).then(function(emailField) {
return emailField.sendKeys('[email protected]');
}).then(function() {
// メッセージ本文の入力
return $browser.findElement($driver.By.name('message'));
}).then(function(messageField) {
return messageField.sendKeys('これはテスト送信です。');
}).then(function() {
// 送信ボタンのクリック
return $browser.findElement($driver.By.css('input[type="submit"]'));
}).then(function(submitButton) {
return submitButton.click();
}).then(function() {
// 完了画面の確認
return $browser.waitForAndFindElement($driver.By.css('.success-message'), 15000);
}).then(function(successElement) {
return successElement.getText();
}).then(function(successText) {
assert.ok(successText.includes('送信完了'), '送信完了メッセージが表示されていません');
});検索機能の監視スクリプト
サイト内検索やデータベース検索の動作を確認するスクリプトです。
$webDriver.get('https://example.com').then(function() {
// 検索フィールドを特定
return $browser.waitForAndFindElement($driver.By.css('input[name="search"]'), 5000);
}).then(function(searchField) {
// 検索キーワードの入力
return searchField.sendKeys('新商品');
}).then(function() {
// 検索ボタンのクリック
return $browser.findElement($driver.By.css('button.search-btn'));
}).then(function(searchButton) {
return searchButton.click();
}).then(function() {
// 検索結果の表示を待機
return $browser.waitForAndFindElement($driver.By.css('.search-results'), 10000);
}).then(function() {
// 検索結果件数の確認
return $browser.findElements($driver.By.css('.search-item'));
}).then(function(searchItems) {
assert.ok(searchItems.length > 0, '検索結果が表示されていません');
// 最初の検索結果をクリック
return searchItems[0].click();
}).then(function() {
// 詳細ページの表示を確認
return $browser.waitForAndFindElement($driver.By.css('.product-detail'), 10000);
});複数ページ遷移の監視
サイトの主要なナビゲーション機能を検証する包括的なスクリプトです。
let productUrl;
$webDriver.get('https://example.com').then(function() {
// トップページから商品ページへの遷移
return $browser.waitForAndFindElement($driver.By.css('.product-link'), 5000);
}).then(function(productLink) {
return productLink.getAttribute('href');
}).then(function(href) {
productUrl = href;
return $browser.findElement($driver.By.css('.product-link'));
}).then(function(productLink) {
return productLink.click();
}).then(function() {
// 商品ページの表示確認
return $browser.waitForAndFindElement($driver.By.css('.product-info'), 10000);
}).then(function() {
// カートに追加ボタンのクリック
return $browser.findElement($driver.By.css('.add-to-cart'));
}).then(function(addToCartBtn) {
return addToCartBtn.click();
}).then(function() {
// カートページへの遷移
return $browser.findElement($driver.By.css('.cart-link'));
}).then(function(cartLink) {
return cartLink.click();
}).then(function() {
// カートページの表示確認
return $browser.waitForAndFindElement($driver.By.css('.cart-items'), 10000);
}).then(function(cartItems) {
return cartItems.getText();
}).then(function(cartText) {
assert.ok(cartText.length > 0, 'カート内容が表示されていません');
});ベストプラクティスと注意点
スクリプト作成において重要なベストプラクティスがあります。
要素の特定方法では、ID、クラス名、CSS セレクタ、XPathを適切に使い分けます。IDが最も安定しており、クラス名やCSS セレクタがそれに続きます。XPathは柔軟ですが、ページ構造の変更に弱いため注意が必要です。
待機処理の実装では、$browser.waitForAndFindElement()を積極的に活用します。Ajaxによる動的コンテンツ読み込みやページ遷移の完了を適切に待機することで、スクリプトの安定性が向上します。
エラーハンドリングでは、ネットワーク障害、要素の非表示、タイムアウトなど様々な例外状況に対応します。適切なエラーメッセージを記録することで、障害発生時の原因特定が容易になります。
メンテナンス性の考慮では、共通処理の関数化、設定値の変数化、コメントの充実を心がけます。Webアプリケーションの仕様変更に伴うスクリプト修正を効率的に行えます。
実行時間の最適化では、不要な待機時間の削減、効率的な要素特定、並行処理の活用により、監視間隔を短縮できます。
高度な機能活用
スクリプトブラウザ監視では、さらに高度な機能も利用できます。
スクリーンショット取得機能では、監視実行時の画面状況を自動保存し、障害発生時の状況確認に活用できます。
カスタムメトリクス取得では、ページ読み込み時間、要素の表示時間、Ajax リクエストの応答時間などを独自に測定し、詳細なパフォーマンス分析が可能です。
条件分岐処理では、ページの状態に応じて異なる処理を実行できます。例えば、メンテナンス画面表示時は特別なエラーハンドリングを行うなどの柔軟な対応が可能です。
スクリプトブラウザ監視は設定に時間がかかりますが、複雑なWebアプリケーションの品質保証において非常に重要な役割を果たします。適切に実装することで、ユーザー体験の継続的な品質管理を実現できます。
監視結果を効果的に活用するために、アラート設定とカスタムダッシュボード作成も併せて検討してください。
関連記事: New Relic Synthetics 概要関連記事: API監視の設定方法関連記事: アラートポリシーの設定関連記事: カスタムダッシュボード作成