Pruebas de navegador sin cabeza: ¿Cómo hacerlo con Puppeteer y Browserless?

¿Qué es la prueba de navegador sin cabeza?

Las pruebas de navegador sin cabeza generalmente se refieren a un objeto o cosa sin cabeza, y en el contexto de un navegador, se refiere a una simulación de navegador sin interfaz de usuario. La automatización del navegador sin cabeza utiliza un navegador web para pruebas de extremo a extremo sin cargar la interfaz de usuario del navegador.

• El modo sin cabeza es una característica que permite la ejecución de una versión completa de un navegador mientras se controla mediante programación.
• Se ejecutan a través de una interfaz de línea de comandos o utilizando la comunicación de red. Esto significa que se puede utilizar en un servidor sin gráficos o una pantalla, ¡y las pruebas de Selenium seguirán ejecutándose!
• Cuando la página web no se renderiza en la pantalla y las pruebas se ejecutan sin interacción de la interfaz de usuario, la velocidad de ejecución es más rápida que la automatización del navegador real.

Funciones de Puppeteer

Algunas de las características principales de Puppeteer incluyen:

1. Navegación sin cabeza: Puppeteer puede controlar una versión sin cabeza de Chrome o Chromium, lo que significa que el navegador puede ejecutarse sin una interfaz gráfica de usuario (GUI). Esto le permite realizar tareas de fondo y automatización de manera eficiente.
2. Tareas automatizadas: Puppeteer le permite simular interacciones del usuario, como navegar por páginas, hacer clic en botones, completar formularios, etc. También puede acceder automáticamente a páginas web y extraer datos, lo que es adecuado para la recopilación y el análisis de datos.
3. Manipulación de páginas: Puede modificar el contenido de la página web inyectando código JavaScript, cambiando los estilos y manipulando DOM (Modelo de objeto de documento).
4. Generación de capturas de pantalla y PDF: Puppeteer puede capturar o exportar páginas web al formato PDF. Esto es muy útil para crear informes y documentos visuales.
5. Monitoreo de red: Puppeteer puede interceptar y modificar las solicitudes y respuestas de red para la depuración o la prueba de diferentes escenarios de red.
6. Análisis de rendimiento: Obtenga indicadores de rendimiento como el tiempo de carga de la página y el uso de recursos para ayudar a optimizar el rendimiento de la página web.
7. Web Scraping: Puppeteer se utiliza a menudo para tareas de web scraping porque puede interactuar con los sitios web como usuarios reales, extrayendo así datos de páginas dinámicas y con gran cantidad de JavaScript.
8. Pruebas: Puppeteer se utiliza a menudo para automatizar las pruebas de extremo a extremo de las aplicaciones web. Puede simular el comportamiento del usuario y las interacciones para garantizar que su aplicación web se ejecute como se espera.
9. Modo sin cabeza y modo de cabeza: Se puede ejecutar en modo sin cabeza o depurar en modo de cabeza, lo que resulta práctico para el desarrollo y las pruebas.

¿Qué significa sin cabeza en Puppeteer?

Puppeteer es una biblioteca de Node.js para controlar los navegadores Chrome o Chromium, principalmente para tareas como pruebas automatizadas, web scraping y generación de PDF. "Sin cabeza" en Puppeteer se refiere a una instancia de navegador que puede ejecutarse sin interfaz de usuario.

En otras palabras, el navegador se ejecuta en segundo plano y no muestra una ventana con la que pueda interactuar visualmente. En cambio, realiza tareas mediante programación y se puede controlar mediante scripts o código.

Puppeteer le permite controlar una instancia de navegador regular con una GUI visible y una instancia de navegador sin cabeza. El modo sin cabeza es particularmente útil para tareas como web scraping, pruebas automatizadas y generación de capturas de pantalla o PDF, ya que permite realizar estas tareas de manera eficiente sin que se muestre la ventana del navegador.

Algunos beneficios de usar el modo sin cabeza de Puppeteer:

