Antes de leer lo siguiente, supongo que ha leído los siguientes artículos:

Ya sabe cómo implementar Elastic Stack e instalar el servidor de flota y el agente elástico para el monitoreo.

Crear un monitor de navegador

Browser Monitor es un monitor completo. El monitoreo sintético amplía las técnicas de prueba tradicionales de un extremo a otro, ya que permite que sus pruebas se ejecuten continuamente en la nube. Con el monitoreo sintético, puede afirmar que su aplicación continúa funcionando después de la implementación al reutilizar los mismos viajes utilizados para validar el software en una computadora.

Puede usar monitores sintéticos para detectar errores causados por estados no válidos que no pudo predecir y para los que no escribió pruebas. Los monitores sintéticos también le permiten simular las acciones de los usuarios de manera regular, lo que lo ayuda a detectar errores en funciones de poco tráfico.

Comience por aprender los conceptos básicos del monitoreo integrado, incluido cómo:

Escribir pruebas sintéticas
prueba local
Configurar monitores individuales
Uso de parámetros y secretos
Usando una grabadora sintética

Escribir pruebas sintéticas

Después de configurar su proyecto, puede comenzar a escribir pruebas exhaustivas para verificar las acciones y solicitudes clave que los usuarios finales pueden realizar en su sitio. Si no sabe cómo crear un proyecto, lea mi artículo anterior " Observabilidad: monitoreo sintético - Introducción al monitoreo sintético (1) "

Descripción general de la sintaxis

Para escribir pruebas sintéticas para su aplicación, necesita conocer la sintaxis básica de JavaScript y Playwright .

Sugerencia : Playwright es una biblioteca de prueba de navegador desarrollada por Microsoft. Es rápido, confiable y tiene una API moderna que espera automáticamente a que los elementos de la página estén listos.

Los agentes de composición exponen las API para crear y ejecutar pruebas, que incluyen:

nombre	describir
viaje	Probar una unidad discreta de funcionalidad. Acepta dos parámetros: nombre (cadena) y devolución de llamada (función). Obtenga más información en Crear un viaje .
paso	Acciones en un viaje que deben realizarse en un orden específico. Acepta dos parámetros: nombre (cadena) y devolución de llamada (función). Obtenga más información en Agregar pasos .
esperar	Comprueba si un valor cumple una determinada condición. Hay varias comprobaciones admitidas. Obtenga más información en Hacer aserciones .
antes de todo	Ejecuta la función proporcionada una vez antes de que se ejecute cualquier viaje. Si la función proporcionada es una promesa, el corredor esperará a que se resuelva la promesa antes de llamar al viaje. Toma un argumento: devolución de llamada (función). Obtenga más información sobre cómo configurar y eliminar el estado global .
antes	Ejecute la función proporcionada antes de ejecutar un solo viaje. Toma un argumento: devolución de llamada (función). Obtenga más información sobre cómo configurar y eliminar el estado global .
después de todo	Ejecuta la función proporcionada una vez después de que se hayan ejecutado todos los viajes. Toma un argumento: devolución de llamada (función). Obtenga más información sobre cómo configurar y eliminar el estado global .
después	Ejecute la función proporcionada después de completar un solo viaje. Toma un argumento: devolución de llamada (función). Obtenga más información sobre cómo configurar y eliminar el estado global .
monitor	El método Monitor.use le permite determinar la configuración del monitor por viaje. Por ejemplo, si desea que dos viajes creen monitores en diferentes intervalos, debe llamar a monitor.use en cada viaje, con la propiedad de programación de cada viaje establecida en un valor diferente. Tenga en cuenta que esto solo es relevante cuando se crean monitores en Kibana usando el comando Push. Obtenga más información en Configuración de monitores individuales .

Crear un viaje - Crear un viaje

Cree un nuevo archivo con una extensión de archivo .journey.ts o .journey.js, o edite uno de los archivos de viaje de muestra.

Journey prueba una unidad funcional independiente. Por ejemplo, iniciar sesión en un sitio web, agregar un artículo a un carrito de compras o unirse a una lista de correo.

La función de viaje tiene dos parámetros: nombre y devolución de llamada. El nombre le ayuda a identificar un viaje individual. El parámetro de devolución de llamada es una función que resume la funcionalidad del viaje. Esta devolución de llamada brinda acceso a la nueva página de Playwright, parámetros, navegador e instancia de contexto.

journey('Journey name', ({ page, browser, context, params, request }) => {
  // Add steps here
});

parámetro

describir

nombre (cadena)

Una cadena definida por el usuario que se usa para describir el viaje.

