Condições de espera personalizadas com waitForFunction no Puppeteer

Quer o seu Marionetista scripts para lidar melhor com sites dinâmicos? Aqui está a chave: waitForFunction permite que você defina regras de espera personalizadas para garantir que sua automação funcione perfeitamente com as mudanças de conteúdo.

Por que usar `waitForFunction`?

Tempo de controle: Aguarde até que condições específicas sejam atendidas (por exemplo, elementos são carregados, texto é alterado).
Lidar com conteúdo dinâmico: Perfeito para sites modernos e dinâmicos.
Evitar erros: Evite atrasos desnecessários ou interações prematuras.

Como Funciona:

Escreva condições JavaScript que retornem true quando estiver pronto.
Use opções como frequência de pesquisa (raf, mutation, ou milissegundos) e tempos limite para melhor desempenho.
Combine verificações DOM com respostas de API para cenários avançados.

Exemplo:

<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>
);

Principais Recursos:

Monitore a visibilidade dos elementos, o conteúdo do texto ou as propriedades personalizadas.
Combine várias condições para fluxos de trabalho complexos.
Lide com tempos limite e erros com elegância.

Dica: Usar waitForFunction para substituir desatualizado sleep chamadas e melhorar a eficiência.

Visão geral rápida:

Característica	O que faz
Modos de votação	Verifica condições através de 'raf', 'mutação' ou intervalos personalizados.
Condições Personalizadas	Aguarde estados DOM específicos ou respostas de API
Gerenciamento de tempo limite	Definir tempos limite globais ou específicos da operação

Este método garante que seus scripts sejam confiáveis, eficientes e prontos para qualquer desafio de conteúdo dinâmico.

Como esperar / dormir por N segundos em titereiro?

Noções básicas de waitForFunction

O waitForFunction O método no Puppeteer permite que você configure condições personalizadas para seus scripts esperarem antes de prosseguir. Veja como você pode usá-lo efetivamente.

Como escrever funções básicas de espera

Aqui está uma maneira simples de criar uma função 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>
);

A chave aqui é que sua função precisa retornar um valor verdadeiro antes que o roteiro possa avançar .

Agora, vamos ver como configurá-lo para melhor desempenho.

Configurando Parâmetros de Função

Você pode fazer ajustes finos waitForFunction passando um objeto de opções. Os principais parâmetros incluem:

Parâmetro	Descrição	Valores comuns
Votação	Com que frequência a condição é verificada	'raf', 'mutação' ou milissegundos
tempo limite	Tempo máximo de espera	Padrão: 30,000 ms (30 segundos)

Modos de votação :

RequestAnimationFrame ('raf')
Melhor para monitorar mudanças de estilo, pois verifica as condições durante cada quadro de animação.
Observador de mutação ('mutação')
Útil para rastrear alterações na estrutura do DOM. Ele dispara verificações sempre que o DOM é atualizado.

Intervalo personalizado (milissegundos)
Por exemplo, isso verifica a condição a 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> }
);

Escolha o modo de votação com base em suas necessidades:

Uso 'raf' para animações ou atualizações de estilo.
Optar por 'mutation' para alterações relacionadas ao DOM.
Defina um intervalo personalizado (milissegundos) para casos de uso mais amplos.

Criando regras de espera personalizadas

Verificando o status de exibição do elemento

Para confirmar que um elemento está visível, você pode verificar sua presença e dimensões:

<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>;
});

Isso garante que o elemento exista e tenha dimensões visíveis na página. É especialmente útil para conteúdo dinâmico que leva tempo para carregar corretamente .

Testando propriedades de texto e elementos

Além das verificações visuais, você pode monitorar o conteúdo do texto ou propriedades específicas dos 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 verificações de propriedade mais detalhadas, passe argumentos adicionais:

<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
);

Combinando várias regras de espera

Depois de testar condições individuais, você pode combiná-las para cenários mais complexos. Por exemplo:

<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 manipular vários elementos com condições independentes, use Promise combinações :

Padrão de espera	Caso de uso	Implementação
Todos os elementos	Aguarde vários elementos necessários	Promessa.tudo()
Qualquer elemento	Continue quando o primeiro elemento aparecer	Promessa.corrida()
Lógica personalizada	Lidar com verificações condicionais complexas	Funções de espera combinadas

Para operações assíncronas, você pode criar condições de espera avançadas:

<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 Validação de resposta da API com Verificações de elementos DOM, garantindo que tanto os dados quanto o conteúdo visual estejam prontos .

sbb-itb-23997f1

Métodos avançados waitForFunction

Escrevendo condições complexas em JavaScript

