Automatización de formularios con Puppeteer: entrada de texto, rellenado de formularios y simulación de usuarios

Puppeteer es una biblioteca de Node.js que automatiza navegadores como Chrome, simplificando tareas repetitivas como completar formularios, introducir texto e interactuar con usuarios. Esto es lo que puede hacer con ella:

• Automatizar entradas de formularios: Complete campos de texto, listas desplegables, casillas de verificación e incluso formularios dinámicos.
• Simular escritura humana: Añada retrasos, correcciones y pausas para lograr una entrada más realista.
• Gestionar formularios complejos: Administre selectores de fecha, formularios de varios pasos y validación en tiempo real.
• Interacción del usuario: Simule movimientos del ratón, desplazamiento y navegación.

Beneficios clave:

• Ahorre tiempo reduciendo el trabajo manual hasta en un 50 %.
• Mejore la precisión al eliminar errores humanos.
• Escale los flujos para gestionar varios formularios simultáneamente.
• Reduzca costes al automatizar tareas repetitivas.

Ejemplo rápido:

await page.type('#username', 'exampleUser');
await page.type('#password', 'examplePass');
await page.click('#submit-button');

Tanto si automatiza páginas de inicio de sesión, formularios de varios pasos o contenido dinámico, Puppeteer ofrece las herramientas necesarias para simplificar su flujo. ¿Listo para empezar? Veamos cómo funciona.

sbb-itb-23997f1

Use el navegador headless basado en Puppeteer de Latenode para automatizar envíos de formularios

Latenode ofrece integración directa con un navegador headless basado en Puppeteer para automatizar envíos de formularios, extracción de datos de sitios web, capturas de pantalla y mucho más. Añada código de cualquier complejidad o utilice el asistente de IA para configurar el nodo.

Conéctelo con cualquier modelo de IA, base de datos, sistema CRM y otros servicios para mejorar, ampliar y acelerar sus flujos. No pierda la oportunidad de probar la automatización web low-code en Latenode. Pruebe AHORA el navegador headless listo para usar y olvídese de instalaciones y configuraciones.

Métodos básicos de entrada en formularios

Esta sección explica cómo Puppeteer puede gestionar la entrada de texto y simular la escritura de una forma más humana.

Automatización de campos de texto

Estos son algunos métodos que puede utilizar para automatizar la entrada de texto con Puppeteer:

Por ejemplo, al automatizar un formulario de inicio de sesión como https://the-internet.herokuapp.com/login, puede utilizar el siguiente código:

await page.type('#username', 'tomsmith');
await page.type('#password', 'SuperSecretPassword!');
await page.keyboard.press('Enter');

Para que la entrada parezca más natural, puede añadir retrasos entre pulsaciones de tecla. Encontrará más detalles sobre esto en la siguiente sección.

Añadir patrones de escritura similares a los humanos

Para simular cómo escribe una persona, puede introducir retrasos variables, correcciones y pausas. El plugin puppeteer-extra-plugin-human-typing resulta útil para crear estos efectos.

await page.type('#search-input', 'automation testing', { delay: 100 });

await page.typeHuman('[name="q"]', "¿Está escribiendo un robot ahora mismo?", {
  backspaceMaximumDelayInMs: 1500,
  backspaceMinimumDelayInMs: 750,
  maximumDelayInMs: 650,
  minimumDelayInMs: 150
});

Este método hace que la entrada parezca más natural mediante:

• Ajustar la velocidad de escritura
• Simular correcciones de errores tipográficos
• Añadir pausas entre palabras
• Replicar un comportamiento realista del teclado

Para una interacción aún más realista:

await page.focus('#input-field');
await page.type('#input-field', 'Hola mundo');

Automatización de formularios complejos

Partiendo de la automatización básica de campos de texto, los formularios avanzados, como las listas desplegables, las entradas de fecha y los formularios dinámicos, requieren enfoques específicos. Veamos cómo gestionar estos componentes de forma eficaz.

Menús de selección y controles de entrada

Automatizar listas desplegables, casillas de verificación y botones de opción es sencillo con Puppeteer. Así puede hacerlo:

// Selecting a value from a dropdown
await page.select('#country-select', 'AUS');  // Selects "Australia"

// Interacting with a checkbox
await page.click('#terms-checkbox');