devolución de llamada (función)

La función donde agregará los pasos.

parámetro:

página : un objeto de página de Playwright que le permite controlar la página actual del navegador.

navegador : El objeto del navegador creado por Playwright.

contexto : contextos de navegador que no comparten cookies o cachés con otros contextos de navegador .

params : variables definidas por el usuario que le permiten llamar a las suites de Synthetics con parámetros personalizados. Por ejemplo, si desea utilizar una página de inicio diferente según el entorno (localhost para dev, URL para prod). Consulte Trabajar con parámetros y secretos para obtener más información .

solicitud : un objeto de solicitud que se puede usar para realizar solicitudes de API independientemente de la interacción del navegador. Por ejemplo, para obtener credenciales de autenticación o tokens para pruebas basadas en navegador. Consulte Realización de solicitudes de API a continuación para obtener más información .

Agregar pasos - agregar pasos

Un viaje consta de uno o más pasos. Los pasos son acciones que deben realizarse en un orden específico. Los pasos se muestran individualmente en la aplicación de Synthetics con capturas de pantalla para facilitar la depuración y el seguimiento de errores.

El viaje básico de dos pasos se ve así:

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

Los pasos pueden ser simples o complejos, dependiendo de sus necesidades. Por ejemplo, un primer paso básico podría cargar una página web:

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

Visite la referencia page.goto para obtener más información.

parámetro	describir
nombre (cadena)	Una cadena definida por el usuario que se usa para describir el viaje.
devolución de llamada (función)	Puede simular funciones de flujo de trabajo de usuario utilizando la sintaxis de Synthetics y Playwright .

Nota : si desea generar código interactuando directamente con las páginas web, puede usar Synthetics Recorder .

La grabadora inicia el navegador Chromium , que escucha todas sus interacciones con una página web y las graba internamente usando Playwright. Cuando termina de interactuar con el navegador, la grabadora convierte las acciones registradas en código JavaScript que se puede usar con Elastic Synthetics o Heartbeat.

Consulte Uso de Synthetics Recorder para obtener más detalles sobre cómo comenzar con Synthetics Recorder .

sintaxis del dramaturgo

En las devoluciones de llamada de cada paso, puede usar mucha sintaxis de Playwright. La biblioteca de Elastic Synthetics admite varias clases de Playwright para simular los flujos de trabajo de los usuarios, incluidas las siguientes tareas:

Interactuar con el navegador o la página actual (como en el ejemplo anterior).
Usa localizadores para encontrar elementos en una página web.
Simule eventos de mouse , toque o teclado .

Visite la documentación de Playwright para obtener más información.

Sin embargo, no todas las funciones de Playwright deben usarse con Elastic Synthetics.

En algunos casos, las alternativas a la funcionalidad de Playwright están integradas en la biblioteca de Elastic Synthetics. Estas alternativas están dirigidas a un mejor seguimiento sintético. No utilice la sintaxis de Playwright para:

Hacer afirmaciones . Utilice el método Expect de Elastic Synthetics en su lugar.
Hacer solicitudes de API . Utilice los parámetros de solicitud de Elastic Synthetic en su lugar.

También hay algunas características de Playwright en Elastic Synthetics que no son compatibles de fábrica, que incluyen:

Vídeos

hacer afirmaciones

Comprueba si un valor cumple una determinada condición. Un paso más complejo podría esperar a que se seleccione un elemento de página y luego asegurarse de que coincida con el valor esperado.

Por ejemplo, en una página usando el siguiente HTML:

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

Puede verificar que un elemento de entrada de la clase new-todo tiene el valor de marcador de posición esperado (texto de sugerencia del elemento de entrada) con la siguiente prueba:

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

En lo anterior, primero usamos el localizador para encontrar el elemento de entrada llamado new-todo y luego usamos la biblioteca de aserciones proporcionada por el agente de Synthetics para verificar si el valor del atributo de marcador de posición coincide con una cadena específica.

`expect` Métodos admitidos

Hacer una solicitud de API

Puede utilizar el parámetro de solicitud para realizar solicitudes de API independientes de la interacción del navegador. Por ejemplo, puede recuperar un token de un extremo HTTP y usarlo en solicitudes de páginas web posteriores.

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

Los parámetros de solicitud de Elastic Synthetics son similares a otros objetos de solicitud expuestos por Playwright , con algunas diferencias clave:

