Admitámoslo, escribir pruebas automatizadas no es lo más divertido en la vida de un desarrollador. Como desarrolladores, queremos escribir funciones, corregir errores y mejorar el mundo. Sin embargo, cuando no tenemos pruebas automatizadas en nuestros flujos de trabajo, a largo plazo, los problemas se pueden complicar. Por lo tanto, también creemos que es importante escribir pruebas automatizadas.
Con el panel de la Grabadora en las Herramientas para desarrolladores de Chrome, puedes grabar y volver a reproducir flujos de usuarios, exportarlos a varios formatos (por ejemplo, secuencias de comandos de prueba) a través de diferentes extensiones y bibliotecas de terceros, personalizar los flujos de usuarios con la biblioteca Puppeteer Replay y, luego, integrarlos a tus flujos de trabajo existentes.
En esta entrada de blog, analizaremos lo siguiente:
- Cómo exportar y volver a reproducir los flujos de usuarios de manera programática
- Cómo personalizar los flujos de usuarios con la ayuda de Puppeteer Replay
- Cómo realizar la integración en tus flujos de trabajo de CI/CD.
En esta entrada de blog, se asume que ya conoces los conceptos básicos de la grabadora. Si es la primera vez que usas la grabadora, sigue este breve tutorial introductorio y esta guía en video para empezar.
Exporta flujos de usuarios y vuelve a reproducir el contenido de manera programática
De forma predeterminada, la grabadora te permite exportar estas grabaciones como una secuencia de comandos de Puppeteer o Puppeteer Replay, o bien como un archivo JSON sin formato.
Una vez que exportes los flujos de usuarios como archivos JSON, tienes la opción de importarlos de nuevo al panel de la grabadora y volver a reproducirlos, o usar bibliotecas externas para volver a reproducirlo. Puppeteer Replay es una de las bibliotecas disponibles.
Volver a jugar con Puppeteer
Sigue las instrucciones que se encuentran en el repositorio para instalar Puppeteer Replay.
Supongamos que guardas tus flujos de usuario JSON en la carpeta recordings (por ejemplo, demo project). Puedes usar el siguiente comando para ejecutar uno o más flujos de usuarios:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
De manera opcional, puedes agregar una secuencia de comandos de npm para ejecutar las grabaciones. Agrega esta línea al campo scripts de package.json:
"replay-all": "replay recordings"
Con eso, puedes ejecutar npm run replay-all en la línea de comandos para volver a reproducir todas las grabaciones.
De forma predeterminada, se vuelven a reproducir los flujos de usuarios sin IU (también conocido como modo sin interfaz gráfica). Si deseas ver la IU, configura la variable de entorno PUPPETEER_HEADLESS como falsa antes de ejecutar el comando.
PUPPETEER_HEADLESS=false npm run replay-all
Cómo volver a reproducir contenido con bibliotecas de terceros
Hay algunas bibliotecas de terceros que puedes usar para volver a reproducir el contenido fuera del navegador Chrome. Esta es la lista completa de bibliotecas.
Por ejemplo, TestCafe es un framework de pruebas de extremo a extremo. Admite la repetición de flujos de usuarios JSON con Safari y mucho más.
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
Por otro lado, Saucelabs es una plataforma de pruebas basada en la nube. Admite la repetición de flujos de usuarios JSON con diferentes navegadores y versiones en la nube.
Este es un archivo de configuración de ejemplo en Saucelabs. Consulta el repositorio de demostración.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Exporta flujos de usuarios con diferentes extensiones
Además de las opciones predeterminadas, también puedes instalar extensiones para exportar flujos de usuarios a diferentes formatos.
Por ejemplo, puedes registrar y exportar los flujos de usuarios como una secuencia de comandos personalizada de WebPageTest. Con la secuencia de comandos, puedes probar el rendimiento de los flujos de usuarios de varios pasos a través de tus aplicaciones. Escribir esos guiones, sin embargo, a veces puede ser un desafío.
Además, si ya cuentas con herramientas de prueba, existen extensiones para exportar flujos de usuarios a diferentes secuencias de comandos de prueba, como Cypress, Nightwatch, WebdriverIO, Testing Library y muchas más. Esta es la lista completa. Esto podría ayudarlos a ti y a tu equipo a empezar a escribir pruebas más rápido.
Cómo transformar diferentes secuencias de comandos de prueba de manera programática
Además de las extensiones, la mayoría de estos proveedores de pruebas también publican bibliotecas para ayudarte a convertir de manera programática múltiples flujos de usuario JSON.
Por ejemplo, usa las bibliotecas @cypress/chrome-recorder para exportar flujos de usuarios a pruebas de Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Cómo reproducir los flujos de usuarios con extensiones
A partir de Chrome 112, ahora puedes mejorar tu experiencia usando extensiones para volver a reproducir grabaciones. Estas extensiones te permiten integrar de forma continua infraestructura y servicios de terceros para volver a reproducir grabaciones sin tener que salir de Herramientas para desarrolladores.
Para comenzar, explore la lista de extensiones disponibles u obtenga información sobre cómo crear su propia extensión personalizada.
Crea tus propias extensiones o bibliotecas
En segundo plano, todas las extensiones y bibliotecas se compilan sobre la biblioteca de Puppeteer Replay. Además de permitirte volver a reproducir los flujos de usuarios, Puppeteer Replay ofrece APIs que te permiten personalizar o transformar los flujos de usuarios de reproducción.
Personaliza la reproducción de los flujos de usuarios
Creemos un complemento de captura de pantalla. Para cada flujo de usuarios, necesitamos lo siguiente:
- Toma una captura de pantalla al final de cada paso y guárdala en la carpeta
_screenshots. - Mostrar un mensaje cuando se complete la ejecución del flujo de usuarios.
Este es el fragmento de código. Puedes descargar esta demostración y también jugar con ella.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
El código es bastante expresivo en sí mismo. Extendimos la API de PuppeteerRunnerExtension para guardar la captura de pantalla después de cada paso y registrar un mensaje después de todos los pasos.
Guarda el archivo. Luego, podremos ejecutar los flujos de usuarios con esta extensión usando el siguiente comando:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
Este es el resultado:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
Cómo transformar flujos de usuarios
Otra forma de personalizar el flujo de usuarios es transformarlo en diferentes formatos (por ejemplo, Cypress o las secuencias de comandos de prueba de Nightwatch).
Por ejemplo, tu flujo de usuarios contiene un paso para navegar a una URL. El archivo JSON tiene el siguiente aspecto:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Puedes crear un complemento de stringify para transformar el paso en JavaScript. También puedes ver otras bibliotecas existentes para ver cómo lo hacen.
Por ejemplo, en el siguiente fragmento de código, se muestra cómo WebdriverIO transforma el paso de navegación:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
Cuando ejecutas el complemento con los flujos de usuarios, la línea de navegación se traduce a await browser.url(‘https://coffee-cart.netlify.app/’).
Personaliza la experiencia de reproducción de Herramientas para desarrolladores
Las extensiones de reproducción ofrecen una manera de volver a reproducir grabaciones con infraestructura y servicios de terceros, todo sin salir de la grabadora de Herramientas para desarrolladores.
Para crear tu propia extensión de repetición, consulta la documentación sobre la extensión de reproducción y revisa una extensión de ejemplo para obtener orientación.
Publica extensiones de Chrome
Una vez que personalices y transformes los flujos de usuarios, puedes empaquetarlos como una extensión de Chrome y publicarlos en Chrome Web Store.
Mira esta demostración y las instrucciones para aprender a depurar de forma local y publicar una extensión de Chrome.
Integra en tu canalización de CI/CD
Existen varias maneras de hacerlo, y existen muchas herramientas. Este es un ejemplo de cómo automatizar este proceso con Acciones de GitHub:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
En este ejemplo, volveremos a reproducir los flujos de usuarios cuando:
- los nuevos cambios se envían a la rama
main - todos los días a las 12:30 p.m.
Además de GitHub Actions, también puedes integrarlo a tus proveedores de servicios en la nube favoritos. Consulta esta demostración para ver cómo puedes usar el trabajo de Google Cloud Run para ejecutar hasta 10,000 flujos de usuarios en paralelo.
Conclusión
En esta entrada de blog, analizamos las diferentes opciones para exportar flujos de usuarios como archivos JSON, personalizar las repeticiones con PuppeteerReplayExtension, transformar los flujos de usuarios con PuppeteerStringifyExtension y, además, integrarlos en los flujos de trabajo de CI.
Espero que esta entrada de blog te haya dado algunas ideas sobre cómo puedes usar el panel de Grabadora y las herramientas proporcionadas para facilitar la integración de un flujo de trabajo de pruebas en tus proyectos. Estamos ansiosos por ver tus creaciones.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban las API de vanguardia de la plataforma web y te permiten encontrar problemas en tu sitio antes que los usuarios.
Cómo comunicarte con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otro aspecto relacionado con Herramientas para desarrolladores.
- Envíanos una sugerencia o un comentario a través de crbug.com.
- Informa un problema en Herramientas para desarrolladores con Más opciones
> Ayuda > Informar problemas de Herramientas para desarrolladores en esta herramienta. - Envía un tweet a @ChromeDevTools.
- Deje comentarios en las Novedades de los videos de YouTube de Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores los videos de YouTube.