// Selecting a radio button
await page.click('[id=Mortgagees_0__MortgageeType][value=COR]');

"Los localizadores encapsulan la información sobre cómo seleccionar un elemento y permiten que Puppeteer espere automáticamente a que el elemento esté presente en el DOM y en el estado correcto para la acción." [4]

Automatización de entrada de fechas

Los selectores de fecha pueden variar en complejidad. Así puede gestionar tanto campos de fecha simples como campos de solo lectura:

// Typing directly into a simple date input
await page.type("#datepicker", "01/26/2025");

// Modifying a readonly date input
await page.$eval('#txt_FromDateText', el => el.removeAttribute('readonly'));
await page.type('#txt_FromDateText', '03/17/2025');

Para selectores de fecha basados en calendarios:

await page.click('#calendar-trigger'); // Open the calendar
await page.waitForSelector('.calendar-grid'); // Wait for the calendar UI
await page.click(`[data-date="2025-03-17"]`); // Select the desired date

Gestión de formularios dinámicos

Los formularios dinámicos suelen implicar retos como retrasos de carga, campos condicionales y validación en tiempo real. Así puede gestionarlos:

Para campos con validación dinámica:

// Wait for the input field to be ready
await page.waitForSelector('#dynamic-input');

// Enter data and wait for validation to complete
await page.type('#dynamic-input', '[email protected]');
await page.waitForFunction(
  selector => !document.querySelector(selector).classList.contains('error'),
  {},
  '.validation-indicator'
);

La gestión de formularios de varios pasos requiere una navegación cuidadosa:

// Proceed to the next step
await page.click('#next-button');
await page.waitForNavigation();

// Accept confirmation dialogs
page.on('dialog', async dialog => {
  await dialog.accept();
});

Por último, incluya siempre gestión de errores para problemas inesperados:

try {
  await page.waitForSelector('#dynamic-content', { timeout: 5000 });
} catch (error) {
  console.error('Dynamic content failed to load:', error);
}

Simulación de interacción del usuario

Además de la automatización de entradas, simular interacciones completas de usuario mejora la gestión de tareas de envío de formularios. Puppeteer proporciona herramientas para acciones precisas con el ratón y la navegación, por lo que es ideal para gestionar formularios complejos.

Acciones con el ratón y desplazamiento

Así puede simular movimientos realistas del ratón y desplazamiento:

// Hover over an element
await page.hover('#form-element');

// Perform a delayed click
await page.click('#submit-button', { delay: 5000 });

// Smooth scrolling example
await page.evaluate(() => {
    window.scrollTo({ top: 500, behavior: 'smooth' });
});

Para el desplazamiento infinito, controle la altura de la página y cargue contenido dinámicamente:

await page.evaluate(async () => {
    await new Promise((resolve) => {
        let totalHeight = 0;
        const distance = 100;
        const timer = setInterval(() => {
            const scrollHeight = document.body.scrollHeight;
            window.scrollBy(0, distance);
            totalHeight += distance;

            if (totalHeight >= scrollHeight) {
                clearInterval(timer);
                resolve();
            }
        }, 100);
    });
});

Estas técnicas van más allá de las interacciones básicas, especialmente al gestionar formularios de varios pasos que requieren una navegación fluida.

Navegación en formularios de varios pasos

Al automatizar formularios de varios pasos, es esencial gestionar comportamientos similares a los de un usuario. Para el desarrollo, configure el navegador para mostrar su interfaz y ralentizar las operaciones, facilitando así la depuración:

const browser = await puppeteer.launch({
    headless: false,  // Display browser UI during development
    slowMo: 100       // Add a delay of 100ms between actions
});

Introduzca retrasos variables para imitar el comportamiento natural del usuario:

Para producción, cambie al modo headless (headless: true) para mejorar el rendimiento. El ejemplo de automatización SauceDemo muestra la validación de entradas utilizando el selector .error-message-container [1].

Para gestionar diálogos modales o ventanas emergentes, responda según su contenido:

page.on('dialog', async dialog => {
    const message = dialog.message();
    if (message.includes('confirm')) {
        await dialog.accept();
    } else {
        await dialog.dismiss();
    }
});

Estas estrategias garantizan que sus flujos de automatización sean eficientes y realistas.

Directrices para la automatización de formularios