Para aplicações web mais dinâmicas, você pode usar esperarPorFunção para criar condições JavaScript detalhadas. Aqui está um exemplo:

<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 garante:

O contêiner do gráfico existe.
Um número mínimo de pontos de dados está presente.
Todos os pontos de dados são visíveis.
Nenhum dos pontos está em estado de carregamento.

Você também pode combinar verificações assíncronas com avaliações DOM para cenários mais complexos:

<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>
    }
);

Essa abordagem combina verificações de DOM com uma chamada de API para garantir que a interface do usuário e o backend estejam sincronizados.

Lidando com tempos limite e erros

O gerenciamento de tempo limite é crucial ao trabalhar com esperarPorFunção. Aqui está um exemplo de como lidar com timeouts 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;
}

Aqui está uma rápida visão geral das estratégias de tempo limite:

Estratégia de tempo limite	Caso de uso	Configuração
Tempo limite padrão	Operações gerais	página.setDefaultTimeout()
Tempo limite de navegação	Carregamento de página	página.setDefaultNavigationTimeout()
Específico da operação	Verificações detalhadas	Use a opção de tempo limite no método
Espera infinita	Atrasos conhecidos	tempo limite: 0

Para melhorar o tratamento de erros:

Ajuste as configurações de tempo limite com base na complexidade de cada operação.
Uso try-catch blocos para se recuperarem graciosamente de erros.
Monitore a atividade da rede para identificar gargalos.
Implemente ações de fallback, como recarregar a página, quando ocorrerem tempos limite.
Verifique novamente os seletores para evitar atrasos desnecessários.

Essas práticas ajudarão a garantir que seus scripts sejam confiáveis e eficientes.

Fazendo waitForFunction rodar mais rápido

Dicas de velocidade e recursos

Para obter esperarPorFunção para executar com mais eficiência, concentre-se em estratégias de espera inteligentes e gerenciamento adequado de recursos. Use ferramentas de desenvolvedor de navegador para medir tempos de carregamento e definir timeouts 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 reduzir o uso de recursos:

Bloqueie recursos desnecessários, como imagens ou fontes.
Uso waitForSelector or waitForFunction em vez de desatualizado waitForTimeout.
Combine várias verificações em uma única evaluate chamada para reduzir a comunicação do navegador para o Node.

Estratégia	Impacto no desempenho	Melhor caso de uso
rede ociosa2	Moderado	Navegação de página
esperarPorSeletor	pomposidade	Verificações de elementos individuais
esperarPorFunção	Variável	Condições complexas
avaliação combinada	Fastest	Verificações de múltiplos elementos

Esses métodos podem ajudar a resolver gargalos comuns, que são abordados na próxima seção.

Resolvendo problemas comuns

Problemas de desempenho geralmente decorrem de padrões de espera ineficientes. Veja como lidar com eles:

Problemas com o seletor
Seletores excessivamente rígidos podem causar falhas. Simplifique-os para melhor confiabilidade:

<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>
);

Gestão de Recursos
Gerencie recursos e evite atrasos desnecessários:

<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 tem uma arquitetura orientada a eventos, o que remove muitas falhas potenciais. Não há necessidade de maldade sleep[undefined] chamadas em scripts de marionetista." - leia-me do Puppeteer

Sempre envolva métodos de espera em try...catch blocos para lidar com erros graciosamente e fornecer opções de fallback. Essa abordagem garante que seus scripts permaneçam robustos e confiáveis.

Usos comuns para regras de espera personalizadas

Carregando produtos da loja online

Garantir que os produtos sejam carregados corretamente é essencial para coletar dados precisos. Use uma regra de espera personalizada para pausar a execução até que os itens do produto sejam totalmente carregados:

<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 maior precisão, você pode usar esta abordagem:

<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>});

Isso garante que seu script aguarde o carregamento de todos os elementos necessários, melhorando a confiabilidade da coleta de dados em cenários de comércio eletrônico.

Carregando conteúdo em aplicativos da Web modernos

Aplicativos web dinâmicos geralmente exigem condições de espera específicas para lidar com o carregamento de conteúdo. Por exemplo, você pode esperar que um elemento específico se torne totalmente visível:

<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>;
});

Se várias seções precisarem ser carregadas, combine condições como esta:

<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 ajuda a garantir que seus scripts de automação interajam perfeitamente com conteúdo dinâmico.

Detecção de mensagem de erro de formulário

A detecção de erros de formulário usa uma lógica semelhante às verificações de visibilidade de elementos. Veja como você pode monitorar mensagens de erro:

<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;
});

Você também pode rastrear vários estados de validação de formulários usando condições de espera específicas:

