Observabilité : Surveillance synthétique - Créez une surveillance du navigateur, configurez des moniteurs et des projets de navigateur individuels

News 2023-07-26 08:52:18 views: null

Avant de lire ce qui suit, je suppose que vous avez lu les articles suivants :

Vous savez déjà comment déployer Elastic Stack et installer Fleet Server et Elastic Agent pour la surveillance.

Créer un moniteur de navigateur

Browser Monitor est un moniteur complet. La surveillance synthétique étend les techniques de test traditionnelles de bout en bout car elle permet à vos tests de s'exécuter en continu sur le cloud. Avec la surveillance synthétique, vous pouvez affirmer que votre application continue de fonctionner après le déploiement en réutilisant les mêmes parcours utilisés pour valider le logiciel sur un ordinateur.

Vous pouvez utiliser des moniteurs synthétiques pour détecter les bogues causés par des états invalides que vous ne pouviez pas prévoir et pour lesquels vous n'avez pas écrit de tests. Les moniteurs synthétiques vous permettent également de simuler régulièrement les actions des utilisateurs, ce qui vous aide à détecter les bogues dans les fonctionnalités à faible trafic.

Commencez par apprendre les bases de la surveillance intégrée, notamment comment :

  • Rédiger des tests synthétiques
  • essai local
  • Configurer des moniteurs individuels
  • Utiliser des paramètres et des secrets
  • Utilisation d'une flûte à bec synthétique

Rédiger des tests synthétiques

Après avoir configuré votre projet, vous pouvez commencer à rédiger des tests complets pour vérifier les actions clés et les demandes que les utilisateurs finaux peuvent faire sur votre site. Si vous ne savez pas comment créer un projet, merci de lire mon article précédent " Observabilité : Monitoring Synthétique - Introduction au Monitoring Synthétique (1) "

Présentation de la syntaxe

Pour écrire des tests synthétiques pour votre application, vous devez connaître la syntaxe JavaScript et Playwright de base .

Astuce : Playwright est une bibliothèque de test de navigateur développée par Microsoft. Il est rapide, fiable et dispose d'une API moderne qui attend automatiquement que les éléments de la page soient prêts.

Les agents de composition exposent des API pour créer et exécuter des tests, notamment :

nom décrire
voyage Testez une unité discrète de fonctionnalité. Accepte deux paramètres : nom (chaîne) et rappel (fonction). Pour en savoir plus, consultez Créer  un parcours  .
marcher Actions d'un parcours qui doivent être effectuées dans un ordre précis. Accepte deux paramètres : nom (chaîne) et rappel (fonction). En savoir plus dans Ajouter des étapes .
attendre Vérifie si une valeur répond à une certaine condition. Il existe plusieurs vérifications prises en charge. En savoir plus dans Faire des assertions .
avant tout Exécute la fonction fournie une fois avant l'exécution de tout trajet. Si la fonction fournie est une promesse, le coureur attendra que la promesse soit résolue avant d'appeler le parcours. Prend un argument : callback(fonction). En savoir plus sur la définition et la suppression de l'état global .
avant Exécutez la fonction fournie avant d'effectuer un seul trajet. Prend un argument : callback(fonction). En savoir plus sur la définition et la suppression de l'état global .
après tout Exécute la fonction fournie une fois après l'exécution de tous les trajets. Prend un argument : callback(fonction). En savoir plus sur la définition et la suppression de l'état global .
après Exécutez la fonction fournie après la fin d'un seul trajet. Prend un argument : callback(fonction). En savoir plus sur la définition et la suppression de l'état global .
moniteur La méthode Monitor.use vous permet de déterminer la configuration du moniteur par trajet. Par exemple, si vous souhaitez que deux trajets créent des moniteurs à des intervalles différents, vous devez appeler monitor.use sur chaque trajet, la propriété de planification de chaque trajet étant définie sur une valeur différente. Notez que cela n'est pertinent que lors de la création de moniteurs dans Kibana à l'aide de la commande Push. En savoir plus dans Configuration de moniteurs individuels .

Créer un parcours - Créer un parcours

Créez un nouveau fichier avec une extension de fichier .journey.ts ou .journey.js, ou modifiez l'un des exemples de fichiers de voyage.

Journey teste une unité fonctionnelle indépendante. Par exemple, se connecter à un site Web, ajouter un article à un panier ou rejoindre une liste de diffusion.