Esta sección amplía los fundamentos de la automatización de formularios y se centra en la gestión de errores y la mejora del rendimiento para garantizar que sus flujos funcionen sin problemas.

Gestión de errores

Utilice bloques try-catch para detectar y gestionar errores de forma eficaz:

try {
    await page.type('#username', 'testuser');
    await page.type('#password', 'password123');
    await page.click('#submit');
} catch (error) {
    console.error(`Form submission failed: ${error.message}`);
    await page.screenshot({ path: `error-${Date.now()}.png` });
}

Valide sus formularios comprobando los mensajes de error y confirmando los envíos correctos:

// Look for error messages
const errorMessage = await page.$('.error-message-container');
if (errorMessage) {
    const text = await page.evaluate(el => el.textContent, errorMessage);
    throw new Error(`Validation failed: ${text}`);
}

// Confirm successful submission
const success = await page.waitForSelector('.success-message', { timeout: 5000 })
    .catch(() => false);
if (!success) {
    throw new Error('Form submission timeout');
}

Establezca tiempos de espera para evitar que su script quede bloqueado indefinidamente:

await page.setDefaultNavigationTimeout(30000);
await page.setDefaultTimeout(20000);

Ahora, veamos cómo mejorar el rendimiento para lograr una automatización más rápida y eficiente.

Consejos de rendimiento

Optimice sus scripts de automatización con estas técnicas:

Por ejemplo, DataScrape Solutions aplicó estas estrategias y redujo el tiempo de procesamiento de 50.000 envíos de formularios de 7.500 minutos a 5.833 minutos, una mejora del 22 % [6].

Esta es una configuración de producción de ejemplo:

const browser = await puppeteer.launch({
    headless: "new",
    args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-sandbox'
    ]
});

// Block unnecessary resources
await page.setRequestInterception(true);
page.on('request', request => {
    if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
        request.abort();
    } else {
        request.continue();
    }
});

La ejecución en modo headless también puede acelerar significativamente el proceso: pruebas que tardaban 5 segundos se completaron en solo 3 segundos, una mejora del 40 % [7].

"Dominar la gestión de errores no solo fue beneficioso: fue esencial para crear flujos de automatización eficientes y fiables." - Nathan, OneQuery [5]

Por último, para formularios dinámicos, utilice estrategias de espera inteligentes para gestionar comportamientos impredecibles:

// Wait for network activity to settle
await page.waitForNavigation({ 
    waitUntil: 'networkidle0',
    timeout: 30000 
});

// Ensure the element is visible before interacting
await page.waitForSelector('#submit-button', {
    visible: true,
    timeout: 5000
});

Resumen y próximos pasos

Puppeteer simplifica la automatización de formularios y reduce drásticamente el trabajo manual [3]. Así puede integrar Puppeteer en sus flujos:

Estos métodos pueden ayudarle a pasar de una automatización básica a una configuración de Puppeteer totalmente integrada.

"Puppeteer es más que una herramienta: es una puerta de acceso a la eficiencia empresarial. Al automatizar tareas repetitivas, optimizar flujos y recopilar datos en tiempo real, las empresas pueden mantenerse a la vanguardia en el competitivo entorno actual." [3]

Para aprovechar las ventajas descritas anteriormente, explore estas opciones de integración:

• Soluciones low-code: Latenode hace que la automatización serverless con Puppeteer sea accesible sin necesidad de programación. Por ejemplo, puede diseñar flujos para guardar capturas de URL como PDF y cargarlas automáticamente en buckets de AWS S3 [8].
• Funciones avanzadas: Utilice plugins de Puppeteer Extra para tareas como la navegación anónima [2]. Para desafíos CAPTCHA, servicios como 2Captcha pueden ayudar a garantizar una automatización fluida [1].
• Integración empresarial: Organizaciones como TaskUs han incorporado Puppeteer con éxito en sus operaciones. Como explica Manish Pandya, vicepresidente sénior de Digital en TaskUs:

"TaskUs aprovecha PixieBrix para ofrecer a nuestros clientes la flexibilidad necesaria para mejorar las experiencias de usuario y los flujos. Es un facilitador clave para hacer realidad nuestra visión." [9]

Para una automatización de formularios fiable, priorice una gestión sólida de errores, estrategias de espera inteligentes y una supervisión constante.