En Chrome 89, DevTools agrega soporte experimental para autogenerar scripts JS en Puppeteer .
Esquemáticamente, funciona así: abre la página deseada, habilita la grabación de acciones en DevTools y luego hace algo en la página de la manera habitual (haga clic en enlaces y botones, vaya a otras páginas, ingrese texto). A medida que se realizan las acciones, el navegador llena la pestaña DevTools con un archivo de registro virtual con código JS que describe todas las acciones a través de la API Puppeteer. Después de eso, puede detener la grabación y guardar el código resultante como un archivo JS real.
Para demostrar la nueva funcionalidad (llamada Puppeteer Recorder ), los autores prepararon una pequeña página de demostración (aunque puede consultarla en cualquier página, no se requieren condiciones previas del sitio).
Pero primero, dado que esta es todavía una característica experimental temprana (aunque los autores planean desarrollar y expandir Puppeteer Recorder ), debe estar habilitada en la configuración de DevTools, en la pestaña Experimentos, como un elemento de Recorder:
Ahora puede abrir el panel Fuente en DevTools y seleccionar la pestaña Grabaciones que aparece en él:
Agreguemos un nuevo archivo de grabación con el nombre test01.js
:
Y comience a grabar acciones usando el botón Grabar en la parte inferior de la pantalla:
El navegador llena inmediatamente el archivo con el código de inicio y luego complementa el código después de cada una de nuestras acciones en la página:
Después de otro clic en el botón Grabar, el navegador deja de grabar, complementa el código con los corchetes de cierre necesarios y el archivo resultante se puede guardar:
:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://jec.fyi/demo/recorder?");
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.click();
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.type("foo@bar.com");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your name");
await element.type("baz");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form > input[type=number]:nth-child(3)");
await element.type("23");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form");
await element.evaluate(form => form.submit());
}
await browser.close();
})();
Puppeteer Recorder :
( , ) ( , Puppeteer)
( ), ( , , , )
expect-, e2e-
, , Puppeteer Recorder ( ): , Puppeteer Recorder , , ( , Puppeteer). Puppeteer ( Cypress ), Jest , Playwright .
Dado que suele ser caro para los desarrolladores escribir y mantener pruebas de integración (a menudo estas pruebas son menos estables y más complejas que las pruebas unitarias), estas herramientas de prueba autogeneradas pueden ahorrar significativamente tiempo y recursos empresariales.