Cómo ejecutar pruebas automatizadas con Puppeteer y Browserless?

Puppeteer: ¿Qué es y cuáles son sus características?

Puppeteer es una biblioteca de Node.js. Con Puppeteer, puedes probar tus sitios web en todos los navegadores basados en Chromium, incluidos Chrome, Microsoft Edge Chrome y Chromium. Además, Puppeteer se puede utilizar para web scraping, automatización y pruebas.

Como Puppeteer solo se comunica a través del protocolo DevTools, solo se admiten los navegadores que implementan este protocolo. Por lo tanto, Safari (WebKit), Firefox e IE aún no son compatibles.

¿Qué son las pruebas de navegador sin cabeza?

Las pruebas de navegador sin cabeza permiten que las páginas web se controlen automáticamente sin el uso de una interfaz gráfica de usuario (GUI).

Esto permite que los probadores, usuarios, equipos de control de calidad o desarrolladores realicen pruebas automatizadas en aplicaciones web sin interactuar manualmente con el navegador que se ve en una pantalla.

En esencia, las pruebas de navegador sin cabeza funcionan de esa manera, aunque generalmente se realizan a través de un script simple. Acelera el proceso de prueba y brinda retroalimentación rápida durante el desarrollo.

¿Qué es Browserless?

Browserless es una poderosa solución basada en la nube para la automatización fluida de navegadores, web scraping y pruebas. Aprovecha la biblioteca de huellas digitales avanzada de Nstbrowser para el cambio aleatorio de huellas digitales, asegurando la recopilación de datos y la automatización ininterrumpidas.

Con su sólida infraestructura en la nube, Browserless permite un fácil acceso a múltiples instancias de navegador, simplificando la gestión de las tareas de automatización.

¿Tienes alguna idea maravillosa y dudas sobre web scraping y Browserless?
¡Veamos qué están compartiendo otros desarrolladores en Discord y Telegram!

¿Por qué Puppeteer es mejor que otras plataformas de prueba similares?

• Conjunto de características potentes: Puppeteer proporciona un control total sobre los navegadores Chrome y Chromium, admitiendo tareas automatizadas como navegación por páginas, relleno de formularios, capturas de pantalla, generación de PDF, etc. Puede simular operaciones de usuario en el navegador para pruebas altamente complejas.
• Modo sin cabeza: Puppeteer admite el modo de navegador sin cabeza, lo que lo hace más eficiente y liviano al realizar tareas automatizadas en segundo plano, sin cargar una interfaz gráfica, lo que mejora la velocidad y la utilización de los recursos.
• Compatibilidad entre navegadores: Además de Chromium, Puppeteer también admite pruebas entre navegadores a través del protocolo WebDriver, con una fuerte compatibilidad y adaptabilidad a múltiples entornos de navegador.
• Soporte de la comunidad y documentación completa: Puppeteer tiene una comunidad de desarrolladores activa y documentación detallada, lo que permite a los desarrolladores comenzar rápidamente y obtener soporte de la comunidad.
• Integración estrecha con Chrome: La profunda integración de Puppeteer con Chrome/Chromium lo hace sobresalir en tareas de automatización de navegadores, especialmente en el monitoreo del rendimiento de las páginas y la precisión del rastreo.

Pruebas automatizadas de Puppeteer con Browserless

Probemos la función de inicio de sesión del panel de Nstbrowser. Necesitamos

• visitar el Cliente Nstbrowser
• luego completar la cuenta y la contraseña a través del programa de automatización de puppeteer
• y finalmente, haz clic en el botón de inicio de sesión para iniciar sesión

Paso 1: Instala Puppeteer.

Aquí elegimos el puppeteer-core más ligero:

pnpm install puppeteer-core

Paso 2: Obtén tu clave API.

Podemos encontrar tu clave API en el panel de Browserless:

Paso 3: Conéctate a Browserless

import puppeteer from "puppeteer-core";

const token = "your api key";

