Condiciones de espera personalizadas con waitForFunction en Puppeteer

Quiero tu Titiritero ¿Scripts para gestionar mejor sitios web dinámicos? Aquí está la clave: waitForFunction le permite definir reglas de espera personalizadas para garantizar que su automatización funcione sin problemas con el contenido cambiante.

Por qué usar `waitForFunction`?

Controlar el tiempo:Esperar hasta que se cumplan condiciones específicas (por ejemplo, carga de elementos, cambios de texto).
Manejar contenido dinámico:Perfecto para sitios web modernos y dinámicos.
Evite errores:Evite retrasos innecesarios o interacciones prematuras.

Cómo funciona:

Escribe condiciones de JavaScript que retornen true cuando esté listo.
Utilice opciones como frecuencia de sondeo (raf, mutation, o milisegundos) y tiempos de espera para un mejor rendimiento.
Combine comprobaciones DOM con respuestas API para escenarios avanzados.

Ejemplo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.status'</span>).<span class="hljs-property">textContent</span> === <span class="hljs-string">'Ready'</span>
);

Características Clave:

Supervisar la visibilidad de los elementos, el contenido del texto o las propiedades personalizadas.
Combine múltiples condiciones para flujos de trabajo complejos.
Maneje los tiempos de espera y los errores con elegancia.

Tip: Utilice waitForFunction para reemplazar obsoleto sleep llamadas y mejorar la eficiencia.

Descripción rápida:

Característica	Que hace
Modos de sondeo	Comprueba las condiciones mediante 'raf', 'mutación' o intervalos personalizados
Condiciones personalizadas	Esperar estados DOM específicos o respuestas de API
Gestión del tiempo de espera	Establecer tiempos de espera globales o específicos de la operación

Este método garantiza que sus scripts sean confiables, eficientes y estén listos para cualquier desafío de contenido dinámico.

Cómo esperar/dormir durante N segundos en titiritero?

Conceptos básicos de waitForFunction

La waitForFunction El método de Puppeteer permite configurar condiciones personalizadas para que los scripts esperen antes de continuar. Aquí te explicamos cómo usarlo eficazmente.

Cómo escribir funciones de espera básicas

Aquí hay una forma sencilla de crear una función de espera:

<span class="hljs-comment">// Wait until the input element has a specific value</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-string">'document.getElementById("loginUsername").value === "hello"'</span>
);

<span class="hljs-comment">// Using an arrow function for a condition</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.status'</span>).<span class="hljs-property">textContent</span> === <span class="hljs-string">'Ready'</span>
);

La clave aquí es que su función debe devolver un valor de verdad Antes de que el guión pueda avanzar [ 1 ].

Ahora veamos cómo configurarlo para un mejor rendimiento.

Configuración de parámetros de función

Puedes afinar waitForFunction Pasando un objeto de opciones. Los parámetros clave incluyen:

Parámetro	Descripción	Valores comunes
polling	Con qué frecuencia se verifica la condición	'raf', 'mutación' o milisegundos
tiempo de espera	Tiempo máximo de espera	Predeterminado: 30,000 30 ms (XNUMX segundos)

Modos de sondeo [ 4 ]:

RequestAnimationFrame ('raf')
Ideal para monitorear cambios de estilo, ya que verifica las condiciones durante cada cuadro de animación.
Observador de mutaciones ('mutación')
Útil para rastrear cambios en la estructura del DOM. Activa comprobaciones cada vez que el DOM se actualiza.

Intervalo personalizado (milisegundos)
Por ejemplo, esto comprueba la condición cada segundo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">readyState</span> === <span class="hljs-string">'complete'</span>,
  { <span class="hljs-attr">polling</span>: <span class="hljs-number">1000</span>, <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
);

Elija el modo de votación según sus necesidades:

Usa 'raf' para animaciones o actualizaciones de estilo.
Optar por 'mutation' para cambios relacionados con DOM.
Establezca un intervalo personalizado (milisegundos) para casos de uso más amplios.

Creación de reglas de espera personalizadas

Comprobación del estado de visualización del elemento

Para confirmar que un elemento es visible, puedes comprobar su presencia y dimensiones:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

