Présentation

Les tests de navigateur sont des scénarios exécutés par Datadog sur vos applications web. Ils s’exécutent à des intervalles périodiques configurables depuis plusieurs emplacements dans le monde, à partir de plusieurs navigateurs et appareils. Ces tests vérifient à la fois que vos applications sont opérationnelles et répondent aux requêtes, et que toutes les conditions définies dans vos scénarios sont remplies.

Configuration du test

Vous pouvez créer un test en utilisant l’une des options suivantes :

Créer un test à partir d’un modèle

1. Survolez l’un des modèles pré-remplis et cliquez sur View Template. Cela ouvre un panneau latéral affichant les informations de configuration pré-remplies, notamment : Test Details, Alert Conditions, Steps et, en option, Variables.
2. Cliquez sur +Create Test pour ouvrir la page de configuration, où vous pouvez examiner et modifier les options de configuration pré-remplies. Les champs présentés sont identiques à ceux disponibles lors de la création d’un test à partir de zéro.
3. Cliquez sur Save & Quit dans le coin supérieur droit pour soumettre votre test de navigateur.
   
   

Créer un test à partir de zéro

1. Cliquez sur le modèle
   pour démarrer un nouveau test de navigateur à partir de zéro.
2. Saisissez une Starting URL : l’URL à partir de laquelle votre test de navigateur commence le scénario.
3. Ajoutez un name : le nom de votre test de navigateur.
4. Sélectionnez environment and additional tags : Définissez le env et les tags associés à votre test de navigateur. Utilisez le format <KEY>:<VALUE> pour filtrer sur un <VALUE> pour un <KEY> donné.

5. Sélectionnez browsers and devices : Les navigateurs (tels que Chrome, Firefox et Edge) et les appareils (tels que Laptop Large, Tablet et Mobile Small) sur lesquels exécuter votre test.

   • Pour un ordinateur portable de grande taille, les dimensions sont de 1440 pixels x 1100 pixels.
   • Pour une tablette, les dimensions sont de 768 pixels x 1020 pixels.
   • Pour un petit appareil mobile, les dimensions sont de 320 pixels x 550 pixels.

6. Sélectionnez managed and private locations : Choisissez parmi une liste de emplacements dans le monde gérés par Datadog, ou créez des emplacements privés pour exécuter votre test de navigateur depuis des emplacements personnalisés ou au sein de réseaux privés.

   Remarque : Vous pouvez également utiliser le Continuous Testing Tunnel pour déclencher des tests sur votre configuration de développement locale ou dans votre pipeline CI/CD afin de tester des environnements internes.

7. Définissez la test frequency : Les intervalles varient d’une minute à une fois par semaine.

8. Cliquez sur Save & Edit Recording pour soumettre votre test de navigateur.

Emplacements

Datadog’s out-of-the-box managed locations allow you to test public-facing websites and endpoints from regions where your customers are located.

AWS:

GCP:

Azure:

The Datadog for Government site (US1-FED) uses the following managed location:

Extraits

Lors de la configuration d’un nouveau test de navigateur Synthetic Monitoring, utilisez des extraits pour remplir automatiquement vos appareils et régions, plutôt que de sélectionner ces options manuellement. Les extraits suivants sont disponibles :

• Screen sizes : Effectuez automatiquement vos tests de navigateur sur un écran de taille spécifique à travers différents navigateurs :

  • Large
  • Tablet
  • Mobile

• Multi-region check : Testez automatiquement votre site web depuis un emplacement dans chacune des trois principales régions géographiques (AMER, APAC et EMEA).
  
  

Options avancées

Create local variables

To create a local variable, click + All steps > Variables. You can select one of the following available builtins to add to your variable string:

{{ numeric(n) }}

Generates a numeric string with n digits.

{{ alphabetic(n) }}

Generates an alphabetic string with n letters.

{{ alphanumeric(n) }}

Generates an alphanumeric string with n characters.

{{ date(n unit, format) }}

Generates a date in one of Datadog’s accepted formats with a value corresponding to the UTC date the test is initiated at + or - n units.