La fonction trajet a deux paramètres : nom et rappel. Le nom vous aide à identifier un parcours individuel. Le paramètre de rappel est une fonction qui encapsule la fonctionnalité du parcours. Ce rappel donne accès à la nouvelle page Playwright, aux paramètres, au navigateur et à l'instance de contexte.

journey('Journey name', ({ page, browser, context, params, request }) => {
  // Add steps here
});
paramètre décrire
nom (chaîne) Une chaîne définie par l'utilisateur utilisée pour décrire le parcours.
rappel (fonction)

La fonction où vous allez ajouter les étapes.

paramètre:

page : Un objet page de Playwright qui vous permet de contrôler la page actuelle du navigateur.

navigateur : L'objet navigateur créé par Playwright.

contexte : contextes de navigateur qui ne partagent pas de cookies ou de caches avec d'autres contextes de navigateur .

params : variables définies par l'utilisateur qui vous permettent d'appeler des suites Synthetics avec des paramètres personnalisés. Par exemple, si vous souhaitez utiliser une page d'accueil différente en fonction de l'environnement (localhost pour dev, URL pour prod). Voir Travailler avec des paramètres et des secrets pour plus d'informations .

request : un objet de requête qui peut être utilisé pour effectuer des requêtes API indépendantes de l'interaction du navigateur. Par exemple, pour obtenir des identifiants d'authentification ou des jetons pour des tests basés sur un navigateur. Voir Faire des requêtes API ci-dessous pour plus d'informations .

Ajouter des étapes - ajouter des étapes

Un parcours se compose d'une ou plusieurs étapes. Les étapes sont des actions qui doivent être effectuées dans un ordre spécifique. Les étapes sont affichées individuellement dans l'application Synthetics avec des captures d'écran pour faciliter le débogage et le suivi des erreurs.

Le parcours de base en deux étapes ressemble à ceci :

journey('Journey name', ({ page, browser, client, params, request }) => {
    step('Step 1 name', () => {
      // Do something here
    });
    step('Step 2 name', () => {
      // Do something else here
    });
});

Les étapes peuvent être simples ou complexes, selon vos besoins. Par exemple, une première étape de base peut charger une page Web :

step('Load the demo page', () => {
  await page.goto('https://elastic.github.io/synthetics-demo/'); 
});

Visitez  la référence page.goto pour plus d'informations.

paramètre décrire
nom (chaîne) Une chaîne définie par l'utilisateur utilisée pour décrire le parcours.
rappel (fonction) Vous pouvez simuler des fonctions de flux de travail utilisateur à l'aide de la syntaxe Synthetics et Playwright .

Remarque : Si vous souhaitez générer du code en interagissant directement avec les pages Web, vous pouvez utiliser Synthetics Recorder .

L'enregistreur lance le navigateur Chromium , qui écoute chacune de vos interactions avec une page Web et les enregistre en interne à l'aide de Playwright. Lorsque vous avez terminé d'interagir avec le navigateur, l'enregistreur convertit les actions enregistrées en code JavaScript qui peut être utilisé avec Elastic Synthetics ou Heartbeat.

Voir Utilisation de Synthetics Recorder pour plus de détails sur la prise en main de Synthetics Recorder .

Syntaxe du dramaturge

Dans les rappels de chaque étape, vous pouvez utiliser beaucoup de syntaxe Playwright. La bibliothèque Elastic Synthetics prend en charge un certain nombre de classes Playwright pour simuler les flux de travail des utilisateurs, notamment les tâches suivantes :

Veuillez consulter la documentation de Playwright pour plus d'informations.

Cependant, toutes les fonctionnalités de Playwright ne doivent pas être utilisées avec Elastic Synthetics.

Dans certains cas, des alternatives aux fonctionnalités de Playwright sont intégrées à la bibliothèque Elastic Synthetics. Ces alternatives visent un meilleur suivi synthétique. N'utilisez pas la syntaxe Playwright pour :

  • Faire des affirmations . Utilisez plutôt la méthode Expect d'Elastic Synthetics.
  • Faire des requêtes API . Utilisez plutôt les paramètres de requête d'Elastic Synthetic. 

Il existe également certaines fonctionnalités Playwright dans Elastic Synthetics qui ne sont pas prises en charge par défaut, notamment :

