19 ブラウザアイテム

概要

ブラウザアイテムでは、ブラウザを使用して複雑なWebサイトやWebアプリケーションを監視できます。

ブラウザアイテムは、ユーザー定義のJavaScriptコードを実行し、HTTP/HTTPS経由でデータを取得してデータを収集します。 このアイテムでは、クリック、テキスト入力、Webページ間の移動、その他のWebサイトまたはWebアプリケーションに対するユーザー操作など、ブラウザ関連のアクションをシミュレートできます。

スクリプトに加えて、オプションのパラメータ一覧（名前と値のペア）およびタイムアウトを指定できます。

ブラウザアイテムのチェックは、Zabbixサーバーまたはプロキシのbrowser pollerによって実行および処理されます。 必要に応じて、Zabbix server/proxy 設定ファイルの StartBrowserPollers パラメータで、事前にforkされたbrowser pollerインスタンス数を調整できます。

複雑なWebサイトおよびWebアプリケーションの監視には、Website by Browser テンプレートを標準搭載テンプレートとして利用できます。

設定

アイテム設定フォームのタイプフィールドで、Browserを選択し、必須フィールドに入力します。

必須の入力フィールドには、赤いアスタリスクが付いています。

Browserアイテムで固有の情報が必要なフィールドは次のとおりです。

例

Website by Browser テンプレートを使用してWebサイトを監視するようにZabbixを設定する方法の例については、BrowserアイテムでWebサイトを監視するを参照してください。

デフォルトスクリプト

次のスクリプトは以下を実行します。

1. ブラウザーセッションを初期化します。
2. 指定したURLに移動します。
3. パフォーマンスエントリとセッション統計を収集し、それらをJSON文字列として返します。

Script フィールドに、次を入力します。

var browser = new Browser(Browser.chromeOptions());

try {
    browser.navigate("http://example.com");
    browser.collectPerfEntries();
}
finally {
    return JSON.stringify(browser.getResult());
}

カスタムcapabilitiesでブラウザを初期化する

次のスクリプトは以下を行います。

1. スクリプト内で指定された順序で最初に一致した利用可能なブラウザに基づいて、ブラウザセッションを初期化します。
2. ページ読み込み戦略や、Chrome、Firefox、Microsoft Edgeブラウザのヘッドレスモードなど、各ブラウザ固有のオプションを含むブラウザのcapabilitiesを定義します。

Scriptフィールドに、次を入力します。

var browser = new Browser({
    "capabilities":{
        "firstMatch":[
            {
                "browserName":"chrome",
                "pageLoadStrategy":"normal",
                "goog:chromeOptions":{
                    "args":[
                        "--headless=new"
                    ]
                }
            },
            {
                "browserName":"firefox",
                "pageLoadStrategy":"normal",
                "moz:firefoxOptions":{
                    "args":[
                        "--headless"
                    ]
                }
            },
            {
                "browserName":"MicrosoftEdge",
                "pageLoadStrategy":"normal",
                "ms:edgeOptions":{
                    "args":[
                        "--headless=new"
                    ]
                }
            },
            {
                "browserName":"safari",
                "pageLoadStrategy":"normal"
            }
        ]
    }
});

GUIを有効にしてブラウザを初期化する

デフォルトでは、ブラウザセッション（Safariを除く）はヘッドレスモードで初期化されます。これは、ブラウザのグラフィカルユーザーインターフェース（GUI）が表示されないことを意味します。

次のスクリプトは、GUIを有効にしてブラウザセッションを初期化します。

WebDriverがブラウザのバイナリを見つけられない場合は、パスを手動で指定できることに注意してください。

var opts = Browser.chromeOptions();
opts.capabilities.alwaysMatch['goog:chromeOptions'].args = [];

// FirefoxセッションをGUI付きで初期化するには、次の行のコメントを解除します:
// var opts = Browser.firefoxOptions();
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].binary = 'usr/bin/firefox';
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].args = [];

// Microsoft EdgeセッションをGUI付きで初期化するには、次の行のコメントを解除します:
// var opts = Browser.edgeOptions();
// opts.capabilities.alwaysMatch['ms:edgeOptions'].binary = 'usr/bin/microsoft-edge';
// opts.capabilities.alwaysMatch['ms:edgeOptions'].args = [];

var browser = new Browser(opts);

スクリーンショットの取得

次のスクリプトは以下を実行します。

1. ブラウザーセッションを初期化します。
2. スクリーンショットのサイズを決定するために、ブラウザーのビューポートサイズを設定します（パラメータで指定。以下を参照）。
3. URL に移動します（パラメータで指定。以下を参照）。
4. セッション統計を収集し、スクリーンショットを取得して、収集した統計に追加します。
5. エラーメッセージとスクリーンショットを取得して、エラーを処理します。
6. 収集した結果を JSON 文字列として返します。

