Admitámoslo, la escritura de 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 contamos con pruebas automatizadas en nuestros flujos de trabajo, a largo plazo, todo puede generar errores. Por lo tanto, también creemos que es importante escribir pruebas automatizadas.
Con el panel 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 e integrarlos a tus flujos de trabajo existentes.
En esta entrada de blog, hablaremos de lo siguiente:
- Cómo exportar y volver a reproducir 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 instructivo introductorio y la guía en video para comenzar.
Exporta flujos de usuarios y vuelve a reproducirlos 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 como un archivo JSON simple.
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 bien usar bibliotecas externas para volver a reproducirlos. Puppeteer Replay es una de las que están disponibles.
Vuelve a jugar con Puppeteer
Sigue las instrucciones del repositorio para instalar Puppeteer Replay.
Supongamos que guardas los flujos de usuarios 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 en 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, los flujos del usuario se vuelven a reproducir sin la 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
Vuelve a reproducir contenido con bibliotecas de terceros
Existen algunas bibliotecas de terceros que puedes usar para volver a reproducirlas más allá del navegador Chrome. Aquí está la lista completa de bibliotecas.
Por ejemplo, TestCafe es un framework de pruebas de extremo a extremo. Es compatible con la reproducción de flujos de usuarios JSON en 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 reproducción de flujos de usuarios JSON con diferentes navegadores y versiones en la nube.
Este es un ejemplo de archivo de configuración 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 los 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 en tus aplicaciones. Sin embargo, escribir esos guiones a veces puede ser desafiante.
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, entre otras. Aquí está la lista completa. Esto podría ayudarte a ti y a tu equipo a comenzar a escribir pruebas más rápido.
Transforma a diferentes secuencias de comandos de prueba de manera programática
Además de las extensiones, la mayoría de estos proveedores de prueba también publican bibliotecas para ayudarte a convertir varios flujos de usuarios JSON de manera programática.
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
Vuelve a reproducir flujos de usuarios con extensiones
A partir de Chrome 112, puedes mejorar tu experiencia usando extensiones para volver a reproducir grabaciones. Estas extensiones te permiten integrar sin problemas infraestructura y servicios de terceros para reproducir grabaciones sin salir de Herramientas para desarrolladores.
Para comenzar, explore la lista de extensiones disponibles o obtenga información sobre cómo crear su propia extensión personalizada.
Compila 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 flujos de usuarios, Puppeteer Replay ofrece APIs que te permiten personalizar o transformar los flujos de usuarios.
Personaliza la reproducción de flujos de usuarios
Compilemos un complemento de captura de pantalla. Para cada flujo de usuarios, queremos lo siguiente:
- Para tomar una captura de pantalla al final de cada paso y guardarla en la carpeta
_screenshots. - Para 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 probarla.
/* 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 para registrar un mensaje después de todos los pasos.
Guarda el archivo. Luego, podremos ejecutar flujos de usuarios con esta extensión a través del 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.
Transforma los flujos de usuarios
Otra forma de personalizar el flujo de usuarios es transformarlo en diferentes formatos (por ejemplo, secuencias de comandos de prueba de Cypress o de Nightwatch).
Por ejemplo, tu flujo de usuarios contiene un paso para navegar a una URL. El archivo JSON se ve de la siguiente manera:
{
"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 consultar 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 del usuario, la línea de navegación se traduce en await browser.url(‘https://coffee-cart.netlify.app/’).
Personaliza la experiencia de reproducción de Herramientas para desarrolladores
Las extensiones de reproducción proporcionan una manera de 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 reproducció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 personalizas y transformas los flujos de usuarios, puedes empaquetarlos como una extensión de Chrome y publicar 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.
Integración en tu canalización de CI/CD
Existen muchas formas de hacerlo, y existen muchas herramientas disponibles. 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 del usuario en las siguientes situaciones:
- los cambios nuevos se envían a la rama
main - todos los días a las 12:30 p.m.
Además de GitHub Actions, puedes realizar la integración con tus proveedores de servicios en la nube favoritos. Ve a 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 e integrarlos en tus flujos de trabajo de CI.
Espero que esta entrada de blog te haya dado algunas ideas sobre cómo puedes usar el panel Grabadora y las herramientas proporcionadas para facilitar la integración de un flujo de trabajo de prueba en tus proyectos. Estoy ansiosa por ver lo que crearás.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.
Comunicarse 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 otra cosa relacionada con Herramientas para desarrolladores.
- Para enviarnos sugerencias o comentarios, accede a crbug.com.
- Para informar un problema de Herramientas para desarrolladores, use Más opciones
> Ayuda > Informar problemas de Herramientas para desarrolladores en Herramientas para desarrolladores. - Twittea a @ChromeDevTools.
- Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.