Renderização JS

A Universal Scraping API é um poderoso serviço de recuperação de conteúdo web que suporta cenários complexos de renderização e interação de páginas web.

Estrutura Básica da Requisição

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": false,
    "headless": false
  },
  "proxy": {
    "country": "US"
  }
}

Recursos Principais

Renderização JavaScript

A renderização JavaScript permite o tratamento de conteúdo carregado dinamicamente e SPAs (Single Page Applications). Habilita um ambiente de navegador completo, suportando interações e requisitos de renderização de páginas mais complexos.

js_render=true, usaremos o navegador para a requisição.

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://www.google.com/",
    "js_render": true
  },
  "proxy": {
    "country": "US"
  }
}

Instruções JavaScript

Fornece um amplo conjunto de diretivas JavaScript que permitem interagir dinamicamente com páginas web.

Essas diretivas permitem clicar em elementos, preencher formulários, enviar formulários ou esperar que elementos específicos apareçam, fornecendo flexibilidade para tarefas como clicar em um botão “ler mais” ou enviar um formulário.

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "js_instructions": [
      {
        "wait_for": [
          ".dynamic-content",
          30000
        ]
        // Wait for element
      },
      {
        "click": [
          "#load-more",
          1000
        ]
        // Click element
      },
      {
        "fill": [
          "#search-input",
          "search term"
        ]
        // Fill form
      },
      {
        "keyboard": [
          "press",
          "Enter"
        ]
        // Simulate key press
      },
      {
        "evaluate": "window.scrollTo(0, document.body.scrollHeight)"
        // Execute custom JS
      }
    ]
  }
}

Aqui estão algumas ações comuns que você pode executar com as Instruções JavaScript:

Referência de Instruções JavaScript

Instrução	Sintaxe	Descrição	Exemplo
`wait_for`	`[selector, timeout]`	Aguardar elemento aparecer	`{"wait_for": [".content", 30000]}`
`click`	`[selector, delay]`	Clicar em elemento	`{"click": [".button", 1000]}`
`fill`	`[selector, value]`	Preencher formulário	`{"fill": ["#input", "text"]}`
`wait`	`milliseconds`	Tempo de espera fixo	`{"wait": 2000}`
`evaluate`	`javascript_code`	Executar código JS	`{"evaluate": "console.log('test')"}`
`keyboard`	`[action, value, delay?]`	Operação de teclado	Veja a tabela de operações de teclado abaixo

Operações de Teclado

Operação	Sintaxe	Descrição	Exemplo
Pressionar tecla	`["press", keyInput]`	Pressionar uma tecla keyInput específica	`{"keyboard": ["press", "Enter"]}`
Digitar texto	`["type", text, delay?]`	Digitar texto com atraso opcional	`{"keyboard": ["type", "Hello", 20]}`
Tecla pressionada	`["down", key]`	Manter uma tecla pressionada	`{"keyboard": ["down", "Shift"]}`
Tecla solta	`["up", key]`	Soltar uma tecla	`{"keyboard": ["up", "Shift"]}`

Tipos de keyInput especiais suportados: https://pptr.dev/api/puppeteer.keyinput

Controle de Recursos

Sistema de controle de carregamento de recursos para otimizar o desempenho e o uso de largura de banda.

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script"
      ],
      "urls": [
        // Optional, URL pattern-based blocking
        "*.analytics.com/*",
        "*/ads/*"
      ]
    }
  }
}

Referência completa dos tipos de recursos:

Tipo de Recurso	Descrição	Impacto
`Document`	Documento principal e iframes	Conteúdo principal da página
`Stylesheet`	Arquivos CSS	Estilo e layout da página
`Image`	Imagens e ícones	Conteúdo visual
`Media`	Recursos de áudio e vídeo	Conteúdo multimídia
`Font`	Fontes web	Renderização de texto
`Script`	Arquivos JavaScript	Funcionalidade da página
`TextTrack`	Legendas e legendas de vídeo	Acessibilidade de mídia
`XHR`	Chamadas XMLHttpRequest	Requisições assíncronas legadas
`Fetch`	Requisições da API Fetch	Requisições assíncronas modernas
`Prefetch`	Recursos pré-buscados	Otimização de desempenho
`EventSource`	Eventos enviados pelo servidor	Atualizações em tempo real
`WebSocket`	Conexões WebSocket	Comunicação bidirecional
`Manifest`	Manifestos de aplicativos web	Configuração de PWA
`SignedExchange`	Trocas HTTP assinadas	Autenticidade do conteúdo
`Ping`	Requisições Ping	Análise e rastreamento
`CSPViolationReport`	Relatórios de violação de CSP	Monitoramento de segurança
`Preflight`	Requisições de pré-voo CORS	Segurança entre origens
`Other`	Recursos não classificados	Diversos

Exemplo de uso:

{
  "actor": "unlocker.webunlocker",
  "input": {
    "url": "https://example.com",
    "js_render": true,
    "block": {
      "resources": [
        "Image",
        "Font",
        "Stylesheet",
        "Script",
        "Media",
        "Ping",
        "Prefetch"
      ]
    }
  }
}

Melhores práticas para bloqueio de recursos:

Otimização de desempenho
- Ative js_render apenas quando necessário
- Use o bloqueio de recursos com sabedoria, bloqueie recursos não essenciais para carregamento mais rápido
- Considere bloquear Prefetch e Ping para reduzir o uso da rede
- Mantenha os recursos Document e Script críticos desbloqueados
Gerenciamento de largura de banda
- Bloqueie Image e Media para páginas com uso intensivo de largura de banda
- Considere bloquear Font para usar fontes do sistema em vez disso
Aprimoramento da estabilidade
- Implemente mecanismos de repetição de solicitações
- Adicione lógica de tratamento de erros
- Use wait_for em vez de wait fixo
Eficiência de recursos
- Carregue recursos sob demanda
- Feche conexões desnecessárias prontamente

Observação: As strings do tipo de recurso diferenciam maiúsculas de minúsculas. Use correspondências exatas como mostrado na tabela de referência.

Começando CAPTCHAs Suportados