const config = {
    proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
    // platform: 'windows', // support: windows, mac, linux
    // kernel: 'chromium', // only support: chromium
    // kernelMilestone: '128', // support: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // browser args
    // fingerprint: {
    //     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent supportted since v0.15.0
    // },
};

const query = new URLSearchParams({
  token: token, // required
  config: JSON.stringify(config),
});

const browserWSEndpoint = `https://less.nstbrowser.io/connect?${query.toString()}`;

const getBrowser = async () =>
  puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });

const main = async (req, res) => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.goto("https://app.nstbrowser.io/login");
  } catch (error) {
    console.error(error);
  }
};

main();

Ahora que hemos conectado Browserless y accedido a nuestro sitio web de destino, completemos el flujo de prueba y verifiquemos los resultados tomando capturas de pantalla.

await page.waitForSelector('input');

const inputs = await page.$$('input');

await inputs[0].type('*****', { delay: 100 }); // your email 
await inputs[1].type('*****', { delay: 100 }); // your password

const buttons = await page.$$('button');
await buttons[1].click();

await page.waitForResponse((req) => {
  const url = "https://api.nstbrowser.io/api/v1/passport/login";
  if (req.url() === url) {
    return true;
  }
});

await page.screenshot({ fullPage: true, path: "./nstbrowser.png" });

Podemos ver que hemos iniciado sesión correctamente en Nstbrowser y estamos siendo redirigidos al panel, lo que indica que nuestra prueba ha sido exitosa.

Diferencia entre Puppeteer y otras plataformas

Aquí hay una comparación detallada entre Puppeteer y varias otras plataformas de prueba:

1. Puppeteer vs. WebKit/Blink:

• Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar los navegadores Chrome o Chromium sin cabeza.

• WebKit y Blink son motores de diseño utilizados por los navegadores Safari y Chromium, respectivamente. Son responsables de representar páginas web, mientras que Puppeteer controla el navegador para tareas de automatización.

2. Puppeteer vs. Selenium:

• Puppeteer se comunica directamente con Chrome/Chromium a través del protocolo de depuración, lo que lo integra estrechamente con estos navegadores.

• Selenium usa Chromedriver para administrar y controlar los navegadores, lo que le permite admitir varios navegadores (por ejemplo, Firefox, Safari, Edge). Puppeteer, por otro lado, está enfocado en Chrome/Chromium.

3. Puppeteer vs. PhantomJS:

• Puppeteer es una biblioteca moderna basada en Node.js que controla Chrome/Chromium sin cabeza.

• PhantomJS es un navegador sin cabeza basado en WebKit/Blink. Sin embargo, PhantomJS está desactualizado y ya no se mantiene activamente, lo que hace que Puppeteer sea una opción más confiable y eficiente para la mayoría de las tareas de automatización.

4. Puppeteer vs. Nightmare.js:

• Puppeteer usa el protocolo Chrome DevTools para controlar Chrome/Chromium, lo que le da acceso profundo a la funcionalidad del navegador.

• Nightmare.js es una biblioteca de JavaScript que usa Electron para representar páginas web. Fue creado para facilitar su uso, pero carece del rendimiento y el soporte de navegadores modernos que ofrece Puppeteer.

5. Puppeteer vs. Cypress:

• Puppeteer es una biblioteca de Node.js que automatiza tareas del navegador como web scraping, generación de PDF y captura de pantallas.

• Cypress es un marco de prueba de extremo a extremo basado en JavaScript diseñado para probar aplicaciones web. Proporciona una interfaz fácil de usar para escribir pruebas y maneja operaciones asíncronas automáticamente, lo que lo hace ideal para pruebas de front-end.

Reflexiones finales

Puppeteer es una herramienta poderosa y maravillosa para finalizar las pruebas web. Con Browserless, puedes conducir a Puppeteer para realizar cualquier tarea de automatización.

Espero que este artículo te abra un nuevo mundo de automatización de pruebas de sitios web. Como siempre, asegúrate de consultar el blog de Nstbrowser y los tutoriales de documentación para obtener más contenido emocionante sobre automatización de navegadores web. ¡Feliz codificación!