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

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

• Automatizar entradas de formulários: 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 inserção mais realista.
• Lidar com formulários complexos: Gerencie seletores de data, formulários em várias etapas e validação em tempo real.
• Interação do 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 ao eliminar erros humanos.
• Dimensione fluxos 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');

Seja para automatizar páginas de login, formulários em várias etapas ou lidar com conteúdo dinâmico, o Puppeteer oferece as ferramentas para simplificar seu fluxo. Pronto para começar? Vamos explorar como ele funciona.

sbb-itb-23997f1

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

A Latenode oferece integração direta com uma integração de navegador headless baseada em Puppeteer para automatizar envios de formulários, extração de dados de sites, capturas de tela 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. Não perca a chance de experimentar a automação web low-code na Latenode. Experimente AGORA o navegador headless pronto e nunca mais tenha trabalho com instalação e configuração!

Métodos básicos de entrada em formulários

Esta seção explica como o Puppeteer pode lidar com entradas de texto e simular a digitação de uma forma mais humana.

Automação de campos de texto

Veja alguns métodos que você pode usar para automatizar a inserção de texto com o Puppeteer:

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

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

Para tornar a entrada mais natural, você pode adicionar atrasos entre as teclas digitadas. Veja mais detalhes sobre isso 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. O plugin puppeteer-extra-plugin-human-typing é ú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
});

Esse método faz a inserção parecer mais natural ao:

• Ajustar a velocidade de digitação
• Simular correções de erros de digitação
• Adicionar pausas entre palavras
• Replicar um comportamento de teclado realista

Para uma interação ainda mais fiel:

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. Veja como lidar com esses componentes de forma eficaz.

Menus de seleção e controles de entrada

Automatizar menus suspensos, caixas de seleção e botões de opção é simples com o Puppeteer. Veja como fazer:

// 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 aguarde automaticamente que o elemento esteja presente no DOM e no estado correto para a ação." [4]

Automação de entrada de datas

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 de formulários dinâmicos

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

Lidar com formulários em várias etapas exige 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

Além da automação de entradas, simular interações completas do usuário melhora a execução de tarefas de envio de formulários. O Puppeteer oferece ferramentas para ações precisas do mouse e navegação, tornando-o ideal para gerenciar cenários complexos de formulários.

Ações de mouse e rolagem

Veja como 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 de interações básicas, especialmente ao lidar com formulários em várias etapas que exigem uma navegação fluida.

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

Ao automatizar formulários em várias etapas, gerenciar comportamentos semelhantes aos de um usuário é essencial. Para desenvolvimento, configure o navegador para exibir sua interface e desacelerar as operações, facilitando a depuração:

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

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

Para produção, mude para o modo headless (headless: true) a fim de melhorar o desempenho. O exemplo de automação SauceDemo demonstra a validação de entradas ao direcionar o seletor .error-message-container [1].

Para lidar com caixas de diálogo modais ou pop-ups, responda conforme o conteúdo delas:

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 para automação de formulários

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

Gerenciamento de erros

Use blocos try-catch para detectar e tratar 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 mensagens de erro e confirmando 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, veja 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, a DataScrape Solutions 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% [6].

Veja uma configuração de produção de exemplo:

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

A execução 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% [7].

"Dominar o tratamento de erros não foi apenas benéfico — foi essencial para criar fluxos de automação eficientes e confiáveis." — Nathan, OneQuery [5]

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óximos passos

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

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

"O Puppeteer é mais do que uma ferramenta — é uma porta de entrada para a eficiência empresarial. Ao automatizar tarefas repetitivas, simplificar fluxos e coletar dados em tempo real, as empresas podem se manter à frente no cenário competitivo atual." [3]

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

• Soluções low-code: A Latenode torna a automação serverless com Puppeteer acessível sem necessidade de programação. Por exemplo, você pode criar fluxos para salvar capturas de URLs como PDFs e enviá-los automaticamente para buckets do AWS S3 [8].
• Recursos avançados: Use plugins Puppeteer Extra para tarefas como navegação anônima [2]. Para desafios de CAPTCHA, serviços como o 2Captcha podem ajudar a garantir uma automação fluida [1].
• Integração empresarial: Organizações como a TaskUs incorporaram com sucesso o Puppeteer às suas operações. Como explica Manish Pandya, SVP de Digital da TaskUs:

"A TaskUs utiliza o PixieBrix para oferecer aos nossos clientes a flexibilidade simples de aprimorar as experiências dos usuários e os fluxos. É um facilitador essencial para tornar nossa visão realidade." [9]

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