19 Éléments de navigateur

Aperçu

Les éléments de navigateur permettent de surveiller des sites web complexes et des applications web à l’aide d’un navigateur.

Les éléments de navigateur collectent des données en exécutant un code JavaScript défini par l’utilisateur et en récupérant des données via HTTP/HTTPS. Cet élément peut simuler des actions liées au navigateur, telles que cliquer, saisir du texte, naviguer entre des pages web et d’autres interactions utilisateur avec des sites web ou des applications web.

En plus du script, il est possible de spécifier une liste facultative de paramètres (paires de nom et de valeur) ainsi qu’un délai d’expiration.

Les vérifications des éléments de navigateur sont exécutées et traitées par les processus browser poller du serveur ou du proxy Zabbix. Si nécessaire, vous pouvez ajuster le nombre d’instances pré-forkées des browser pollers dans le paramètre StartBrowserPollers du fichier de configuration du server/proxy Zabbix.

Pour surveiller des sites web complexes et des applications web, le modèle Website by Browser est disponible en tant que modèle prêt à l’emploi.

Configuration

Dans le champ Type du formulaire de configuration d'un élément, sélectionnez Browser, puis renseignez les champs requis.

Tous les champs de saisie obligatoires sont marqués d'un astérisque rouge.

Les champs nécessitant des informations spécifiques pour les éléments Browser sont les suivants :

Exemples

Pour un exemple de configuration de Zabbix afin de surveiller des sites web à l’aide du modèle Website by Browser, consultez Surveiller des sites web avec des éléments Browser.

Script par défaut

Le script suivant :

1. Initialise une session de navigateur.
2. Accède à une URL spécifiée.
3. Collecte les entrées de performance et les statistiques de session, puis les renvoie sous forme de chaîne JSON.

Dans le champ Script, saisissez :

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

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

Initialiser le navigateur avec des capacités personnalisées

Le script suivant :

1. Initialise une session de navigateur pour le navigateur disponible, en se basant sur le premier navigateur correspondant dans l’ordre spécifié dans le script.
2. Définit les capacités du navigateur, y compris la stratégie de chargement des pages et les options propres à chaque navigateur, comme le mode headless pour les navigateurs Chrome, Firefox et Microsoft Edge.

Dans le champ Script, saisissez :

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

Initialiser le navigateur avec l’interface graphique

Par défaut, les sessions de navigateur (à l’exception de Safari) sont initialisées en mode headless, ce qui signifie que l’interface graphique utilisateur (GUI) du navigateur n’est pas affichée.

Le script suivant initialise une session de navigateur avec l’interface graphique activée.

Notez que si le WebDriver ne parvient pas à localiser le binaire du navigateur, vous pouvez spécifier le chemin manuellement.

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

// Pour initialiser une session Firefox avec interface graphique, décommentez les lignes suivantes :
// var opts = Browser.firefoxOptions();
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].binary = 'usr/bin/firefox';
// opts.capabilities.alwaysMatch['moz:firefoxOptions'].args = [];

// Pour initialiser une session Microsoft Edge avec interface graphique, décommentez les lignes suivantes :
// 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);

Prendre des captures d'écran

Le script suivant :

1. Initialise une session de navigateur.
2. Définit la taille de la zone d’affichage du navigateur afin de déterminer la taille de la capture d’écran (spécifiée en tant que paramètres, voir ci-dessous).
3. Accède à une URL (spécifiée en tant que paramètre, voir ci-dessous).
4. Collecte les statistiques de session, capture une capture d’écran et l’ajoute aux statistiques collectées.
5. Gère les erreurs en capturant les messages d’erreur et une capture d’écran.
6. Renvoie les résultats collectés sous forme de chaîne JSON.

Le script utilise également des paramètres du formulaire de configuration de l’élément :

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

Dans le champ Script, saisissez :

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

Vérifier la connexion à Zabbix

Le script suivant :

1. Initialise une session de navigateur.
2. Accède à une page (spécifiée comme paramètre, voir ci-dessous).
3. Saisit le nom d'utilisateur et le mot de passe (spécifiés comme paramètres, voir ci-dessous).
4. Recherche et clique sur le bouton de connexion.
5. Recherche et clique sur le bouton de déconnexion.
6. Collecte les données de performance avant et après la connexion, ainsi qu'après la déconnexion.
7. Gère les erreurs en capturant les messages d'erreur et une capture d'écran.
8. Renvoie les résultats collectés sous forme de chaîne JSON.

Le script utilise également des paramètres du formulaire de configuration de l'élément :

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

Dans le champ Script, saisissez :

var browser, result;

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

try {
    var params = JSON.parse(value); // Analyse la chaîne JSON contenant les paramètres transmis par 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);
}

Trouver des liens

Le script suivant :

1. Initialise une session de navigateur.
2. Définit une fonction pour supprimer les éléments en double d'un tableau (voir l'étape 5).
3. Accède à une page (spécifiée comme paramètres, voir ci-dessous).
4. Trouve les liens sur la page.
5. Supprime les liens en double pour garantir leur unicité.
6. Extrait uniquement les liens qui commencent par "http".
7. Formate les liens extraits selon une structure spécifique.
8. Gère les erreurs en capturant les messages d'erreur et une capture d'écran.
9. Renvoie les résultats collectés sous forme de chaîne JSON.

Le script utilise également des paramètres du formulaire de configuration de l'élément :

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

Dans le champ Script, saisissez :

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