Automação de formulários com Puppeteer: entrada de texto, preenchimento de formulários e simulação de usuário

Marionetista é uma biblioteca Node.js que automatiza navegadores como o Chrome, simplificando tarefas repetitivas como preenchimento de formulários, entrada de texto e interação do usuário. Aqui está o que você pode fazer com ela:

• Automatizar entradas de formulário: Preencha campos de texto, menus suspensos, caixas de seleção e até formulários dinâmicos.
• Simular digitação humana: Adicione atrasos, correções e pausas para uma entrada realista.
• Lidar com formulários complexos: Gerencie seletores de data, formulários de várias etapas e validação em tempo real.
• Interação com o usuário: Simule movimentos do mouse, rolagem e navegação.

Principais benefícios:

• Economize tempo reduzindo o trabalho manual em até 50%.
• Melhore a precisão eliminando erros humanos.
• Dimensione fluxos de trabalho para vários formulários simultaneamente.
• Reduza custos automatizando tarefas repetitivas.

Exemplo Rápido:

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

Quer você esteja automatizando páginas de login, formulários multietapas ou manipulando conteúdo dinâmico, o Puppeteer oferece as ferramentas para simplificar seu fluxo de trabalho. Pronto para mergulhar? Vamos explorar como ele funciona.

sbb-itb-23997f1

Use o navegador headless baseado em Puppeteer no Latenode para automatizar envios de formulários

O Latenode oferece integração direta com uma integração headless browser baseada em Puppeteer para automatizar envios de formulários, extração de dados de sites, captura de telas e muito mais. Adicione código de qualquer complexidade ou use o assistente de IA para configurar o nó.

Conecte-o a quaisquer modelos de IA, bancos de dados, sistemas de CRM e outros serviços para aprimorar, expandir e acelerar seus fluxos de trabalho. Não perca a chance de experimentar a automação web low-code no Latenode. Experimente o Ready-Made Headless Browser AGORA e nunca mais tenha problemas com instalação e configuração!

Métodos básicos de entrada de formulário

Esta seção explica como o Puppeteer pode manipular a entrada de texto e simular a digitação de uma forma que pareça mais humana.

Automação de campo de texto

Aqui estão alguns métodos que você pode usar para automatizar a entrada de texto com o Puppeteer:

Por exemplo, ao automatizar um formulário de login como https://the-internet.herokuapp.com/login, você pode usar o seguinte código:

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

Para fazer com que a entrada pareça mais natural, você pode adicionar atrasos entre as teclas. Mais detalhes sobre isso são abordados na próxima seção.

Adicionando padrões de digitação semelhantes aos humanos

Para simular como uma pessoa digita, você pode introduzir atrasos variáveis, correções e pausas. puppeteer-extra-plugin-human-typing O plugin é útil para criar esses efeitos.

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

await page.typeHuman('[name="q"]', "Is a robot writing right now?", {
  backspaceMaximumDelayInMs: 1500,
  backspaceMinimumDelayInMs: 750,
  maximumDelayInMs: 650,
  minimumDelayInMs: 150
});

Este método faz com que a entrada pareça mais natural ao:

• Ajustando a velocidade de digitação
• Simulando correções de digitação
• Adicionar pausas entre palavras
• Replicando o comportamento realista do teclado

Para uma interação ainda mais realista:

await page.focus('#input-field');
await page.type('#input-field', 'Hello World');

Automação de Formulários Complexos

Com base na automação básica de campos de texto, formulários avançados como menus suspensos, entradas de data e formulários dinâmicos exigem abordagens específicas. Vamos mergulhar em como lidar com esses componentes de forma eficaz.

Selecione Menus e Controles de Entrada

Automatizar menus suspensos, caixas de seleção e botões de rádio é simples com o Puppeteer. Veja como você pode fazer isso:

// 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]');

"Os localizadores encapsulam as informações sobre como selecionar um elemento e permitem que o Puppeteer espere automaticamente que o elemento esteja presente no DOM e no estado correto para a ação."

Automação de entrada de data

Os seletores de data podem variar em complexidade. Veja como lidar com campos de data simples e somente leitura:

// 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 seletores de data baseados em calendário:

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

Manipulação dinâmica de formulários

Formulários dinâmicos geralmente envolvem desafios como atrasos de carregamento, campos condicionais e validação em tempo real. Veja como gerenciá-los:

Para campos com validação 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'
);

O manuseio de formulários de várias etapas requer uma navegação 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 fim, sempre inclua tratamento de erros para problemas inesperados:

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

Simulação de interação do usuário