{{ timestamp(n, unit) }}

Generates a timestamp in one of Datadog’s accepted units with a value corresponding to the UTC timestamp the test is initiated at +/- n units.

{{ uuid }}

Generates a version 4 universally unique identifier (UUID).

{{ public-id }}

Injects the Public ID of your test.

{{ result-id }}

Injects the Result ID of your test run.

To obfuscate local variable values in test results, select Hide and obfuscate variable value. After you have defined the variable string, click Add Variable.

Apply filters to variable values

When you reference a variable, you can transform its resolved value by appending a filter with a pipe (|). Use the syntax {{ VARIABLE_NAME | filter }} anywhere a variable is accepted, such as the URL, request body, headers, and assertions. The following filters are available:

{{ VARIABLE_NAME | urlEncode }}

URL-encodes the variable’s value. For example, hello world becomes hello%20world.

{{ VARIABLE_NAME | urlDecode }}

URL-decodes the variable’s value. For example, hello%20world becomes hello world.

{{ VARIABLE_NAME | base64Encode }}

Base64-encodes the variable’s value. For example, hello becomes aGVsbG8=.

{{ VARIABLE_NAME | base64Decode }}

Base64-decodes the variable’s value. For example, aGVsbG8= becomes hello.

Filters apply to both local and global variables. You can apply one filter per reference, and filter names are case-sensitive.

Utilisez des variables globales

Vous pouvez utiliser les variables globales définies dans Settings dans le Starting URL et le Advanced Options des détails de votre test de navigateur, ainsi que dans votre enregistrement de test.

Pour afficher la liste des variables disponibles, procédez comme suit :

