← Todos os posts
Atualização de produto 3 min de leitura

Browser Tasks: Como Fazer Scraping de Sites com Muito JavaScript

Mais de 70% dos sites modernos precisam de JavaScript para renderizar seu conteúdo. Veja como as browser tasks do FourA obtêm a página completa quando as requests HTTP retornam vazias.

browserjavascriptpuppeteerproduct-update

Mais de 70% dos sites modernos dependem de JavaScript para renderizar seu conteúdo. Uma request HTTP padrão vê apenas o shell HTML inicial. Os dados reais carregam após a execução do JavaScript, e é por isso que ferramentas tradicionais de scraping retornam páginas vazias.

As tarefas de navegador do FourA resolvem isso executando uma instância real do Chrome headless para cada request.

Como funciona

Quando você envia uma tarefa com type: "browser", o FourA:

  1. Inicializa um navegador Chrome headless
  2. Navega até a URL de destino
  3. Aguarda o JavaScript executar e o DOM estabilizar
  4. Opcionalmente, aguarda um seletor CSS específico aparecer
  5. Retorna o HTML totalmente renderizado

Todo o processo acontece na infraestrutura do FourA. Você recebe HTML limpo de volta sem precisar instalar navegadores, configurar Puppeteer ou gerenciar atualizações do Chrome.

Quando usar tarefas de navegador

Use tarefas de navegador para:

  • Single-page applications (React, Vue, Angular)
  • Páginas com conteúdo carregado via lazy loading (scroll infinito, botões de "carregar mais")
  • Sites que exigem consentimento de cookies ou configuração inicial de JS
  • Conteúdo protegido por fluxos de autenticação no client-side

Continue com tarefas single quando:

  • Páginas HTML renderizadas no servidor (sites de notícias, blogs, wikis)
  • REST APIs que retornam JSON diretamente
  • A velocidade for prioridade (tarefas de navegador levam de 2 a 10 segundos contra menos de 1 segundo para tarefas simples)

Exemplo: Scraping de um app React

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

O seletor waitFor instrui o FourA a aguardar até que .dashboard-content apareça no DOM antes de capturar a página. Isso garante que todos os dados assíncronos foram carregados.

Dicas de performance

  • Sempre use waitFor com um seletor específico em vez de depender de timeouts. É mais rápido e mais confiável.
  • Defina um timeout razoável. 15 segundos cobrem a maioria das SPAs. Aumente apenas para backends realmente lentos.
  • Use single como padrão e só mude para browser quando faltar conteúdo na resposta.

Próximos passos

Estamos desenvolvendo recursos adicionais para o navegador, incluindo captura de screenshots, geração de PDF e navegação em múltiplas etapas (clicar, rolar, preencher formulários). Mesmo sem esses recursos extras, as tarefas de navegador já resolvem o principal gargalo: extrair o conteúdo real de páginas renderizadas em JavaScript em vez de uma casca vazia.

Consulte a documentação para ver a comparação completa dos tipos de tarefas.