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.
Consulte nossa documentação da API para obter conteúdo detalhado.
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 extenso 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 aguardar o aparecimento de elementos específicos, 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
]
// Aguardar elemento
},
{
"click": [
"#load-more",
1000
]
// Clicar em elemento
},
{
"fill": [
"#search-input",
"search term"
]
// Preencher formulário
},
{
"keyboard": [
"press",
"Enter"
]
// Simular pressionamento de tecla
},
{
"evaluate": "window.scrollTo(0, document.body.scrollHeight)"
// Executar JS personalizado
}
]
}
}
Aqui estão algumas ações comuns que você pode executar com 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 um keyInput específico | {"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 liberada | ["up", key] | Liberar uma tecla | {"keyboard": ["up", "Shift"]} |
Tipos de KeyInput especiais suportados: https://pptr.dev/api/puppeteer.keyinput
Tipo de Resposta
Você pode filtrar valores pelo parâmetro output
, e o resultado será retornado no formato JSON string. Você também pode especificar outros tipos de retorno como html, markdown pelo parâmetro response_type
.
Filtros de Saída
Você pode filtrar dados formatados em JSON usando o parâmetro outputs
. Uma vez especificado, a resposta será fixa no formato JSON string. Esse parâmetro permite definir precisamente quais tipos de dados extrair do HTML raspado, permitindo a recuperação eficiente apenas das informações necessárias. Ao fazer isso, você pode reduzir o tempo de processamento e se concentrar nos dados mais relevantes para o seu caso de uso.
Este parâmetro aceita uma lista separada por vírgula de tipos de filtro e retorna os resultados em formato de string JSON estruturado. Os tipos de filtro permitidos incluem:
phone_numbers
, headings
, images
, audios
, videos
, links
, menus
, hashtags
, emails
, metadata
, tables
, favicon
.
Para uso detalhado, verifique o código abaixo.
const axios =require('axios');
const fs =require('fs');
(async () => {
// Configuração
const url = "https://api.scrapeless.com/api/v1/unlocker/request";
const token = "API Key";
const headers = {"x-api-token": token, "Content-Type": "application/json"};
const payload = {
actor: "unlocker.webunlocker",
input: {
url: "https://www.example.com",
js_render: true, // deve ser true
outputs: "phone_numbers, headings, images, audios, videos, links, menus, hashtags, emails, metadata, tables, favicon" // filtro de saídas
},
proxy: {
country: "ANY"
}
};
try {
const response = await axios.post(url, payload, {headers, timeout: 60000});
if (response.status !== 200) {
throw newError(`Erro HTTP: ${response.status}`);
}
const data = response.data;
if (data.code !== 200) {
throw newError(`Erro da API: ${data}`);
}
const content = data.data || '';
// Salvar e retornar resultado
fs.writeFileSync('response.json', content, 'utf8');
console.log('✅ Sucesso! Conteúdo salvo como response.json');
returnJSON.parse(content);
} catch (error) {
console.error('❌ Erro:', error.message);
throw error;
}
})()
Aqui estão alguns exemplos:
Emails
Use seletores CSS e expressões regulares para extrair endereços de email em formato padrão, como example@example.com.
{
"code": 200,
"data": "{\"emails\":[\"market@scrapeless.com\"]}"
}
Números de Telefone
Use seletores CSS e expressões regulares para extrair números de telefone, com foco em links contendo o protocolo tel:
.
exemplo:outputs=phone_numbers
{
"code": 200,
"data": "{ \"phone_numbers\": [ \"+1-111-111-111\" ] }"
}
Títulos
Extraia textos de títulos de H1
a H6
em HTML.
exemplo:outputs=headings
{
"code": 200,
"data": "{\"headings\":[\"Example Domain\"]}"
}
Imagens
Extraia fontes de imagens de tags img
. Retorne apenas o atributo src
.
exemplo:outputs=images
{
"code": 200,
"data": "{\"images\":[\"https://www.scrapeless.com/_next/image?url=%2Fassets%2Fimages%2Ftoolkit%2Flight%2Fimg-2.png&w=750&q=100\"]}"
}
Áudios
Extraia fontes de áudio de elementos source
dentro de tags audio
. Retorne apenas o atributo src
.
exemplo:outputs=audios
{
"code": 200,
"data": "{\"audios\":[\"https://example.com/audio.mp3\"]}"
}
Vídeos
Extraia fontes de vídeo de elementos source
dentro de tags video
. Retorne apenas o atributo src
.
exemplo:outputs=videos
{
"code": 200,
"data": "{\"videos\":[\"https://example.com/video.mp4\"]}"
}
Links
Extraia URLs de tags a
. Retorne apenas o atributo href
.
exemplo:outputs=links
{
"code": 200,
"data": "{\"links\":[\"https://app.scrapeless.com/landing/guide\",\"https://www.scrapeless.com/en\",\"https://www.scrapeless.com/en/pricing\",\"https://docs.scrapeless.com/\",\"https://backend.scrapeless.com/app/api\",\"https://www.producthunt.com/posts/scrapeless-deep-serpapi\",\"https://www.g2.com/products/scrapeless/reviews\",\"https://www.trustpilot.com/review/scrapeless.com\",\"https://slashdot.org/software/p/Scrapeless/\",\"https://tekpon.com/software/scrapeless/reviews/\",\"https://www.scrapeless.com/en/product/deep-serp-api\",\"https://www.scrapeless.com/en/product/scraping-browser\",\"https://www.scrapeless.com/en/product/scraping-api\",\"https://www.scrapeless.com/en/product/universal-scraping-api\",\"https://www.scrapeless.com/en/solutions/e-commerce\",\"https://www.scrapeless.com/en/solutions/seo\",\"https://www.scrapeless.com/en/solutions/real-estate\",\"https://www.scrapeless.com/en/solutions/travel-hotel-airline\",\"https://www.scrapeless.com/en/solutions/social-media\",\"https://www.scrapeless.com/en/solutions/market-research\",\"https://www.scrapeless.com/en/blog\",\"https://www.scrapeless.com/en/blog/deep-serp-api-online\",\"https://www.scrapeless.com/en/blog/scrapeless-web-scraping-toolkit\",\"https://www.scrapeless.com/en/blog/google-shopping-scrape\",\"https://backend.scrapeless.com/app/api/v1/public/links/github\",\"https://backend.scrapeless.com/app/api/v1/public/links/youtube\",\"mailto:market@scrapeless.com\",\"https://www.scrapeless.com/en/ai-agent\",\"https://browserless.scrapeless.com/\",\"https://www.scrapeless.com/en/solutions/temu\",\"https://www.scrapeless.com/en/solutions/walmart\",\"https://www.scrapeless.com/en/solutions/shopee\",\"https://www.scrapeless.com/en/solutions/lazada\",\"https://www.scrapeless.com/en/solutions/amazon\",\"https://www.scrapeless.com/en/solutions/google-trends\",\"https://www.scrapeless.com/en/solutions/google-search\",\"https://www.scrapeless.com/en/solutions/airbnb\",\"https://www.scrapeless.com/en/solutions/scoot\",\"https://www.scrapeless.com/en/solutions/latam\",\"https://www.scrapeless.com/en/solutions/localiza\",\"https://www.scrapeless.com/en/solutions/tiktok\",\"https://www.scrapeless.com/en/solutions/instagram\",\"https://www.scrapeless.com/en/integration\",\"https://www.scrapeless.com/en/faq\",\"https://www.scrapeless.com/en/glossary\",\"https://www.scrapeless.com/en/legal/privacy-policy\",\"https://www.scrapeless.com/en/legal/terms\",\"https://www.scrapeless.com/en/legal/terms#refund-policy\",\"https://www.scrapeless.com/en/legal/check-your-data\",\"https://backend.scrapeless.com/app/api/v1/public/links/discord\"]}"
}
Menus
Extraia itens de menu de elementos li
dentro de tags de menu.
exemplo:outputs=menus
{
"code": 200,
"data": "{\"links\":[ \"Coffee\", \"Tea\", \"Milk\" ]}"
}
Hashtags
Extraia formatos de hashtag usando expressões regulares para corresponder a padrões típicos de hashtag, como #example
.
exemplo:outputs = hashtags
{
"code": 200,
"data": "{\"hashtags\":[\"#docsearch\",\"#search\"]}"
}
Metadados
Extraia informações meta de tags meta
na seção head
, retornando os atributos name
e content
no formato name: content
.
exemplo:outputs=metadata
{
"code": 200,
"data": "{\"metadata\":[\"viewport: width=device-width, initial-scale=1\",\"description: Scrapeless is the best full-stack web scraping toolkit offering Scraping API, Scraping Browser\"]}"
}
Tabelas
Extraia dados de elementos de tabela e retorne os dados da tabela em formato JSON, incluindo dimensões, títulos e conteúdo.
exemplo:outputs=tables
{
"code": 200,
"data": "{\"tables\":[{\"dimensions\":{\"rows\":7,\"columns\":3,\"heading\":true},\"heading\":[\"Company\",\"Contact\",\"Country\"],\"content\":[{\"Company\":\"Alfreds Futterkiste\",\"Contact\":\"Maria Anders\",\"Country\":\"Germany\"},{\"Company\":\"Centro comercial Moctezuma\",\"Contact\":\"Francisco Chang\",\"Country\":\"Mexico\"},{\"Company\":\"Ernst Handel\",\"Contact\":\"Roland Mendel\",\"Country\":\"Austria\"},{\"Company\":\"Island Trading\",\"Contact\":\"Helen Bennett\",\"Country\":\"UK\"},{\"Company\":\"Laughing Bacchus Winecellars\",\"Contact\":\"Yoshi Tannamuri\",\"Country\":\"Canada\"},{\"Company\":\"Magazzini Alimentari Riuniti\",\"Contact\":\"Giovanni Rovelli\",\"Country\":\"Italy\"}]},{\"dimensions\":{\"rows\":11,\"columns\":2,\"heading\":true},\"heading\":[\"Tag\",\"Description\"],\"content\":[{\"Tag\":\"<table>\",\"Description\":\"Defines a table\"},{\"Tag\":\"<th>\",\"Description\":\"Defines a header cell in a table\"},{\"Tag\":\"<tr>\",\"Description\":\"Defines a row in a table\"},{\"Tag\":\"<td>\",\"Description\":\"Defines a cell in a table\"},{\"Tag\":\"<caption>\",\"Description\":\"Defines a table caption\"},{\"Tag\":\"<colgroup>\",\"Description\":\"Specifies a group of one or more columns in a table for formatting\"},{\"Tag\":\"<col>\",\"Description\":\"Specifies column properties for each column within a <colgroup> element\"},{\"Tag\":\"<thead>\",\"Description\":\"Groups the header content in a table\"},{\"Tag\":\"<tbody>\",\"Description\":\"Groups the body content in a table\"},{\"Tag\":\"<tfoot>\",\"Description\":\"Groups the footer content in a table\"}]}]}"
}
Favicon
Extraia a URL do favicon do elemento link
na seção head
do HTML.
exemplo:outputs = favicon
{
"code": 200,
"data": "{\"favicon\":\"https://www.scrapeless.com/favicon.ico\"}"
}
Outros formatos
Além de filtrar dados JSON através do parâmetro outputs
, você também pode especificar mais tipos de valores de retorno designando o parâmetro response_type
. Os valores opcionais são: html
| plaintext
| markdown
| png/jpeg
, sendo o valor padrão html
. Os detalhes são os seguintes:
HTML
Usado para extrair o conteúdo HTML de uma página, o que funciona melhor para páginas puramente estáticas, e retorna o conteúdo em formato de string HTML escapado.
Adicione response_type=html
à requisição:
const axios = require('axios');
const fs = require('fs');
(async () => {
const payload = {
actor: "unlocker.webunlocker",
input: {
url: "https://www.example.com",
js_render: true,
response_type: "html"
},
proxy: {
country: "ANY"
}
};
const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
headers: {
"x-api-token": "API Key",
"Content-Type": "application/json"
},
timeout: 60000
});
if (response.data?.code === 200) {
fs.writeFileSync('response.html', response.data.data, 'utf8');
}
})();
Retorna o conteúdo de texto em formato HTML.
{
"code": 200,
"data": "<!DOCTYPE html><html><head>\n <title>Example Domain</title>\n\n <meta charset=\"utf-8\">\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style type=\"text/css\">\n body {\n background-color: #f0f0f2;\n margin: 0;\n padding: 0;\n font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n \n }\n div {\n width: 600px;\n margin: 5em auto;\n padding: 2em;\n background-color: #fdfdff;\n border-radius: 0.5em;\n box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);\n }\n a:link, a:visited {\n color: #38488f;\n text-decoration: none;\n }\n @media (max-width: 700px) {\n div {\n margin: 0 auto;\n width: auto;\n }\n }\n </style> \n</head>\n\n<body>\n<div>\n <h1>Example Domain</h1>\n <p>This domain is for use in illustrative examples in documents. You may use this\n domain in literature without prior coordination or asking for permission.</p>\n <p><a href=\"https://www.iana.org/domains/example\">More information...</a></p>\n</div>\n\n\n</body></html>"
}
O exemplo de conteúdo do arquivo HTML após salvar:
<!DOCTYPE html><html><head>
<title>Example Domain</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 2em;
background-color: #fdfdff;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
div {
margin: 0 auto;
width: auto;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body></html>
Texto Simples
O recurso de texto simples é uma opção de saída que retorna o conteúdo raspado em formato de texto simples em vez de HTML ou Markdown. Esse recurso é altamente prático quando uma versão limpa e não formatada do conteúdo (livre de quaisquer tags HTML ou formatação Markdown) é necessária. Ele simplifica o processo de extração de conteúdo, tornando o processamento ou análise de texto mais conveniente.
Adicione response_type=plaintext
à requisição:
const axios = require('axios');
const fs = require('fs');
(async () => {
const payload = {
actor: "unlocker.webunlocker",
input: {
url: "https://www.example.com",
js_render: true,
response_type: "plaintext"
},
proxy: {
country: "ANY"
}
};
const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
headers: {
"x-api-token": "API Key",
"Content-Type": "application/json"
},
timeout: 60000
});
if (response.data?.code === 200) {
fs.writeFileSync('response.txt', response.data.data, 'utf8');
}
})();
Retorna o conteúdo de texto simples da página como uma string. Veja o exemplo abaixo.
{
"code": 200,
"data": "Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\nMore information..."
}
O exemplo de conteúdo do arquivo txt após salvar:
Example Domain
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
More information...
Markdown
Para extrair o conteúdo da página em formato Markdown, páginas Markdown puramente estáticas funcionam melhor. Ao adicionar response_type=markdown
aos parâmetros da solicitação, a Universal Scraping API retornará o conteúdo no formato Markdown, tornando-o mais legível e fácil de processar.
Adicione response_type=markdown
à requisição:
const axios = require('axios');
const fs = require('fs');
(async () => {
const payload = {
actor: "unlocker.webunlocker",
input: {
url: "https://www.example.com",
js_render: true,
response_type: "markdown"
},
proxy: {
country: "ANY"
}
};
const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
headers: {
"x-api-token": "API Key",
"Content-Type": "application/json"
},
timeout: 60000
});
if (response.data?.code === 200) {
fs.writeFileSync('response.md', response.data.data, 'utf8');
}
})();
Retorna o conteúdo de texto em formato Markdown.
{
"code": 200,
"data": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"
}
O exemplo de conteúdo após salvar um arquivo Markdown:
# Example Domain
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
[More information...](https://www.iana.org/domains/example)
PNG/JPEG
Ao adicionar response_type=png
à solicitação, você pode capturar uma captura de tela da página de destino e retornar uma imagem nos formatos PNG ou JPEG. Quando o resultado da resposta for definido como PNG ou JPEG, você pode usar o parâmetro response_image_full_page=true
para especificar se o resultado retornado é uma captura de tela de página inteira. O valor padrão do parâmetro response_image_full_page
é falso.
Adicione response_type=png
à solicitação:
const axios = require('axios');
const fs = require('fs');
(async () => {
const payload = {
actor: "unlocker.webunlocker",
input: {
url: "https://www.example.com",
js_render: true,
response_type: "png", // png or jpeg
response_image_full_page: true
},
proxy: {
country: "ANY"
}
};
const response = await axios.post("https://api.scrapeless.com/api/v1/unlocker/request", payload, {
headers: {
"x-api-token": "API Key",
"Content-Type": "application/json"
},
timeout: 60000
});
if (response.data?.code === 200) {
fs.writeFileSync('response.png',Buffer.from(response.data.data, 'base64'));
}
})();
Retorna uma string codificada em base64 no formato PNG ou JPEG.
{
"code": 200,
"data": "JVBERi0xLjQKJdPr6eEKM..."
}
O arquivo de exemplo após salvar em png/jpeg:
Controle de Recursos
Sistema de controle de carregamento de recursos para otimizar o desempenho e o uso da largura de banda.
{
"actor": "unlocker.webunlocker",
"input": {
"url": "https://example.com",
"js_render": true,
"block": {
"resources": [
"Image",
"Font",
"Stylesheet",
"Script"
],
"urls": [
// Opcional, bloqueio baseado em padrão de URL
"*.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 | Solicitações assíncronas legadas |
Fetch | Solicitações da API Fetch | Solicitaçõ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 | Solicitações Ping | Análise e rastreamento |
CSPViolationReport | Relatórios de violação de CSP | Monitoramento de segurança |
Preflight | Solicitaçõ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
- Habilite
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
ePing
para reduzir o uso da rede - Mantenha os recursos
Document
eScript
críticos desbloqueados
- Habilite
-
Gerenciamento de Largura de Banda
- Bloqueie
Image
eMedia
para páginas com uso intensivo de largura de banda - Considere bloquear
Font
para usar fontes do sistema em vez disso
- Bloqueie
-
Melhoria da Estabilidade
- Implemente mecanismos de repetição de solicitações
- Adicione lógica de tratamento de erros
- Use
wait_for
em vez dewait
fixo
-
Eficiência de Recursos
- Carregue os recursos sob demanda
- Feche as conexões desnecessárias prontamente
Observação: As strings do tipo de recurso são sensíveis a maiúsculas e minúsculas. Use correspondências exatas como mostrado na tabela de referência.