Faire des affirmations

Vérifie si une valeur répond à une certaine condition. Une étape plus complexe peut attendre qu'un élément de page soit sélectionné, puis s'assurer qu'il correspond à la valeur attendue.

Par exemple, sur une page utilisant le code HTML suivant :

<header class="header">
  <h1>todos</h1>
  <input class="new-todo"
    autofocus autocomplete="off"
    placeholder="What needs to be done?">
</header>

Vous pouvez vérifier qu'un élément d'entrée de la classe new-todo a la valeur d'espace réservé attendue (texte d'indication de l'élément d'entrée) avec le test suivant :

step('Assert placeholder text', async () => {
  const input = await page.locator('input.new-todo'); 
  expect(await input.getAttribute('placeholder')).toBe(
    'What needs to be done?'
  ); 
});

Dans ce qui précède, nous utilisons d'abord le localisateur pour trouver l'élément d'entrée nommé new-todo, puis utilisons la bibliothèque d'assertions fournie par l'agent Synthetics pour vérifier si la valeur de l'attribut d'espace réservé correspond à une chaîne spécifique. 

expect Méthodes prises en charge 

Faire une requête API

Vous pouvez utiliser le paramètre de demande pour effectuer des demandes d'API indépendantes de l'interaction du navigateur. Par exemple, vous pouvez récupérer un jeton à partir d'un point de terminaison HTTP et l'utiliser dans des requêtes de page Web ultérieures.

step('make an API request', async () => {
  const response = await request.get(params.url);
  // Do something with the response
})

Les paramètres de requête Elastic Synthetics sont similaires aux autres objets de requête exposés par Playwright , avec quelques différences clés :

  • Les paramètres de requête Elastic Synthetics sont intégrés à la bibliothèque, il n'est donc pas nécessaire de les importer séparément, ce qui réduit la quantité de code requise et vous permet d' effectuer des requêtes API dans un parcours en ligne.
  • L'objet de requête de niveau supérieur exposé par Elastic Synthetics possède son propre magasin de cookies distinct, contrairement aux context.request et page.request de Playwright qui partagent un magasin de cookies avec le BrowserContext correspondant.
  • Si vous souhaitez contrôler la création d'objets de requête, vous pouvez le faire via --playwright-options ou en passant des options dans le fichier Synthetics.config.ts .

Consultez le référentiel de démonstration Elastic Synthetics pour un exemple complet montrant comment utiliser l'objet de requête .

Remarque : Le paramètre de requête n'est pas adapté à l'écriture de tests API purs. Au lieu de cela, il s'agit d'une méthode qui prend en charge l'écriture de requêtes HTTP simples pour servir des tests basés sur un navigateur.

Définir et supprimer l'état global

Si des opérations doivent être effectuées avant ou après le trajet, vous pouvez utiliser before, beforeAll, after ou afterAll.

Par exemple, pour définir l'état global ou les serveurs qui seront utilisés pour un seul parcours, utilisez un crochet avant. Pour effectuer cette configuration une fois avant tous les trajets, utilisez le hook beforeAll.

before(({ params }) => {
  // Actions to take
});

beforeAll(({ params }) => {
  // Actions to take
});

Vous pouvez utiliser les crochets après pour nettoyer l'état global ou arrêter les serveurs pour des trajets individuels . Pour effectuer ce nettoyage une fois après tous les trajets, utilisez le crochet afterAll.

after(({ params }) => {
  // Actions to take
});

afterAll(({ params }) => {
  // Actions to take
});

Importer le package NPM

Vous pouvez importer et utiliser d'autres packages NPM dans le code de trajet. Voir l'exemple ci-dessous utilisant le package NPM externe is_positive :

import { journey, step, monitor, expect } from '@elastic/synthetics';
import isPositive from 'is-positive';

journey('bundle test', ({ page, params }) => {
  step('check if positive', () => {
    expect(isPositive(4)).toBe(true);
  });
});

Lorsque vous créez des moniteurs à partir de parcours qui utilisent des packages NPM externes , ces packages sont regroupés avec le code de parcours lorsque la commande push est appelée.

Cependant, il existe certaines limitations lors de l'utilisation de packages externes :

  • Le parcours du bundle compressé ne doit pas dépasser 800 Ko.
  • Les modules de nœuds natifs ne fonctionneront pas comme prévu en raison d'incohérences de plate-forme.