Esto garantiza que el elemento exista y tenga dimensiones visibles en la página. Es especialmente útil para contenido dinámico Eso tarda tiempo en cargarse correctamente [ 2 ].

Prueba de propiedades de texto y elementos

Además de los controles visuales, puedes supervisar el contenido del texto o propiedades específicas de los elementos:

<span class="hljs-comment">// Wait for specific text content</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function"><span class="hljs-params">selector</span> =></span> {
        <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(selector);
        <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'Ready'</span>);
    },
    {},
    <span class="hljs-string">'.status-message'</span>
);

Para realizar comprobaciones de propiedad más detalladas, pase argumentos adicionales:

<span class="hljs-keyword">const</span> expectedValue = <span class="hljs-string">'completed'</span>;
<span class="hljs-keyword">const</span> selector = <span class="hljs-string">'.status'</span>;

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">(<span class="hljs-params">sel, val</span>) =></span> {
        <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(sel);
        <span class="hljs-keyword">return</span> element && element.<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">'data-state'</span>) === val;
    },
    {},
    selector,
    expectedValue
);

Combinación de múltiples reglas de espera

Una vez que haya probado las condiciones individuales, puede combinarlas para crear escenarios más complejos. Por ejemplo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-comment">// Check multiple elements and conditions</span>
    <span class="hljs-keyword">const</span> button = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.donate-button'</span>);
    <span class="hljs-keyword">const</span> searchBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.search-button'</span>);

    <span class="hljs-keyword">return</span> button && 
           searchBox && 
           button.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && 
           searchBox.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> &&
           !button.<span class="hljs-property">disabled</span>;
});

Para manejar múltiples elementos con condiciones independientes, utilice Promise combinaciones [ 5 ]:

Patrón de espera	Caso de uso	Implementación
Todos los elementos	Espere a que se completen varios elementos requeridos	Promesa.all()
Cualquier elemento	Continuar cuando aparezca el primer elemento	Promesa.race()
Lógica personalizada	Manejar comprobaciones condicionales complejas	Funciones de espera combinadas

Para operaciones asincrónicas, puede crear condiciones de espera avanzadas:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-title function_">async</span> () => {
        <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">'/api/status'</span>);
        <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
        <span class="hljs-keyword">return</span> data.<span class="hljs-property">isReady</span> && <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.content'</span>).<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span>;
    },
    { <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span> }
);

Este método combina Validación de respuesta de API con Comprobaciones de elementos DOM, asegurando que tanto los datos como el contenido visual estén listos [ 1 ].

sbb-itb-23997f1

Métodos avanzados de waitForFunction

Escritura de condiciones complejas en JavaScript

Para aplicaciones web más dinámicas, puede utilizar esperarFunción Para crear condiciones detalladas de JavaScript. Aquí tienes un ejemplo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">(<span class="hljs-params">threshold</span>) =></span> {
        <span class="hljs-keyword">const</span> chart = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.tv-lightweight-charts'</span>);
        <span class="hljs-keyword">const</span> dataPoints = chart?.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.data-point'</span>);

        <span class="hljs-keyword">return</span> chart && 
               dataPoints?.<span class="hljs-property">length</span> > threshold && 
               <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(dataPoints).<span class="hljs-title function_">every</span>(<span class="hljs-function"><span class="hljs-params">point</span> =></span> 
                   point.<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span> > <span class="hljs-number">0</span> &&
                   !point.<span class="hljs-property">classList</span>.<span class="hljs-title function_">contains</span>(<span class="hljs-string">'loading'</span>)
               );
    },
    { <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span> },
    <span class="hljs-number">5</span>
);

Este script asegura:

El contenedor del gráfico existe.
Hay un número mínimo de puntos de datos.
Todos los puntos de datos son visibles.
Ninguno de los puntos está en estado de carga.

También puedes combinar comprobaciones asincrónicas con evaluaciones DOM para escenarios más complejos:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-title function_">async</span> () => {
        <span class="hljs-comment">// Check if the container is ready</span>
        <span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-content'</span>);
        <span class="hljs-keyword">if</span> (!container || container.<span class="hljs-property">offsetHeight</span> === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

        <span class="hljs-comment">// Validate API response</span>
        <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">'/api/status'</span>);
            <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
            <span class="hljs-keyword">return</span> data.<span class="hljs-property">isReady</span> && container.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
        } <span class="hljs-keyword">catch</span> {
            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
    },
    { 
        <span class="hljs-attr">polling</span>: <span class="hljs-string">'raf'</span>,
        <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
    }
);

