Site icon Consejos WEB

Utilizando Node.js, Playwright y Chromium para Navegar en la Web Automáticamente

Mario Izquierdo

La automatización de navegación web es esencial para tareas como pruebas automatizadas, recopilación de datos, interacciones automáticas con sitios web y más. En este artículo, se explica cómo usar Node.js, Playwright y Chromium para crear scripts de navegación que permiten controlar el navegador de manera programática y simular la experiencia de un usuario real.

¿Qué es Playwright?

Playwright es una biblioteca de automatización de navegadores de código abierto desarrollada por Microsoft. Su versatilidad permite controlar navegadores populares como Chromium, Firefox y WebKit. A diferencia de otras bibliotecas de automatización, como Selenium, Playwright es conocido por su facilidad de configuración, soporte para múltiples navegadores, manejo avanzado de contexto y capacidades para trabajar con aplicaciones dinámicas que usan JavaScript.

Requisitos Previos

Para seguir este tutorial, es importante contar con:

Para verificar si Node.js está instalado hay que ejecutar el siguiente comando:

node -v

Si no tienes Node.js instalado, puedes hacerlo ejecutando:

# En Ubuntu o Debian:
sudo apt update
sudo apt install nodejs npm

Una vez que tienes Node.js, puedes instalar Playwright directamente:

npm install @playwright/test

Al instalar Playwright, se descargan automáticamente los navegadores necesarios, incluyendo Chromium.

Creando un Script Básico de Navegación

Con Playwright y Node.js instalados, ahora estamos listos para escribir un script que navegue automáticamente a una página web.

Ejemplo: Navegar y Tomar Captura de Pantalla

Vamos a crear un archivo llamado browser.js con el siguiente código:

const { chromium } = require('@playwright/test');

const ua = [
  ["Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 Firefox/47.0", "1920x1080"],
  ["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36", "1920x1080"],
  ["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36", "1920x1080"],
  ["Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62", "1920x1080"],
  ["Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Mobile/15E148 Safari/604.1", "1920x1080"],
  ["Mozilla/5.0 (Linux; U; Android 6.0; zh-cn; Build/MRA58K ) AppleWebKit/534.30 (KHTML,like Gecko) Version/6.0 Mobile Safari/534.30 GIONEE-GN5005/Phone RV/5.0.16 GNBR/5.2.0.bp Id/", "720x1280"],
  ["Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148", "430x932"],
  ["Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17", "360x640"],
  ["Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1", "390x844"],
  ["Mozilla/5.0 (Linux; Android 12; SM-S906N Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/80.0.3987.119 Mobile Safari/537.36", "412x915"],
  ["Mozilla/5.0 (Linux; Android 13; SM-G781B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.63 Mobile Safari/537.36 ABB/3.2.6", "412x914"],
  ["Mozilla/5.0 (Linux; Android 13; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Mobile Safari/537.36", "412x915"]
];

const resolutions = [
  { width: 360, height: 640 },
  { width: 375, height: 667 },
  { width: 414, height: 896 },
  { width: 360, height: 780 },
  { width: 1920, height: 1080 }
];

const refurls = [
  "http://www.google.com",
  "http://www.bing.com/",
  "https://www.facebook.com/"
];

(async () => {
  // Lanzamos una instancia de Chromium
  const browser = await chromium.launch({
    executablePath: '/usr/share/chromium-110/chrome', // specify your Chromium path here
    headless: true,
    args: [`--window-size=${randomResolution.width},${randomResolution.height}`]
  });

  const randomResolution = resolutions[Math.floor(Math.random() * resolutions.length)];
  const randomUserAgent = ua[Math.floor(Math.random() * ua.length)];
  
  // Creamos un nuevo contexto de navegador
  const context = await browser.newContext({
      viewport: { width: randomResolution.width, height: randomResolution.height },
      userAgent: randomUserAgent[0],
      extraHTTPHeaders: {
         referer: randomUrl
      }
    });

  // Abrimos una nueva página en el navegador
  const page = await context.newPage();

  // Navegamos a una URL específica
  await page.goto('https://www.example.com');
  
  // Tomamos una captura de pantalla de la página
  await page.screenshot({ path: 'example.png' });

  console.log("Captura de pantalla guardada como example.png");

  // Cerramos el navegador
  await browser.close();
})();

Este script realiza las siguientes acciones:

  1. Lanza Chromium en modo sin cabeza (sin interfaz gráfica).
  2. Crea una nueva página en el navegador.
  3. Navega a una URL (en este caso, https://www.example.com).
  4. Toma una captura de pantalla de la página y la guarda como example.png.
  5. Cierra el navegador.

Ejecutando el Script

Para ejecutar el script, simplemente usa el siguiente comando:

Para ejecutar el script, simplemente usa el siguiente comando:

Si todo funciona correctamente, el script creará una captura de pantalla llamada example.png en el mismo directorio.

Configurando un User-Agent y un Referer

Para simular la navegación de diferentes usuarios, es útil configurar un User-Agent y un Referer. Esto se hace al crear el contexto de navegación:

const context = await browser.newContext({
  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
  referer: 'https://www.google.com'
});

Navegación y Selección de Elementos

Playwright permite realizar interacciones complejas con la página, como hacer clic en botones, completar formularios y esperar a que aparezcan elementos específicos en la página.

Ejemplo: Completar un Formulario y Enviar

Supongamos que tenemos una página con un campo de búsqueda que queremos completar y enviar:

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.example.com');
  
  // Esperamos el selector del campo de búsqueda e ingresamos un término
  await page.fill('input[name="q"]', 'Playwright');

  // Enviamos el formulario
  await page.press('input[name="q"]', 'Enter');

  console.log("Formulario de búsqueda enviado");

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

Este script:

  1. Espera hasta que el campo de búsqueda esté disponible.
  2. Rellena el campo con el texto “Playwright”.
  3. Envía el formulario simulando la pulsación de “Enter”.

Iterar Varias Sesiones con Parámetros Aleatorios

Para simular múltiples sesiones con diferentes configuraciones, podemos crear un bucle que cambie el User-Agent, el Referer y la URL en cada iteración. Aquí hay un ejemplo básico:

const { chromium } = require('@playwright/test');

const urls = [
  'https://www.example1.com',
  'https://www.example2.com',
  'https://www.example3.com'
];

const userAgents = [
  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/91.0",
  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15) AppleWebKit/605.1 Safari/537.36",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 15_5) AppleWebKit/605.1.15 Safari/604.1"
];

const referers = [
  'https://www.google.com',
  'https://www.bing.com',
  'https://www.yahoo.com'
];

(async () => {
  const browser = await chromium.launch({ headless: true });

  for (let i = 0; i < 10; i++) {
    const randomUrl = urls[Math.floor(Math.random() * urls.length)];
    const randomUserAgent = userAgents[Math.floor(Math.random() * userAgents.length)];
    const randomReferer = referers[Math.floor(Math.random() * referers.length)];

    const context = await browser.newContext({
      userAgent: randomUserAgent,
      referer: randomReferer
    });

    const page = await context.newPage();
    await page.goto(randomUrl);
    console.log(`Navegando a ${randomUrl} con User-Agent ${randomUserAgent} y Referer ${randomReferer}`);

    await page.waitForTimeout(3000);  // Espera 3 segundos
    await context.close();
  }

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

Este script se conecta a 10 sesiones con configuraciones distintas, cambiando URL, User-Agent y Referer aleatoriamente para simular diferentes usuarios.

Exit mobile version