← 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 apenas vê a estrutura HTML inicial. Os dados reais são carregados após a execução do JavaScript, e é por isso que as ferramentas tradicionais de scraping retornam páginas vazias.

As browser tasks 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. Inicia um navegador Chrome headless
  2. Navega até a URL de destino
  3. Aguarda a execução do JavaScript e a estabilização do DOM
  4. Opcionalmente aguarda a aparição de um seletor CSS específico
  5. Retorna o HTML totalmente renderizado

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

Quando Usar Browser Tasks

Use browser tasks quando:

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

Continue com tarefas single quando:

  • Páginas HTML renderizadas no servidor (sites de notícias, blogs, wikis)
  • APIs REST que retornam JSON diretamente
  • A velocidade for a prioridade (as browser tasks levam de 2 a 10 segundos, em comparação com menos de 1 segundo para tarefas single)

Exemplo: Fazendo Scraping de um App React

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "Authorization: Bearer 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 tenham sido carregados.

Dicas de Desempenho

  • 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. Apenas aumente para backends realmente lentos.
  • Use single como padrão e mude para browser apenas quando o conteúdo estiver ausente da response.

Próximos Passos

Estamos trabalhando em recursos adicionais de navegador, incluindo captura de tela, geração de PDF e navegação em várias etapas (clicar, rolar, preencher formulários). Mas mesmo sem esses extras, as browser tasks já resolvem o problema mais comum: obter o conteúdo real de páginas renderizadas por JavaScript em vez de uma estrutura vazia.

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