Los parámetros de solicitud de Elastic Synthetics están integrados en la biblioteca, por lo que no es necesario importarlos por separado, lo que reduce la cantidad de código necesario y le permite realizar solicitudes de API en un viaje en línea.
El objeto de solicitud de nivel superior expuesto por Elastic Synthetics tiene su propio almacén de cookies independiente, a diferencia de context.request y page.request de Playwright, que comparten un almacén de cookies con el BrowserContext correspondiente.
Si desea controlar la creación de objetos de solicitud, puede hacerlo mediante --playwright-options o pasando opciones en el archivo Synthetics.config.ts .

Consulte el repositorio de demostración de Elastic Synthetics para ver un ejemplo completo que demuestra cómo usar el objeto de solicitud .

Nota : el parámetro de solicitud no es adecuado para escribir pruebas API puras. En cambio, es un método que admite la escritura de solicitudes HTTP simples para servir pruebas basadas en navegador.

Establecer y eliminar el estado global

Si es necesario realizar alguna operación antes o después del viaje, puede usar before, beforeAll, after o afterAll.

Por ejemplo, para establecer el estado global o los servidores que se usarán para un solo viaje, use un enlace anterior. Para realizar esta configuración una vez antes de todos los viajes, use el enlace beforeAll.

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

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

Puede usar enlaces posteriores para limpiar el estado global o apagar servidores para recorridos individuales . Para realizar esta limpieza una vez después de todos los viajes, use el gancho afterAll.

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

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

Importar paquete NPM

Puede importar y usar otros paquetes de NPM en el código de viaje. Vea el siguiente ejemplo usando el paquete NPM externo 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);
  });
});

Cuando crea monitores a partir de viajes que usan paquetes NPM externos , esos paquetes se empaquetarán con el código de viaje cuando se llame al comando push.

Sin embargo, existen algunas limitaciones al usar paquetes externos:

El viaje del paquete comprimido no debe exceder los 800 KB.
Los módulos de nodos nativos no funcionarán como se esperaba debido a las inconsistencias de la plataforma.

Ejemplo de prueba sintética

Un ejemplo completo de una prueba sintética básica podría verse así:

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

Puede encontrar ejemplos más complejos en el repositorio de demostración de Elastic Synthetics .

prueba local

A medida que escribe recorridos, puede ejecutarlos localmente para verificar que funcionan como se esperaba. Luego puede crear monitores para ejecutar sus recorridos periódicamente.

Para probar todos los recorridos en un proyecto, vaya al directorio que contiene el proyecto compuesto y ejecute los recorridos en él. De forma predeterminada, @elastic/synthetics runner solo ejecutará archivos que coincidan con el nombre de archivo *.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 .

Probar monitor en línea

Para probar localmente el recorrido del monitor en línea, canalice el recorrido en línea al comando npx @elastic/synthetics.

Por ejemplo, suponga que su observador en línea contiene el siguiente código:

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

Para ejecutar el viaje localmente, puede guardar el código en un archivo y canalizar el contenido del archivo a @elastic-synthetics:

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

Recibirás una respuesta como esta:

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

 2 passed (2511 ms)

Configurar monitores de navegador individuales

NOTA : Esto solo es relevante para los monitores de proyecto. Para obtener más información sobre la configuración de monitores de navegador agregados en aplicaciones de Synthetics, consulte Uso de aplicaciones de Synthetics .

Arriba, hemos visto cómo crear viajes sintéticos. Después de crear un viaje, puede usar Monitor.use para configurar el monitor del navegador que ejecutará la prueba.

Necesita establecer algunas opciones de configuración:

Asigne un nombre a su monitor . Asigne al monitor un nombre legible por humanos y una identificación única. Esto aparecerá en Kibana, donde podrá ver y administrar los monitores después de que se hayan creado.
Establece un horario . Especifica el intervalo de tiempo en el que se ejecuta la prueba.
Especifica dónde debe ejecutarse el monitor . Puede ejecutar el monitor en la infraestructura de prueba alojada globalmente de Elastic o crear una ubicación privada para ejecutar el monitor desde sus propias instalaciones.
Establezca otras opciones según lo desee . También puede configurar varias otras opciones para personalizar su implementación, incluidos parámetros, etiquetas, opciones de captura de pantalla, opciones de límite y más.

Use Monitor.use para configurar cada monitor directamente en el código de viaje. La API del monitor le permite configurar opciones únicas para el monitor de cada viaje directamente a través del código. Por ejemplo:

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

Para cada viaje, puede especificar su horario y dónde se realizará. Cuando estas opciones no están configuradas, Synthetics utilizará los valores predeterminados del archivo de configuración global.

Configurar proyecto de síntesis

