ACCESIBLES
PRODUCTO
SOLUCIONES
por casos de uso
AI Plomo GestiónFacturaciónRedes socialesGestión de proyectos
Gestión de datos por sector
Más información
BlogPlantillasVideosYouTubeRECURSOS
COMUNIDADES Y REDES SOCIALES
SOCIOS
Titiritero Simplifica la automatización del navegador, ofreciendo potentes herramientas para hacer clic e interactuar con elementos web. Ya sea que se trate de clics básicos, contenido dinámico o elementos complejos como iframes y superposiciones, Titiritero Lo tenemos cubierto. Esto es lo que necesita saber:
page.click()
o la API del localizador para interacciones estándar.Puppeteer garantiza una automatización confiable con funciones como esperas integradas, sombra DOM Soporte y métodos de clic avanzados. Consulte el artículo para obtener ejemplos detallados y consejos para la solución de problemas.
Veamos cómo utilizar la simulación de clics de Puppeteer de forma efectiva, comenzando con algunos ejemplos prácticos.
El page.click()
La función es el método predilecto de Puppeteer para activar eventos de clic. Aquí te explicamos cómo usarla:
// Clicking an element by its selector
await page.click('#submit-button');
// Adding options to your click
await page.click('.menu-item', {
delay: 100, // Adds a delay before the click
button: 'left', // Specifies the mouse button
clickCount: 1, // Number of times to click
timeout: 30000 // Maximum time to wait
});
Para un enfoque más flexible, puede utilizar la API de localización de Puppeteer, introducida en la versión 13.0:
const button = page.getByRole('button', { name: 'Submit' });
await button.click();
Cuando los selectores CSS no satisfacen sus necesidades, considere usar XPath.
XPath puede ser una alternativa poderosa para seleccionar elementos, especialmente cuando los selectores CSS no son suficientes:
// Selecting an element with XPath
const element = await page.$x('//button[contains(text(), "Submit")]');
await element[0].click();
// Combining XPath with waiting
const submitButton = await page.waitForXPath(
'//button[@class="submit-btn"]',
{ visible: true }
);
await submitButton.click();
Después de hacer clic, es posible que necesite gestionar la navegación o las actualizaciones de contenido dinámico. Puppeteer lo simplifica:
// Waiting for a page navigation after a click
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.click('#navigation-link')
]);
// Handling dynamic content loading
await Promise.all([
page.waitForSelector('.new-content'),
page.click('#load-more')
]);
Para aplicaciones de una sola página (SPA), puede supervisar cambios específicos en el estado de la página:
await page.click('#update-button');
await page.waitForFunction(
'document.querySelector(".status").textContent === "Updated"'
);
Estas técnicas le ayudarán a gestionar los clics y sus resultados de forma más efectiva en sus scripts de Puppeteer.
Esta sección profundiza en las técnicas para manejar elementos complicados que no responden a los métodos de clic estándar.
A veces, los elementos quedan ocultos o cubiertos por superposiciones, lo que impide hacer clic en ellos. Aquí te explicamos cómo ajustar sus propiedades para interactuar con ellos:
// Make a hidden element visible before clicking
await page.evaluate(() => {
const button = document.querySelector('#hidden-button');
button.style.display = 'block';
button.scrollIntoView();
});
await page.click('#hidden-button');
// Handle elements blocked by overlays
await page.evaluate(() => {
const overlay = document.querySelector('.modal-overlay');
if (overlay) overlay.remove(); // Remove the overlay
const target = document.querySelector('#target-button');
target.style.zIndex = '9999'; // Bring the target element to the front
});
Para trabajar con elementos que se cargan dinámicamente es necesario esperar hasta que se pueda hacer clic en ellos:
// Wait for a dynamically loaded element to appear and then click
const dynamicElement = await page.waitForSelector('.dynamic-content', {
visible: true,
timeout: 5000
});
await dynamicElement.click();
// Handle elements loaded via AJAX
await Promise.all([
page.waitForResponse(response =>
response.url().includes('/api/data')), // Wait for the AJAX response
page.click('#load-more-button') // Trigger the AJAX call
]);
Interactuar con elementos dentro de iframes o que requieren pasar el cursor por encima puede ser complicado. Aquí te explicamos cómo solucionarlo:
// Click elements within an iframe
const frame = page.frames().find(f =>
f.url().includes('embedded-content'));
await frame.click('.iframe-button');
// Handle hover-triggered interactions
await page.hover('#menu-trigger'); // Hover over the trigger
await page.waitForSelector('.dropdown-content'); // Wait for the dropdown to appear
await page.click('.dropdown-item'); // Click the dropdown item
Para interacciones al pasar el mouse sobre el mouse que revelan contenido adicional:
await page.hover('#interactive-element'); // Hover over the interactive element
await page.waitForFunction(() => {
const element = document.querySelector('.hover-content');
return window.getComputedStyle(element).opacity === '1'; // Wait for the content to become visible
});
await page.click('.hover-content .button'); // Click the revealed button
"Hace clic en el primer elemento encontrado que coincida
selector
." - Documentación del titiritero
Estos métodos te ayudan a interactuar de forma fiable con elementos web complejos, manteniendo tus scripts estables y eficientes. A continuación, abordaremos técnicas avanzadas de clic, como doble clic, clic derecho y arrastrar.
Puppeteer ofrece una variedad de opciones de clic avanzadas que le permiten automatizar acciones complejas del mouse con precisión.
Para realizar dobles clics, puede configurar los ajustes de clic como se muestra a continuación:
// Double-click using page.click()
await page.click('#target-element', { clickCount: 2 });
// Double-click using mouse coordinates
const element = await page.$('#target-element');
const rect = await element.boundingBox();
await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2, {
clickCount: 2,
delay: 100 // Add a delay for stability
});
Para hacer clic con el botón derecho, utilice el 'button'
Opción para especificar la acción:
// Right-click on an element
await page.click('#context-menu-trigger', { button: 'right' });
// Navigate the context menu using keyboard inputs
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
"Cierto, todas esas interacciones se dan a nivel del sistema operativo. Es decir, se encuentran fuera del espacio del navegador/titiritero. No hay solución alternativa, que yo sepa." - ebidel
Además de esto, Puppeteer también admite interacciones de arrastrar y soltar.
Para realizar la función de arrastrar y soltar, coordine varios eventos del mouse para obtener resultados precisos:
// Drag-and-drop example
async function dragAndDrop(page, sourceSelector, targetSelector) {
const source = await page.$(sourceSelector);
const target = await page.$(targetSelector);
const sourceBound = await source.boundingBox();
const targetBound = await target.boundingBox();
await page.mouse.move(
sourceBound.x + sourceBound.width / 2,
sourceBound.y + sourceBound.height / 2
);
await page.mouse.down();
await page.waitForTimeout(100);
await page.mouse.move(
targetBound.x + targetBound.width / 2,
targetBound.y + targetBound.height / 2,
{ steps: 10 }
);
await page.waitForTimeout(100);
await page.mouse.up();
}
Para interacciones más específicas, como controles deslizantes o listas ordenables, puedes enviar eventos de arrastre personalizados:
// Trigger custom drag events
await page.evaluate((sourceSelector) => {
const element = document.querySelector(sourceSelector);
element.dispatchEvent(new MouseEvent('dragstart', {
bubbles: true,
cancelable: true
}));
}, sourceSelector);
Puppeteer también gestiona los clics que activan actualizaciones asincrónicas, como las solicitudes AJAX. Utilice mecanismos de espera adecuados para garantizar la fiabilidad:
// Wait for an AJAX response after a click
await Promise.all([
page.waitForResponse(
response => response.url().includes('/api/endpoint')
),
page.click('#ajax-button')
]);
// Handle multiple AJAX requests simultaneously
const [response1, response2] = await Promise.all([
page.waitForResponse(res => res.url().includes('/api/data1')),
page.waitForResponse(res => res.url().includes('/api/data2')),
page.click('#multi-ajax-trigger')
]);
Para el contenido dinámico cargado a través de AJAX, puede verificar las actualizaciones combinando eventos de clic con verificaciones de contenido:
// Verify dynamic content loaded after clicking
await page.click('#load-more');
await page.waitForFunction(
selector => document.querySelector(selector).children.length > 10,
{},
'.dynamic-content'
);
Estos métodos permiten automatizar interacciones complejas del usuario y al mismo tiempo garantizar la confiabilidad mediante una gestión adecuada de los tiempos y eventos.
Esta sección analiza los errores frecuentes relacionados con los clics en Puppeteer y cómo solucionarlos de manera efectiva.
El error "Elemento no encontrado" ocurre cuando Puppeteer no puede localizar el elemento de destino. Para solucionarlo, intente usar selectores precisos, gestionar elementos Shadow DOM o asegurarse de que los elementos ocultos sean visibles.
// Use specific selectors
const button = await page.waitForSelector('#submit-form-button', {
visible: true,
timeout: 5000
});
// Handle elements inside a Shadow DOM
await page.evaluate((selector) => {
const root = document.querySelector('#shadow-host').shadowRoot;
const element = root.querySelector(selector);
element.click();
}, '#target-button');
// Make hidden elements visible and scroll into view
await page.evaluate((selector) => {
const element = document.querySelector(selector);
element.scrollIntoView();
element.style.display = 'block';
}, '#hidden-element');
Una vez que haya abordado los problemas del selector, los problemas relacionados con el tiempo aún podrían interferir con las operaciones de clic.
Los problemas de sincronización suelen surgir cuando los elementos no están completamente cargados o no son visibles. Aquí te explicamos cómo solucionarlos:
// Wait for navigation and element visibility before clicking
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.waitForSelector('#dynamic-content', { visible: true }),
page.click('#trigger-button')
]);
// Add random delays to simulate real user behavior
const delay = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000;
await page.waitForTimeout(delay);
Estas técnicas ayudan a sincronizar tus acciones con el contenido dinámico de la página.
Las funciones de seguridad del navegador a veces pueden bloquear los clics automáticos. Para evitar estas restricciones, puede usar el modo oculto o las configuraciones seguras de Puppeteer:
// Enable stealth mode with puppeteer-extra
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());
const browser = await puppeteer.launch({
headless: false,
ignoreHTTPSErrors: true,
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-sync',
'--ignore-certificate-errors',
'--lang=en-US,en;q=0.9'
]
});
Para mayor aislamiento y seguridad:
const { launch } = require('secure-puppeteer');
const browser = await launch({
isolateGlobalScope: true,
interceptFetch: true
});
"Cierto, todas esas interacciones se dan a nivel del sistema operativo. Es decir, se encuentran fuera del espacio del navegador/titiritero. No hay solución alternativa, que yo sepa." - ebidel
Configurar correctamente los tiempos de espera y de espera es esencial para garantizar la fiabilidad de las operaciones de clic. A continuación, le mostramos cómo gestionarlos eficazmente:
await page.setDefaultTimeout(60000);
await page.waitForSelector('#loginBtn', {
visible: true,
timeout: 30000
});
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.waitForSelector('#dynamic-content'),
page.click('#trigger-button')
]);
Para el contenido controlado por API, esperar a que la red esté inactiva es crucial:
await Promise.all([
page.waitForNetworkIdle(),
page.click('#fetchUsers')
]);
Si las esperas de clic integradas no satisfacen sus necesidades, los scripts personalizados pueden manejar escenarios más complejos.
En situaciones complejas, utilice page.evaluate()
Para ejecutar scripts de clic personalizados. Aquí hay algunos ejemplos:
const shadowClick = await page.evaluate(() => {
const root = document.querySelector('#shadow-host').shadowRoot;
const button = root.querySelector('#shadow-button');
return button.click();
});
await page.evaluate(() => {
const element = document.querySelector('#obscured-button');
element.style.zIndex = '999999';
element.click();
});
Estos métodos son particularmente útiles para:
Los scripts personalizados como estos pueden manejar casos extremos que los métodos estándar podrían no cubrir.
Después de abordar los desafíos de tiempo e interacción, concéntrese en mejorar la velocidad y la estabilidad para optimizar su automatización:
const delay = Math.floor(Math.random() * (2000 - 500)) + 500;
await page.waitForTimeout(delay);
await page.waitForSelector('#target-button', {
visible: true,
timeout: 5000
});
Para trabajar con iframes:
const frame = page.frames().find(f => f.name() === 'content-frame');
await frame.waitForSelector('#frame-button');
await frame.click('#frame-button');
Para garantizar la confiabilidad:
Estas estrategias ayudan a crear flujos de trabajo de automatización más confiables y eficientes.
Puppeteer simplifica la automatización web con su gama de operaciones de clic, ofreciendo una segmentación precisa y múltiples métodos para gestionar diversas situaciones. A continuación, se presenta un breve resumen de sus capacidades de clic:
Tipo de clic | Método de implementación | Mejor caso de uso |
---|---|---|
Clic básico | page.click('#element') |
Interacciones generales de elementos |
Haga doble clic | page.mouse.dblclick() |
Formularios, selección de texto |
Haga clic en | page.mouse.click(x, y, { button: 'right' }) |
Activación de menús contextuales |
Clic de coordenadas | page.mouse.click(x, y) |
Trabajar con lienzos o mapas |
Estos métodos se integran a la perfección en los flujos de trabajo de automatización, abordando desafíos comunes como la gestión del estado de los elementos y problemas de sincronización. La API Locator de Puppeteer garantiza que los elementos estén presentes y listos antes de la interacción, lo que reduce los fallos de script causados por errores de sincronización.
Para páginas web complejas, Puppeteer admite selectores CSS avanzados, incluidos aquellos para shadow DOM, AIRE atributos y segmentación basada en texto. Esto lo hace especialmente útil para contenido dinámico, superposiciones y estructuras DOM complejas. La combinación de estos selectores con los mecanismos de espera y la gestión de errores de Puppeteer garantiza una automatización fluida y consistente.
"Cierto, todas esas interacciones se dan a nivel del sistema operativo. Es decir, se encuentran fuera del espacio del navegador/titiritero. No hay solución alternativa, que yo sepa." - ebidel