Este enfoque combina comprobaciones DOM con una llamada API para garantizar que tanto la interfaz de usuario como el backend estén sincronizados.

Manejo de tiempos de espera y errores

La gestión del tiempo de espera es crucial cuando se trabaja con esperarFunciónA continuación, se muestra un ejemplo de cómo gestionar los tiempos de espera de forma eficaz:

<span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// Set a global timeout of 60 seconds</span>

    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
        <span class="hljs-function">() =></span> {
            <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-element'</span>);
            <span class="hljs-keyword">return</span> element?.<span class="hljs-property">complete</span> === <span class="hljs-literal">true</span>;
        },
        {
            <span class="hljs-attr">timeout</span>: <span class="hljs-number">45000</span>, <span class="hljs-comment">// Specific timeout for this operation</span>
            <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span>
        }
    );
} <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-keyword">if</span> (error.<span class="hljs-property">name</span> === <span class="hljs-string">'TimeoutError'</span>) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Element state check timed out:'</span>, error.<span class="hljs-property">message</span>);
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">reload</span>(); <span class="hljs-comment">// Reload page as a fallback</span>
    }
    <span class="hljs-keyword">throw</span> error;
}

A continuación se presenta una descripción general rápida de las estrategias de tiempo de espera:

Estrategia de tiempo de espera	Caso de uso	Configuration
Tiempo de espera predeterminado	Operaciones generales	página.setDefaultTimeout()
Tiempo de espera de navegación	Carga de página	página.setDefaultNavigationTimeout()
Específico de la operación	Comprobaciones detalladas	Utilice la opción de tiempo de espera en el método
Espera infinita	Retrasos conocidos	tiempo de espera: 0

Para mejorar el manejo de errores:

Ajuste la configuración de tiempo de espera según la complejidad de cada operación.
Usa try-catch bloques para recuperarse con gracia de los errores.
Supervisar la actividad de la red para identificar cuellos de botella.
Implementar acciones de respaldo, como recargar la página, cuando se producen tiempos de espera.
Verifique dos veces los selectores para evitar retrasos innecesarios.

Estas prácticas ayudarán a garantizar que sus scripts sean confiables y eficientes.

Hacer que waitForFunction se ejecute más rápido

Consejos sobre velocidad y recursos

Para obtener esperarFunción Para una mayor eficiencia, concéntrese en estrategias de espera inteligentes y una gestión adecuada de los recursos. Utilice las herramientas de desarrollo del navegador para medir los tiempos de carga y establecer tiempos de espera precisos.

<span class="hljs-comment">// Optimize waiting with a networkidle strategy</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
    <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle2'</span>,
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});

<span class="hljs-comment">// Combine checks in a single evaluate call</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-content'</span>);
    <span class="hljs-keyword">const</span> isVisible = element?.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> hasData = element?.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">return</span> isVisible && hasData;
});

Para reducir el uso de recursos:

Bloquea activos innecesarios como imágenes o fuentes.
Usa waitForSelector or waitForFunction En lugar de obsoleto waitForTimeout.
Combine varios cheques en uno solo evaluate Llamada para reducir la comunicación entre el navegador y el nodo.

Estrategia	Impacto en el rendimiento	Mejor caso de uso
red inactiva2	Moderada	Navegación de página
esperarAlSelector	Rápido	Comprobaciones de elementos individuales
esperarFunción	Variable	Condiciones complejas
Evaluación combinada	Empresarial	Comprobaciones de elementos múltiples

Estos métodos pueden ayudar a abordar cuellos de botella comunes, que se tratan en la siguiente sección.

Solucionar problemas comunes

Los problemas de rendimiento suelen deberse a patrones de espera ineficientes. A continuación, se explica cómo solucionarlos:

Problemas con el selector
Los selectores demasiado rígidos pueden provocar fallos. Simplifíquelos para una mayor fiabilidad:

<span class="hljs-comment">// Avoid rigid selectors like this</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'div.container > div:nth-child(2) > span.text-red'</span>);

<span class="hljs-comment">// Use a more flexible approach</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.text-red'</span>)?.<span class="hljs-property">offsetParent</span> !== <span class="hljs-literal">null</span>
);

Gestión de Recursos
Gestione los recursos y evite retrasos innecesarios:

<span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
        <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">readyState</span> === <span class="hljs-string">'complete'</span> &&
              performance.<span class="hljs-title function_">now</span>() > <span class="hljs-number">1000</span>
    );
} <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page load timeout:'</span>, error.<span class="hljs-property">message</span>);
}

"Puppeteer tiene una arquitectura basada en eventos, lo que elimina muchas posibles fallas. No hay necesidad de maldad. sleep[undefined] llamadas en los guiones de titiritero." - Léame de Puppeteer [ 6 ]

Envuelva siempre los métodos de espera en try...catch Bloques para gestionar errores con elegancia y ofrecer opciones de respaldo. Este enfoque garantiza la robustez y fiabilidad de sus scripts.

Usos comunes de las reglas de espera personalizadas

Carga de productos de la tienda en línea

Asegurarse de que los productos se carguen correctamente es fundamental para recopilar datos precisos. Utilice una regla de espera personalizada para pausar la ejecución hasta que los productos se hayan cargado por completo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> products = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-card'</span>);
    <span class="hljs-keyword">return</span> products.<span class="hljs-property">length</span> > <span class="hljs-number">0</span> && all images and prices fully load;
});

Para mayor precisión, puede utilizar este enfoque:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> productDetails = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.product-details'</span>);
    <span class="hljs-keyword">return</span> productDetails && 
           productDetails.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && 
           productDetails.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.inventory-status'</span>) !== <span class="hljs-literal">null</span>;
}, {<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>});

Esto garantiza que su script espere a que se carguen todos los elementos necesarios, mejorando la confiabilidad de la recopilación de datos en escenarios de comercio electrónico.

Carga de contenido en aplicaciones web modernas

Las aplicaciones web dinámicas suelen requerir condiciones de espera específicas para gestionar la carga de contenido. Por ejemplo, puedes esperar a que un elemento específico sea completamente visible:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

Si es necesario cargar varias secciones, combine condiciones de la siguiente manera:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> contentLoaded = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.content'</span>).<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> dataUpdated = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'Last updated:'</span>);
    <span class="hljs-keyword">return</span> contentLoaded && dataUpdated;
}, {<span class="hljs-attr">polling</span>: <span class="hljs-number">1000</span>});

Este método ayuda a garantizar que sus scripts de automatización interactúen sin problemas con el contenido dinámico.

Detección de mensajes de error de formulario

La detección de errores de formulario utiliza una lógica similar a la de las comprobaciones de visibilidad de elementos. Así es como puedes supervisar los mensajes de error:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> errorContainer = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.error-messages'</span>);
    <span class="hljs-keyword">const</span> hasErrors = errorContainer?.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> isVisible = errorContainer?.<span class="hljs-property">offsetParent</span> !== <span class="hljs-literal">null</span>;
    <span class="hljs-keyword">return</span> hasErrors && isVisible;
});

También puede realizar un seguimiento de varios estados de validación de formulario utilizando condiciones de espera específicas:

Tipo de validación	Condición de espera	Caso de uso
Errores de campo	Comprobar la presencia de una clase de error	Validación de campos individuales
Errores en todo el formulario	Monitorizar el contenedor de errores	Estado general del formulario
Mensajes de éxito	Esté atento a las pantallas de confirmación	Finalización del envío
Estados de carga	Estado del botón de envío de seguimiento	Indicación de procesamiento

Conclusión

Puntos clave

La waitForFunction El método en Puppeteer evalúa las condiciones de JavaScript hasta que regresan true, que ofrece un control preciso sobre las interacciones dinámicas de la página [ 3 ].

Éstos son algunos de los beneficios clave de usar waitForFunction:

Evaluación flexible:Maneja funciones asincrónicas para monitorear estados de páginas complejos [ 3 ].
Integración de contexto: Permite pasar directamente argumentos de Node.js al contexto del navegador [ 3 ].
Lógica personalizada:Permite una automatización personalizada según las condiciones específicas de la página. [ 2 ].

Este enfoque es especialmente útil cuando los métodos de espera estándar no son suficientes. Por ejemplo, en aplicaciones avanzadas de una sola página, es posible que se carguen varios elementos simultáneamente o que sea necesario confirmar estados específicos de JavaScript antes de continuar.

Titiritero y Nodo tardío en acción

Latenode aprovecha waitForFunction Para mejorar la automatización del flujo de trabajo. Al integrar este método, Latenode ha creado un nodo de monitorización personalizado que verifica el estado del sitio web y realiza capturas de pantalla cuando no se cumplen ciertas condiciones. [ 7 ].

Aquí hay un ejemplo de cómo Latenode utiliza waitForFunction Para garantizar que los elementos críticos se representen completamente antes de continuar:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

Este fragmento espera un elemento con la clase .tv-lightweight-charts No solo aparecer en el DOM sino también representarse completamente [ 2 ].

Para obtener mejores resultados al usar Latenode con Puppeteer:

Establezca valores de tiempo de espera apropiados utilizando page.setDefaultTimeout().
Usa try-catch bloques para un manejo robusto de errores.
Realice un seguimiento de los tiempos de ejecución para ajustar sus condiciones de espera.

Condiciones de espera personalizadas con waitForFunction en Puppeteer

Por qué usar `waitForFunction`?

Cómo funciona:

Ejemplo:

Características Clave:

Descripción rápida:

Cómo esperar/dormir durante N segundos en titiritero?

Conceptos básicos de waitForFunction

Cómo escribir funciones de espera básicas

Configuración de parámetros de función

Creación de reglas de espera personalizadas

Comprobación del estado de visualización del elemento

Prueba de propiedades de texto y elementos

Combinación de múltiples reglas de espera

sbb-itb-23997f1

Métodos avanzados de waitForFunction

Escritura de condiciones complejas en JavaScript

Manejo de tiempos de espera y errores

Hacer que waitForFunction se ejecute más rápido

Consejos sobre velocidad y recursos

Solucionar problemas comunes

Usos comunes de las reglas de espera personalizadas

Carga de productos de la tienda en línea

Carga de contenido en aplicaciones web modernas

Detección de mensajes de error de formulario

Conclusión

Puntos clave

Titiritero y Nodo tardío en acción

Artículos relacionados con

Artículos Relacionados

¿Qué es un navegador sin interfaz gráfica? Guía sobre automatización, pruebas y extracción de datos web

Navegadores sin interfaz gráfica para el web scraping: las mejores herramientas y técnicas para 2025

Detección de navegadores sin interfaz gráfica: técnicas y estrategias para ser más astuto que los bots

Por qué usar waitForFunction?

Cómo funciona:

Ejemplo:

Características Clave:

Descripción rápida:

Cómo esperar/dormir durante N segundos en titiritero?

Conceptos básicos de waitForFunction

Cómo escribir funciones de espera básicas

Configuración de parámetros de función

Creación de reglas de espera personalizadas

Comprobación del estado de visualización del elemento

Prueba de propiedades de texto y elementos

Combinación de múltiples reglas de espera

sbb-itb-23997f1

Métodos avanzados de waitForFunction

Escritura de condiciones complejas en JavaScript

Manejo de tiempos de espera y errores

Hacer que waitForFunction se ejecute más rápido

Consejos sobre velocidad y recursos

Solucionar problemas comunes

Usos comunes de las reglas de espera personalizadas

Carga de productos de la tienda en línea

Carga de contenido en aplicaciones web modernas

Detección de mensajes de error de formulario

Conclusión

Puntos clave

Titiritero y Nodo tardío en acción

Artículos relacionados con

Artículos Relacionados

¿Qué es un navegador sin interfaz gráfica? Guía sobre automatización, pruebas y extracción de datos web

Navegadores sin interfaz gráfica para el web scraping: las mejores herramientas y técnicas para 2025

Detección de navegadores sin interfaz gráfica: técnicas y estrategias para ser más astuto que los bots

Por qué usar `waitForFunction`?