Exemple de test synthétique

Un exemple complet d'un test synthétique de base pourrait ressembler à ceci :

import { journey, step, expect } from '@elastic/synthetics';

journey('Ensure placeholder is correct', ({ page }) => {
  step('Load the demo page', async () => {
    await page.goto('https://elastic.github.io/synthetics-demo/');
  });
  step('Assert placeholder text', async () => {
    const placeholderValue = await page.getAttribute(
      'input.new-todo',
      'placeholder'
    );
    expect(placeholderValue).toBe('What needs to be done?');
  });
});

Vous pouvez trouver des exemples plus complexes dans le référentiel de démonstration Elastic Synthetics .

essai local

Lorsque vous écrivez des parcours, vous pouvez les exécuter localement pour vérifier qu'ils fonctionnent comme prévu. Vous pouvez ensuite créer des moniteurs pour exécuter vos trajets périodiquement.

Pour tester tous les parcours d'un projet, accédez au répertoire contenant le projet composite et exécutez les parcours qu'il contient. Par défaut, le programme d'exécution @elastic/synthetics n'exécutera que les fichiers correspondant au nom de fichier *.journey.(ts|js)*.

# Run tests on the current directory. The dot `.` indicates
# that it should run all tests in the current directory.
npx @elastic/synthetics .

Tester le moniteur en ligne

Pour tester le parcours du moniteur en ligne localement, dirigez le parcours en ligne vers la commande npx @elastic/synthetics.

Par exemple, supposons que votre observateur intégré contienne le code suivant :

step('load homepage', async () => {
    await page.goto('https://www.elastic.co');
});
step('hover over products menu', async () => {
    await page.hover('css=[data-nav-item=products]');
});

Pour exécuter le parcours localement, vous pouvez enregistrer le code dans un fichier et diriger le contenu du fichier vers @elastic-synthetics :

cat path/to/sample.js | npx @elastic/synthetics --inline

Vous recevrez une réponse comme celle-ci :

Journey: inline
   ✓  Step: 'load homepage' succeeded (1831 ms)
   ✓  Step: 'hover over products menu' succeeded (97 ms)

 2 passed (2511 ms)

Configurer des moniteurs de navigateur individuels

REMARQUE : Ceci n'est pertinent que pour les moniteurs de projet. Pour plus d'informations sur la configuration des moniteurs de navigateur ajoutés dans les applications Synthetics, consultez Utilisation des applications Synthetics .

Ci-dessus, nous avons vu comment créer des parcours synthétiques. Après avoir créé un parcours, vous pouvez utiliser Monitor.use pour configurer le moniteur de navigateur qui exécutera le test.

Vous devez définir certaines options de configuration :

  • Donnez un nom à votre moniteur . Donnez au moniteur un nom lisible par l'homme et un ID unique. Cela apparaîtra dans Kibana où vous pourrez afficher et gérer les moniteurs après leur création.
  • Établissez un horaire . Spécifie l'intervalle de temps auquel le test s'exécute.
  • Spécifie où le moniteur doit s'exécuter . Vous pouvez exécuter le moniteur sur l'infrastructure de test hébergée à l'échelle mondiale d'Elastic ou créer un emplacement privé pour exécuter le moniteur depuis vos propres locaux.
  • Définissez les autres options selon vos besoins . Vous pouvez également définir plusieurs autres options pour personnaliser votre mise en œuvre, notamment des paramètres, des balises, des options de capture d'écran, des options de limite, etc.

Utilisez Monitor.use pour configurer chaque moniteur directement dans le code de trajet. L'API Monitor vous permet de définir des options uniques pour le moniteur de chaque parcours directement via le code. Par exemple:

import { journey, step, monitor, expect } from '@elastic/synthetics';

journey('Ensure placeholder is correct', ({ page, params }) => {
  monitor.use({
    id: 'example-monitor',
    schedule: 10,
    throttling: {
      download: 10,
      upload: 5,
      latency: 100,
    },
  });
  step('Load the demo page', async () => {
    await page.goto('https://elastic.github.io/synthetics-demo/');
  });
  step('Assert placeholder text', async () => {
    const placeholderValue = await page.getAttribute(
      'input.new-todo',
      'placeholder'
    );
    expect(placeholderValue).toBe('What needs to be done?');
  });
});