Expandindo a automação de entrada, simular interações completas do usuário aprimora o manuseio de tarefas de envio de formulários. O Puppeteer fornece ferramentas para ações precisas do mouse e navegação, tornando-o ideal para gerenciar cenários complexos de formulários.

Ações do mouse e rolagem

Veja como você pode simular movimentos realistas do mouse e rolagem:

// 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 rolagem infinita, acompanhe a altura da página e carregue o conteúdo dinamicamente:

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

Essas técnicas vão além das interações básicas, especialmente ao lidar com formulários de várias etapas que exigem navegação suave.

Navegação de formulário em várias etapas

Ao automatizar formulários multietapas, gerenciar comportamentos semelhantes aos do usuário é essencial. Para desenvolvimento, configure o navegador para exibir sua UI e desacelerar as operações para facilitar a depuração:

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

Introduzir atrasos variáveis ​​para imitar o comportamento natural do usuário:

Para produção, mude para o modo headless (headless: true) para melhorar o desempenho. O MolhoDemo exemplo de automação mostra validação de entrada direcionando o .error-message-container seletor.

Para lidar com caixas de diálogo modais ou pop-ups, responda com base em seu conteúdo:

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

Essas estratégias garantem que seus fluxos de automação sejam eficientes e realistas.

Diretrizes de automação de formulários

Esta seção expande os conceitos básicos da automação de formulários, com foco no tratamento de erros e no aumento do desempenho para garantir que seus fluxos de trabalho sejam executados sem problemas.

Gestão de Erros

Use blocos try-catch para detectar e lidar com erros 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 seus formulários verificando se há mensagens de erro e confirmando os envios bem-sucedidos:

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

Defina tempos limite para evitar que seu script fique travado indefinidamente:

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

Agora, vamos ver como melhorar o desempenho para uma automação mais rápida e eficiente.

Dicas de desempenho

Otimize seus scripts de automação com estas técnicas:

Por exemplo, nos Soluções DataScrape aplicou essas estratégias e reduziu o tempo de processamento de 50,000 envios de formulários de 7,500 minutos para 5,833 minutos - uma melhoria de 22%.

Aqui está um exemplo de configuração de produção:

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

Executar no modo headless também pode acelerar significativamente a execução: testes que levavam 5 segundos foram concluídos em apenas 3 segundos, uma melhoria de 40%.

"Dominar o tratamento de erros não foi apenas benéfico - foi essencial para construir fluxos de trabalho de automação eficientes e confiáveis." - Nathan, OneQuery

Por fim, para formulários dinâmicos, use estratégias de espera inteligentes para lidar com comportamentos imprevisíveis:

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

Resumo e próximas etapas

O Puppeteer simplifica a automação de formulários, reduzindo drasticamente o trabalho manual. Veja como você pode integrar o Puppeteer aos seus fluxos de trabalho:

Esses métodos podem ajudar você a migrar da automação básica para uma configuração totalmente integrada do Puppeteer.

"O Puppeteer é mais do que apenas uma ferramenta - é um portal para a eficiência empresarial. Ao automatizar tarefas repetitivas, otimizar fluxos de trabalho e coletar dados em tempo real, as empresas podem permanecer à frente no cenário competitivo atual."

Para aproveitar os benefícios descritos acima, explore estas opções de integração:

• Soluções low-code: O Latenode torna a automação do Puppeteer sem servidor acessível sem nenhuma codificação. Por exemplo, você pode criar fluxos de trabalho para salvar instantâneos de URL como PDFs e carregá-los automaticamente para buckets do AWS S3.
• Recursos avançados: Use os plugins Puppeteer Extra para tarefas como navegação anônima. Para desafios de CAPTCHA, serviços como 2Captcha pode ajudar a garantir uma automação suave.
• Integração Empresarial: Organizações como TarefaUs incorporaram com sucesso a Puppeteer em suas operações. Como Manish Pandya, vice-presidente sênior de Digital da TarefaUsexplica:

"A TaskUs utiliza o PixieBrix para fornecer aos nossos clientes a flexibilidade fácil para melhorar as experiências do usuário e os fluxos de trabalho. É um facilitador essencial para tornar nossa visão uma realidade."

Para uma automação de formulários confiável, concentre-se no tratamento de erros robusto, estratégias de espera inteligentes e monitoramento consistente.

Posts Relacionados do Blog

• O que é um navegador sem cabeçalho e por que você precisa dele?
• O que é Puppeteer e como ele mudou a automação do navegador: uma visão geral completa
• Instalando e configurando o Puppeteer: resolvendo problemas comuns de dependência e Chromium
• Puppeteer do Google: Histórico de desenvolvimento, integração do Chrome e seu lugar na automação da Web