Las pruebas sintéticas soportan la configuración de parámetros dinámicos que se pueden utilizar en el proyecto. Además, el proxy de Synthetics construido sobre Playwright admite la configuración del navegador y las opciones de contexto disponibles en los métodos específicos de Playwright, por ejemplo, ignoreHTTPSErrors, extraHTTPHeaders y viewport.

Cree un archivo synthetics.config.js o synthetics.config.ts en el directorio raíz de su proyecto Synthesis y especifique las opciones:

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 archivo de configuración puede exportar un objeto o una función que, cuando se llama, debe devolver la configuración generada. Para obtener más información sobre la configuración de pruebas por entorno, consulte la documentación de configuración dinámica .

params: un objeto que define las variables necesarias para la prueba.

playwsrightOption: consulte la documentación de Playwright para conocer las opciones disponibles.

Nota : Playwright utiliza dos tipos de tiempos de espera en Elastic Synthetics: tiempos de espera de acción y tiempos de espera de navegación.

Elastic Synthetics utiliza una acción predeterminada y un tiempo de espera de navegación de 50 segundos. Puede anular este valor predeterminado con actionTimeout y navigationTimeout en playwrightOptions.

Emulación de dispositivo

Los usuarios pueden hacerse pasar por un dispositivo móvil usando un archivo de configuración. La siguiente configuración de ejemplo ejecuta pruebas en el modo de emulación de Pixel 5.

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

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

export default config;

monitor

Valor predeterminado aplicado a todos los monitores cuando se utiliza el comando Push @elastic/synthetics.

nombre	describir
identificación (cadena)	Un identificador único para este monitor.
nombre (cadena)	El nombre legible por humanos del monitor.
`tags` ( `Array<string>`)	Una lista de etiquetas que se enviarán con el evento del observador. Las etiquetas se muestran en la aplicación Synthetics, lo que le permite buscar monitores por etiqueta.
`schedule` ( `number`)	El intervalo de tiempo (en minutos) en el que debe ejecutarse el monitor.
`enabled` ( `boolean`)	Habilite o deshabilite la ejecución de un monitor sin eliminarlo ni volver a crearlo.
`locations` ( Array<SyntheticsLocationsType> )	在哪里部署监测器。监测器可以部署在多个位置，以便你可以检测这些位置之间可用性和响应时间的差异。要列出可用位置，你可以：运行 elastic-synthetics locations 命令。转至 Synthetics → Management 并单击 Create monitor。位置将在位置中列出。
`privateLocations` (`Array<string>`)	将部署监测器的私人位置。这些私有位置是指由你托管和管理的位置，而位置由 Elastic 托管。你可以使用位置名称指定私有位置。要列出可用的私有位置，你可以：使用部署的 Kibana URL 运行 elastic-syntheticslocations 命令，从中获取可用位置。转至 Synthetics → Management 并单击 Create monitor。私人地点将在地点中列出。
`throttling` (`boolean` \| ThrottlingOptions)	控制显示器的下载速度、上传速度和延迟，以模拟应用程序在较慢或较慢的网络上的行为。设置为 false 以完全禁用限制。
`screenshot` (ScreenshotOptions)	控制是否捕获屏幕截图。选项包括 “on”、“off” 或 “only-on-failure”。

Observabilidad: Monitoreo sintético: cree monitoreo de navegador, configure monitores y proyectos de navegador individuales

Crear un monitor de navegador

Escribir pruebas sintéticas

Descripción general de la sintaxis

Crear un viaje - Crear un viaje

Agregar pasos - agregar pasos

sintaxis del dramaturgo

hacer afirmaciones

`expect` Métodos admitidos

Hacer una solicitud de API

Establecer y eliminar el estado global

Importar paquete NPM

Ejemplo de prueba sintética

prueba local

Probar monitor en línea

Configurar monitores de navegador individuales

Configurar proyecto de síntesis

Supongo que te gusta

Observabilidad: Monitoreo sintético: cree monitoreo de navegador, configure monitores y proyectos de navegador individuales

Crear un monitor de navegador

Escribir pruebas sintéticas

Descripción general de la sintaxis

Crear un viaje - Crear un viaje

Agregar pasos - agregar pasos

sintaxis del dramaturgo

hacer afirmaciones

expect Métodos admitidos

Hacer una solicitud de API

Establecer y eliminar el estado global

Importar paquete NPM

Ejemplo de prueba sintética

prueba local

Probar monitor en línea

Configurar monitores de navegador individuales

Configurar proyecto de síntesis

Supongo que te gusta

`expect` Métodos admitidos