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

Обзор

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

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

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

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

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

Настройка

В поле Тип (Type) диалога настроек элемента данных выберите Браузер и заполните обязательные поля.

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

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

Примеры

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

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

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

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

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

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

1. Инициализирует сеанс браузера для доступного браузера на основе первого совпадающего браузера в порядке, указанном в скрипте.
2. Определяет возможности браузера, включая стратегию загрузки страницы и параметры, специфичные для каждого браузера, такие как режим 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 = [];

// Чтобы инициализировать сеанс 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); // Распарсить строку 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.

Скрипт также использует параметры из формы конфигурации элемента данных item configuration form:

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