1. Rendimiento: Los navegadores en modo sin cabeza suelen ejecutarse más rápido que los navegadores gráficos porque no tienen que renderizar y mostrar los elementos visuales de una página web.
2. Eficiencia de recursos: Como no se muestra ninguna interfaz gráfica de usuario, los navegadores sin cabeza ocupan menos memoria y recursos de CPU que ejecutar un navegador completo con una GUI, lo que los hace adecuados para ejecutar en un servidor o en un entorno CI/CD.
3. Tareas en segundo plano: Los navegadores sin cabeza son muy adecuados para tareas automatizadas que no requieren interacción del usuario o retroalimentación visual, como web scraping y pruebas automatizadas.
4. Operaciones del lado del servidor: Los navegadores sin cabeza se pueden utilizar en entornos de servidor para automatizar tareas sin una pantalla física.
5. Automatización: Se pueden escribir scripts para simular operaciones del navegador del usuario, como clics, entrada, capturas de pantalla, etc., sin intervención manual.

Los navegadores sin cabeza son particularmente poderosos para las tareas que requieren interacción automatizada con sitios web, extracción de datos, pruebas y otras operaciones que no requieren renderizado visual.

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

¿Cómo realizar pruebas de navegador sin cabeza con Puppeteer y Browserless?

¡Averigüémoslo en el siguiente contenido!

Ejecución de pruebas sin cabeza en Puppeteer con Browserless

Inicializar el entorno

Antes de realizar las pruebas, necesitamos tener un servicio Browserless. Browserless puede ayudarnos a resolver tareas complejas de rastreo web y automatización a gran escala. Con la implementación en la nube de logros completamente administrados, Browserless tiene una función más poderosa.

Browserless adopta una estrategia centrada en el navegador, proporciona potentes capacidades de implementación sin cabeza y ofrece mayor rendimiento y confiabilidad. Por favor, haga clic aquí para obtener más información sobre la configuración del servicio Browserless.

• Primero necesitamos obtener la API KEY de Nstbrowser. Puede ir a la página del menú Browserless del cliente Nstbrowser, o simplemente haga clic aquí para acceder:

Determinar el objetivo del caso de prueba

Después de completar la inicialización del entorno, debemos determinar el objetivo de nuestra prueba.

Solo aprenderemos un ejemplo de cómo usar Puppeteer con Browserless sin páginas web específicas. Especifique la muestra a sus sitios web y requisitos de destino.

Aquí, usemos Puppeteer para obtener el título de la página y crear una captura de pantalla. Después de eso, lo combinaremos con Jest para escribir casos de prueba.

Los siguientes son nuestros principales contenidos de prueba:

1. Si el título de la página es el título objetivo
2. Si la captura de pantalla contiene el elemento objetivo

Inicialización del proyecto

A continuación, siga los pasos que se indican a continuación para instalar Puppeteer y ejecutar el script de prueba:

Paso 1: Cree una nueva carpeta en Vs code

Paso 2: Abra la terminal de Vs code y ejecute los siguientes comandos para instalar las dependencias relacionadas

npm init -y
pnpm add jest jest-html-reporter puppeteer-core

Paso 3: Termine los archivos relacionados

1. Cree el archivo de configuración jest.config.js para realizar la configuración relacionada:

module.exports = {
  testTimeout: 10000, // 10 segundos
  reporters: [
    'default',
    [
      'jest-html-reporter',
      {
        pageTitle: 'Test Report',
        outputPath: './test-report.html',
        includeFailureMsg: true,
        includeConsoleLog: true,
      },
    ],
  ],
};

2. Cree el script de prueba __tests__/puppeteer.spec.js

Para iniciar el navegador, debe pasar la configuración relevante (para una configuración completa, consulte LaunchNewBrowser

const puppeteer = require('puppeteer-core');

describe('My First Puppeteer Test', () => {
  it('should load the page and check the title', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const title = await page.title();
    expect(title).toBe('Example Domain');

    await browser.close();
  });

  // take a screenshot of the page
  it('should take a screenshot of the page', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({ path: 'example.png' });

    await browser.close();
  });
});