Pour chaque trajet, vous pouvez spécifier son horaire et où il se déroulera. Lorsque ces options ne sont pas définies, Synthetics utilisera les valeurs par défaut du fichier de configuration global. 

Configurer le projet de synthèse

Les tests synthétiques prennent en charge la configuration des paramètres dynamiques pouvant être utilisés dans le projet. De plus, le proxy Synthetics construit au-dessus de Playwright prend en charge la configuration des options de navigateur et de contexte disponibles dans les méthodes spécifiques à Playwright, par exemple ignoreHTTPSErrors, extraHTTPHeaders et viewport.

Créez un fichier Synthetics.config.js ou Synthetics.config.ts dans le répertoire racine de votre projet Synthesis et spécifiez les options :

import { SyntheticsConfig } from '@elastic/synthetics'

const config: SyntheticsConfig = {
  params: {
    url: 'https://www.elastic.co'
  },
  playwrightOptions: {
    ignoreHTTPSErrors: true, // ignores all HTTPS errors during navigation
    extraHTTPHeaders: {
      'foo': 'bar' // additional HTTP headers to be sent with every request
    }
  },
  monitor: {
    schedule: 10,
    locations: [ 'us-east4-a' ],
  }
}

export default config;

Un fichier de configuration peut exporter un objet ou une fonction qui, lorsqu'elle est appelée, doit renvoyer la configuration générée. Pour en savoir plus sur la configuration des tests par environnement, consultez la documentation sur la configuration dynamique .

params : un objet définissant toutes les variables nécessaires au test.

playwsrightOption : Voir la documentation de Playwright pour les options disponibles.

Remarque : Playwright utilise deux types de délais d'expiration dans Elastic Synthetics : les délais d'action et les délais de navigation.

Elastic Synthetics utilise une action par défaut et un délai de navigation de 50 secondes. Vous pouvez remplacer cette valeur par défaut par actionTimeout et navigationTimeout dans playwrightOptions.

Émulation de périphérique

Les utilisateurs peuvent emprunter l'identité d'un appareil mobile à l'aide d'un fichier de configuration. L'exemple de configuration ci-dessous exécute des tests en mode d'émulation Pixel 5.

import { SyntheticsConfig } from "@elastic/synthetics"
import { devices } from "playwright-chromium"

const config: SyntheticsConfig = {
  playwrightOptions: {
    ...
    devices['Pixel 5']
  }
}

export default config;

moniteur

Valeur par défaut appliquée à tous les moniteurs lors de l'utilisation de la commande @elastic/synthetics Push.

nom décrire
identifiant (chaîne) Un identifiant unique pour ce moniteur.
nom (chaîne) Nom lisible du moniteur.
tags ( Array<string>) Une liste d'étiquettes qui seront envoyées avec l'événement observateur. Les balises sont affichées dans l'application Synthetics, ce qui vous permet de rechercher des moniteurs par balise.
schedule ( number) Intervalle de temps (en minutes) auquel le moniteur doit s'exécuter.
enabled ( boolean) Activez ou désactivez une exécution de moniteur sans la supprimer ni la recréer.
locations ( Tableau<SyntheticsLocationsType> )

在哪里部署监测器。 监测器可以部署在多个位置，以便你可以检测这些位置之间可用性和响应时间的差异。要列出可用位置，你可以：
privateLocations (Array<string>)

将部署监测器的私人位置。 这些私有位置是指由你托管和管理的位置，而位置由 Elastic 托管。 你可以使用位置名称指定私有位置。要列出可用的私有位置，你可以：

  • 使用部署的 Kibana URL 运行 elastic-syntheticslocations 命令，从中获取可用位置。
  • 转至 Synthetics → Management 并单击 Create monitor。 私人地点将在地点中列出。
throttling (boolean | ThrottlingOptions) 控制显示器的下载速度、上传速度和延迟，以模拟应用程序在较慢或较慢的网络上的行为。 设置为 false 以完全禁用限制。
screenshot (ScreenshotOptions) 控制是否捕获屏幕截图。 选项包括 “on”、“off” 或 “only-on-failure”。

Je suppose que tu aimes

Origine blog.csdn.net/UbuntuTouch/article/details/131726593
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com