• Dans les détails de votre test de navigateur : tapez {{ dans le champ souhaité.

• Dans l’enregistreur de votre test de navigateur : Importez la variable dans votre test, puis tapez {{ dans le champ souhaité ou injectez la variable dans votre application pour l’utiliser.

Pour plus d’informations sur l’utilisation des variables dans l’enregistrement de votre test de navigateur, consultez Étapes de test de navigateur.

Définir les conditions d’alerte

Vous pouvez personnaliser des conditions d’alertes afin de définir les circonstances dans lesquelles vous souhaitez qu’un test envoie une notification.

Règle d’alerte

Une alerte est déclenchée si une assertion échoue pendant X minutes depuis l’un des n emplacements sur N. Cette règle d’alerte vous permet de spécifier pendant combien de temps et dans combien d’emplacements un test doit échouer avant de déclencher la notification.

Une alerte est déclenchée uniquement si ces deux conditions sont vraies :

• Au moins un emplacement était en échec (au moins une assertion a échoué) au cours des X dernières minutes ;
• À un moment donné au cours des X dernières minutes, au moins N emplacements étaient en échec.

En cas d’échec, le test est réessayé X fois avant que l’emplacement ne soit marqué comme échoué. Cela vous permet de définir combien d’échecs de test consécutifs doivent se produire pour qu’un emplacement soit considéré comme ayant échoué. Par défaut, il y a une attente de 300ms avant de réessayer un test qui a échoué. Cet intervalle peut être configuré avec l’API.

Nouvelle tentative rapide

Lorsqu’un test échoue, la nouvelle tentative rapide vous permet de réessayer le test X fois après Y ms avant de le marquer comme ayant échoué. La personnalisation de l’intervalle de nouvelle tentative aide à réduire les faux positifs et améliore la précision de vos alertes.

Comme la disponibilité de l’emplacement est calculée en fonction du résultat final du test une fois les tentatives terminées, des intervalles de nouvelle tentative rapides ont un impact direct sur ce qui apparaît dans votre graphique de disponibilité totale. La disponibilité totale est calculée en fonction des conditions d’alerte configurées, et les notifications sont envoyées en fonction de la disponibilité totale.

Downtimes

To pause test execution during planned maintenance windows, select an existing Scheduled downtime in the Downtimes section. The test automatically pauses during the downtime’s scheduled time slots.

Note: You cannot create a new downtime from the test creation form. To create one, navigate to Settings > Downtimes.

Configurer le monitor de test

Une notification est envoyée selon l’ensemble des conditions d’alerte. Utilisez cette section pour définir la manière et le contenu du message à adresser à vos équipes.

1. Saisissez un message pour le test de navigateur ou utilisez des messages de monitor pré-remplis. Ce champ autorise le formatage Markdown standard et prend en charge les variables conditionnelles suivantes :

   Variable conditionnelle	Description
   {{#is_alert}}	Show when the monitor alerts.
   {{^is_alert}}	Show unless the monitor alerts.
   {{#is_recovery}}	Show when the monitor recovers from alerte.
   {{^is_recovery}}	Show unless the monitor recovers from alerte.
   {{#is_renotify}}	Show when the monitor renotifies.
   {{^is_renotify}}	Show unless the monitor renotifies.
   {{#is_priority}}	Show when the monitor matches priority (P1 to P5).
   {{^is_priority}}	Afficher sauf si le monitor correspond à la priorité (P1 à P5).

   Notification messages include the message defined in this section and information about the failing locations. Pre-filled monitor messages are included in the message body section:

   For example, to create a monitor that iterates over steps extracting variables for browser tests, add the following to the monitor message:

   {{! Lister les variables extraites de toutes les étapes réussies }}
   # Variables extraites
   {{#each synthetics.attributes.result.steps}}
   {{#if extractedValue}}
   * **Nom** : `{{extractedValue.name}}`
   **Valeur :** {{#if extractedValue.secure}}*Obfusqué (valeur masquée)*{{else}}`{{{extractedValue.value}}}`{{/if}}
   {{/if}}
   {{/each}}
   

2. Choose team members and services to notify.

3. Specify a renotification frequency. To prevent renotification on failing tests, check the option Stop re-notifying on X occurrences.

4. Click Save & Start Recording to save your test configuration and record your browser steps.

For more information, see Synthetic Monitoring notifications.

Record your steps

Tests can be recorded from Google Chrome. To record your test, download the Datadog Record Test extension. Because Microsoft Edge is Chromium-based, you can also install the Chrome extension in Edge after you turn on Allow extensions from other stores. See Microsoft’s guide to adding extensions from other stores for instructions.

You can switch tabs in a browser test recording to perform an action on your application (such as clicking on a link that opens another tab) and add another test step. Your browser test must interact with the page first (through a click) before it can perform an assertion. By recording all of the test steps, the browser test can switch tabs automatically at test execution.

1. En option, sélectionnez Open in a pop-up en haut à droite de la page pour ouvrir votre enregistrement de test dans une fenêtre contextuelle séparée. Ceci est utile si votre application ne prend pas en charge l’ouverture dans une iframe ou si vous souhaitez éviter les problèmes de dimensionnement lors de l’enregistrement. Vous pouvez également ouvrir la fenêtre contextuelle dans Incognito mode pour commencer à enregistrer votre test à partir d’un navigateur vierge, exempt de sessions déjà connectées, de cookies de votre navigateur existant, et plus encore.

2. En option, autorisez Datadog à collecter automatiquement les données RUM lors de l’exécution des enregistrements d’étapes depuis votre test de navigateur. Pour plus d’informations, consultez Explorer RUM et Session Replay.

3. Cliquez sur Start Recording pour commencer à enregistrer votre test de navigateur.

4. Lorsque vous cliquez sur votre application tout au long du parcours utilisateur que vous souhaitez surveiller, vos actions sont automatiquement enregistrées et utilisées pour créer des étapes dans votre scénario de test de navigateur sur la gauche.

5. En plus des étapes automatiquement enregistrées, vous pouvez également utiliser les étapes disponibles dans le coin supérieur gauche pour enrichir votre scénario :

   Datadog recommande de terminer votre test de navigateur par une assertion pour confirmer que le parcours exécuté par le test de navigateur a abouti à l’état attendu.

6. Une fois votre scénario terminé, cliquez sur Save and Launch Test.

Relisez vos étapes

Pour réexécuter une ou plusieurs étapes de votre test de navigateur directement dans votre navigateur, téléchargez l’extension Datadog Record Test.

La fonctionnalité de relecture d’étape vous aide à déboguer des étapes individuelles, à atteindre le bon état de l’application lors de la modification d’un test de navigateur et à confirmer des flux entiers avant d’enregistrer votre test.

Remarque : La relecture d’étape peut se comporter différemment d’une exécution complète de test Synthetic Monitoring en raison de conditions (version du navigateur, réseau, agent utilisateur, état de connexion) ou de limitations différentes.

Comment utiliser la relecture d’étape

Vous pouvez relire les étapes de trois manières :

1. Relecture d’une seule étape : Réexécutez une seule étape :

Survolez l'étape et cliquez sur le bouton de lecture pour ne relire que cette étape.

2. Relire toutes les étapes : Exécutez toute la séquence d’étapes telle que définie dans l’enregistreur :

Cliquez sur le bouton de relecture de toutes les étapes (⏩︎) en haut de la liste des étapes pour relire toutes les étapes.

3. Relire les étapes sélectionnées : Exécutez un sous-ensemble d’étapes que vous sélectionnez dans la liste des étapes :

Sélectionnez les étapes que vous souhaitez relire, puis cliquez sur le bouton de relecture des étapes sélectionnées (⏩︎) en haut de la liste des étapes.

Prise en charge de la fonctionnalité de relecture d’étape

Le tableau suivant résume les types d’étapes de test de navigateur pris en charge par la relecture d’étape :

Types d’étape non pris en charge par la relecture d’étape

Autorisation du débogueur

Pour être aussi proche que possible d’une exécution de test de Synthetic Monitoring complète, certaines étapes, comme les étapes basées sur JavaScript ou les simulations de frappe au clavier, nécessitent l’autorisation du débogueur pour être rejouées.

La première fois que l’extension est mise à jour vers une version nécessitant l’autorisation du débogueur, une demande d’autorisation s’affiche et l’extension est désactivée jusqu’à ce que vous l’approuviez :

Cliquez sur les trois points du menu pour accepter l'autorisation.

Autorisations

Par défaut, seuls les utilisateurs disposant des rôles Datadog Admin et Datadog Standard peuvent créer, modifier et supprimer des tests de navigateur Synthetic. Pour bénéficier des droits de création, de modification et de suppression sur les tests de navigateur Synthetic, mettez à niveau votre utilisateur vers l’un de ces deux rôles par défaut.

Si vous utilisez la fonctionnalité de rôle personnalisé, ajoutez votre utilisateur à tout rôle personnalisé incluant les autorisations synthetics_read et synthetics_write.

Restreindre l’accès

Utilisez le contrôle d’accès granulaire pour limiter qui a accès à votre test en fonction des rôles, des équipes ou des utilisateurs individuels :

1. Ouvrez la section des autorisations du formulaire.
2. Cliquez sur Edit Access.

3. Cliquez sur Restrict Access.
4. Sélectionnez des équipes, des rôles ou des utilisateurs.
5. Cliquez sur Add.
6. Sélectionnez le niveau d’accès que vous souhaitez associer à chacun d’eux.
7. Cliquez sur Done.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Premiers pas avec les tests de navigateurDOCUMENTATION En savoir plus sur les monitors de test SyntheticDOCUMENTATION Historique des versions de Synthetic MonitoringGUIDE Centre d'apprentissage Datadog : Premiers pas avec les tests de navigateur SyntheticCENTRE D'APPRENTISSAGE Bonnes pratiques pour la création de tests de bout en boutBLOG Simplifier le dépannage tout au long du parcours utilisateur avec Datadog Synthetic MonitoringBLOG Comment j'ai aidé mon client à mettre à l'échelle ses tests de navigateur avec DatadogBLOG Créer et gérer des tests Browser Synthetic avec TerraformSITE EXTERNE