19 Элементы данных браузера

Обзор

Элементы данных браузера позволяют выполнять мониторинг сложных веб-сайтов и веб-приложений с использованием браузера.

Элементы данных браузера собирают данные, выполняя определяемый пользователем код JavaScript и получая данные по HTTP/HTTPS. Этот элемент данных может имитировать такие действия, связанные с браузером, как щелчки, ввод текста, переход по веб-страницам и другие взаимодействия пользователя с веб-сайтами или веб-приложениями.

Помимо скрипта, можно указать необязательный список параметров (пар имя-значение) и тайм-аут.

Проверки элементов данных браузера выполняются и обрабатываются browser poller'ами сервера или прокси Zabbix. При необходимости вы можете настроить количество предварительно созданных экземпляров browser poller'ов в параметре StartBrowserPollers файла конфигурации Zabbix сервера/прокси.

Для мониторинга сложных веб-сайтов и веб-приложений доступен шаблон Website by Browser как готовый шаблон.

Настройка

В поле Тип формы настройки элемента данных выберите Browser, а затем заполните обязательные поля.

Все обязательные поля ввода отмечены красной звездочкой.

Поля, требующие специальной информации для элементов данных Browser:

Примеры

Пример настройки Zabbix для мониторинга веб-сайтов с использованием шаблона Website by Browser см. в разделе Мониторинг веб-сайтов с помощью элементов данных Browser.

Скрипт по умолчанию

Следующий скрипт:

1. Инициализирует сессию браузера.
2. Переходит по указанному URL.
3. Собирает записи производительности и статистику сессии и возвращает их в виде строки JSON.

В поле Скрипт введите:

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

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

Инициализация браузера с пользовательскими capabilities

Следующий скрипт:

1. Инициализирует сеанс браузера для доступного браузера на основе первого совпавшего браузера в порядке, указанном в скрипте.
2. Определяет capabilities браузера, включая стратегию загрузки страницы и параметры, специфичные для каждого браузера, такие как режим headless для браузеров Chrome, Firefox и Microsoft Edge.

В поле 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) инициализируются в режиме headless, то есть графический пользовательский интерфейс (GUI) браузера не отображается.

Следующий скрипт инициализирует сеанс браузера с включённым GUI.

Обратите внимание: если WebDriver не может найти исполняемый файл браузера, вы можете указать путь вручную.

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

// To initialize a Firefox session with GUI, uncomment the following lines:
// var opts = Browser.firefoxOptions();
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].binary = 'usr/bin/firefox';
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].args = [];

// To initialize a Microsoft Edge session with GUI, uncomment the following lines:
// 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); // Разобрать JSON-строку, содержащую параметры, переданные из 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);  // Parse the JSON string containing parameters passed from Zabbix.

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