このスクリプトでは、アイテム設定フォームのパラメータも使用します。

• webURL - http://example.com
• width - 1920
• height - 1080

Script フィールドに、次を入力します。

var browser, result;

var browser = new Browser(Browser.chromeOptions());

try {
    var params = JSON.parse(value); // Parse the JSON string containing parameters passed from Zabbix.

    browser.setScreenSize(Number(params.width), Number(params.height))

    browser.navigate(params.webURL);

    result = browser.getResult();
    result.screenshot = browser.getScreenshot();
}
catch (err) {
    if (!(err instanceof BrowserError)) {
        browser.setError(err.message);
    }
    result = browser.getResult();
    result.error.screenshot = browser.getScreenshot();
}
finally {
    return JSON.stringify(result);
}

Zabbixログインの確認

次のスクリプトは以下を実行します。

1. ブラウザセッションを初期化します。
2. ページ（パラメータとして指定。詳細は以下を参照）に移動します。
3. ユーザー名とパスワード（パラメータとして指定。詳細は以下を参照）を入力します。
4. ログインボタンを見つけてクリックします。
5. ログアウトボタンを見つけてクリックします。
6. ログイン前後およびログアウト後のパフォーマンスデータを収集します。
7. エラーメッセージとスクリーンショットを取得してエラーを処理します。
8. 収集した結果をJSON文字列として返します。

このスクリプトは、アイテム設定フォームのパラメータも使用します。

• webURL - http://{HOST.CONN}/index.php
• username - {$USERNAME}
• password - {$PASSWORD}

Script フィールドに次を入力します。

var browser, result;

browser = new Browser(Browser.chromeOptions());

try {
    var params = JSON.parse(value); // Parse the JSON string containing parameters passed from Zabbix.

    browser.navigate(params.webURL);
    browser.collectPerfEntries("open page");

    var el = browser.findElement("xpath", "//input[@id='name']");
    if (el === null) {
        throw Error("cannot find name input field");
    }
    el.sendKeys(params.username);

    el = browser.findElement("xpath", "//input[@id='password']");
    if (el === null) {
        throw Error("cannot find password input field");
    }
    el.sendKeys(params.password);

    el = browser.findElement("xpath", "//button[@id='enter']");
    if (el === null) {
        throw Error("cannot find login button");
    }
    el.click();

    browser.collectPerfEntries("login");

    el = browser.findElement("link text", "Sign out");
    if (el === null) {
        throw Error("cannot find logout button");
    }
    el.click();

    browser.collectPerfEntries("logout");

    result = browser.getResult();
}
catch (err) {
    if (!(err instanceof BrowserError)) {
        browser.setError(err.message);
    }
    result = browser.getResult();
    result.error.screenshot = browser.getScreenshot();
}
finally {
    return JSON.stringify(result);
}

リンクの検索

次のスクリプトは以下を実行します。

1. ブラウザセッションを初期化します。
2. 配列から重複要素を削除する関数を定義します（手順5を参照）。
3. ページに移動します（パラメータで指定。以下を参照）。
4. ページ上のリンクを検索します。
5. リンクが一意になるように重複したリンクを削除します。
6. "http" で始まるリンクのみを抽出します。
7. 抽出したリンクを特定の構造に整形します。
8. エラーメッセージとスクリーンショットを取得してエラーを処理します。
9. 収集した結果をJSON文字列として返します。

このスクリプトは、アイテム設定フォームのパラメータも使用します。

• scheme - {$WEBSITE.SCHEME}
• domain - {$WEBSITE.DOMAIN}
• path - {$WEBSITE.PATH}

Script フィールドに次を入力します。

var browser, result;

browser = new Browser(Browser.chromeOptions());

try {
    var params = JSON.parse(value);  // Zabbix から渡されたパラメータを含む JSON 文字列を解析します。

    function uniq(a) {
        return a.sort().filter(function (item, pos, ary) {
            return !pos || item != ary[pos - 1];
        });
    }

    browser.navigate(params.scheme + '://' + params.domain + params.path);

    var el = browser.findElements("link text", "");
    var links = [];
    for (var n = 0; n < el.length; n++) {
        links.push(el[n].getAttribute('href'));
    }

    links = uniq(links);

    result = [];
    for (i = 0; i < links.length; i++) {
        if (links[i].match(/^http.*/)) {
            var row = {};
            row["{#URL}"] = links[i];
            result.push(row);
        }
    }
}
catch (err) {
    if (!(err instanceof BrowserError)) {
        browser.setError(err.message);
    }
    result = browser.getResult();
    result.error.screenshot = browser.getScreenshot();
}
finally {
    return JSON.stringify(result);
}