Tipo de validação	Condição de espera	Caso de uso
Erros de campo	Verifique a presença de uma classe de erro	Validação de campo individual
Erros em todo o formulário	Monitore o contêiner de erro	Status geral do formulário
Mensagens de sucesso	Fique atento às exibições de confirmação	Conclusão da submissão
Estados de carregamento	Estado do botão de envio da trilha	Indicação de processamento

Conclusão

Principais lições

O waitForFunction O método no Puppeteer avalia as condições do JavaScript até que elas retornem true, oferecendo controle preciso sobre interações dinâmicas de páginas .

Aqui estão alguns dos principais benefícios do uso waitForFunction:

Avaliação Flexível: Lida com funções assíncronas para monitorar estados de páginas complexos .
Integração de Contexto: Permite a passagem direta de argumentos do Node.js para o contexto do navegador .
Lógica personalizada: Permite automação personalizada com base em condições específicas da página .

Essa abordagem é particularmente útil em casos em que métodos de espera padrão não são suficientes. Por exemplo, em aplicativos avançados de página única, vários elementos podem ser carregados simultaneamente, ou estados JavaScript específicos podem precisar ser confirmados antes de prosseguir.

Marionetista e Nó latente Em ação

Latenode aproveita waitForFunction para aprimorar a automação do fluxo de trabalho. Ao integrar esse método, a Latenode criou um nó de monitoramento personalizado que verifica o status do site e captura capturas de tela quando certas condições não são atendidas. .

Aqui está um exemplo de como o Latenode usa waitForFunction para garantir que os elementos críticos sejam totalmente renderizados antes de prosseguir:

<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 snippet aguarda um elemento com a classe .tv-lightweight-charts não apenas aparecer no DOM, mas também ser totalmente renderizado .

Para melhores resultados ao usar o Latenode com o Puppeteer:

Defina valores de tempo limite apropriados usando page.setDefaultTimeout().
Uso try-catch blocos para tratamento robusto de erros.
Acompanhe os tempos de execução para ajustar suas condições de espera.

Condições de espera personalizadas com waitForFunction no Puppeteer

Por que usar `waitForFunction`?

Como Funciona:

Exemplo:

Principais Recursos:

Visão geral rápida:

Como esperar / dormir por N segundos em titereiro?

Noções básicas de waitForFunction

Como escrever funções básicas de espera

Configurando Parâmetros de Função

Criando regras de espera personalizadas

Verificando o status de exibição do elemento

Testando propriedades de texto e elementos

Combinando várias regras de espera

sbb-itb-23997f1

Métodos avançados waitForFunction

Escrevendo condições complexas em JavaScript

Lidando com tempos limite e erros

Fazendo waitForFunction rodar mais rápido

Dicas de velocidade e recursos

Resolvendo problemas comuns

Usos comuns para regras de espera personalizadas

Carregando produtos da loja online

Carregando conteúdo em aplicativos da Web modernos

Detecção de mensagem de erro de formulário

Conclusão

Principais lições

Marionetista e Nó latente Em ação

Artigos Relacionados

Artigos Relacionados

O que é um Headless Browser? Um guia para automação, testes e web scraping

Navegadores sem cabeça para raspagem da Web: principais ferramentas e técnicas para 2025

Detecção de navegador sem cabeça: técnicas e estratégias para enganar bots

Por que usar waitForFunction?

Como Funciona:

Exemplo:

Principais Recursos:

Visão geral rápida:

Como esperar / dormir por N segundos em titereiro?

Noções básicas de waitForFunction

Como escrever funções básicas de espera

Configurando Parâmetros de Função

Criando regras de espera personalizadas

Verificando o status de exibição do elemento

Testando propriedades de texto e elementos

Combinando várias regras de espera

sbb-itb-23997f1

Métodos avançados waitForFunction

Escrevendo condições complexas em JavaScript

Lidando com tempos limite e erros

Fazendo waitForFunction rodar mais rápido

Dicas de velocidade e recursos

Resolvendo problemas comuns

Usos comuns para regras de espera personalizadas

Carregando produtos da loja online

Carregando conteúdo em aplicativos da Web modernos

Detecção de mensagem de erro de formulário

Conclusão

Principais lições

Marionetista e Nó latente Em ação

Artigos Relacionados

Artigos Relacionados

O que é um Headless Browser? Um guia para automação, testes e web scraping

Navegadores sem cabeça para raspagem da Web: principais ferramentas e técnicas para 2025

Detecção de navegador sem cabeça: técnicas e estratégias para enganar bots

Por que usar `waitForFunction`?