async function launchAndConnectToBrowser() {
  const token = ''; // your api token from nstbrowser
  const config = {
    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 = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  return browserWSEndpoint;
}

Ejecutar el proyecto

Ahora solo necesitamos abrir la consola y ejecutar el siguiente comando de script:

npx jest --detectOpenHandles

Los comandos aquí se pueden desglosar principalmente en:

• Utilice el comando npx para ejecutar el comando jest.
• El jest encontrará el archivo de configuración jest.config.js del proyecto actual y obtendrá información básica de configuración.
• De acuerdo con el contenido del archivo de configuración, encuentre el archivo de prueba coincidente en el directorio del proyecto actual y comience a ejecutar.

Salida de resultados

Después de ejecutar el comando anterior, veremos la siguiente salida. Aquí, cada resultado importante del proceso de ejecución de la prueba se mostrará, y nos muestra que nuestro caso de prueba ha pasado.

Al mismo tiempo, podemos abrir el archivo test-report.html para ver el informe específico generado:

La estructura de archivos del proyecto es la siguiente. También podemos ver el contenido del archivo de captura de pantalla de salida, lo que significa que nuestro caso de prueba se ha aprobado completamente.

Beneficios de las pruebas de navegador sin cabeza de Puppeteer

1. Las pruebas de navegador sin cabeza son más rápidas en comparación con los navegadores reales, ya que consumen menos recursos del sistema.
2. Mejora el rendimiento de la ejecución de la prueba, ya que generalmente se ejecuta 2 veces más rápido que las pruebas de navegador reales.
3. Es perfecto para el web scraping. Supongamos que necesita obtener muchos datos (datos deportivos, datos de acciones, etc.) de una página web a través de la automatización de Puppeteer y almacenarlos en cualquier Excel o base de datos. En este caso, el modo sin cabeza de Puppeteer es el mejor, ya que no es necesario iniciar un navegador real para verificar la interfaz de usuario y el enfoque principal está en la obtención de datos.
4. Ayuda a emular varios navegadores en un solo sistema sin sobrecarga de recursos.
5. Es adecuado para pruebas paralelas. Los navegadores basados ​​en la interfaz de usuario consumen mucha memoria y recursos. Por lo tanto, los navegadores sin cabeza de Puppeteer son una mejor opción aquí.

7 mejores prácticas utilizando Puppeteer sin cabeza

1. Gestionar el uso de recursos: dado que Puppeteer en modo sin cabeza se ejecuta sin una interfaz gráfica, es más rápido y utiliza menos recursos. Sin embargo, sigue siendo esencial administrar el uso de memoria y CPU, especialmente cuando se ejecutan varias instancias. Utilice las funciones incorporadas de Puppeteer, como el almacenamiento en caché de páginas y la gestión eficiente de pestañas, para reducir el consumo de recursos.
2. Gestionar los tiempos de espera y las reintentos: el web scraping o las tareas automatizadas pueden encontrar retrasos en la red o tiempos de espera. Establecer valores de tiempo de espera adecuados e implementar una lógica de reintentos garantiza que sus scripts puedan manejar errores intermitentes sin bloquearse.
3. Esperar elementos con prudencia: espere siempre a que se carguen los elementos necesarios antes de realizar acciones. En lugar de usar retrasos estáticos (por ejemplo, page.waitForTimeout), prefiera esperar eventos o elementos específicos (page.waitForSelector), lo que hace que su automatización sea más eficiente y resistente a los tiempos de carga variables.
4. Utilizar contextos de incógnito para el aislamiento: para evitar fugas de datos y garantizar que cada prueba o raspado se ejecute en un entorno limpio, utilice contextos de incógnito (browser.createIncognitoBrowserContext). Esto evita que los datos almacenados en caché, las cookies o el almacenamiento local afecten las sesiones posteriores.
5. Aproveche la omisión de detección sin cabeza: muchos sitios web detectan los navegadores sin cabeza y pueden bloquear o servir contenido limitado a estas solicitudes. El uso de técnicas como la modificación de los indicadores del navegador, la anulación del agente de usuario y la falsificación de funciones web (por ejemplo, eliminación de navigator.webdriver) puede ayudar a evitar la detección sin cabeza.
6. Supervisar el rendimiento y los registros: utilice las herramientas de rendimiento y registro de consola de Puppeteer para depurar y optimizar los scripts. Supervisar las métricas de rendimiento de la página y administrar los registros del navegador puede ayudar a diagnosticar cuellos de botella y otros problemas.
7. Optimizar para la escalabilidad: si planea ejecutar Puppeteer a gran escala, considere la contenedorización con Docker, el uso de equilibradores de carga y la ejecución de varias instancias de navegador en paralelo. Estos pasos ayudan a garantizar la escalabilidad y reducir el tiempo de inactividad en los entornos de producción.

Los puntos finales

El navegador sin cabeza de Puppeteer facilita todo. En este blog, nuestro objetivo es compartir con usted:

• las potentes funciones
• y pasos eficientes para utilizar el modo sin cabeza de Puppeteer con Browserless

Browserless de Nstbrowser simplifica la configuración y el funcionamiento de Puppeteer. Al igual que antes, es hora de llegar a: cómo funciona Browserless con Playwright y Puppeteer.