Renderização em JS e controle do navegador

Aprenda a usar um parâmetro render para definir instruções do navegador na Web Scraper API para que você possa fazer scraping de páginas dinâmicas complexas.

Renderização de JavaScript

Se a página que você quer extrair usa JavaScript para carregar seus dados no DOM, adicione o render parâmetro à sua solicitação. A página é então totalmente renderizada antes de retornarmos o resultado, em um dos dois formatos:

valor de render

Você recebe

html

O HTML bruto da página totalmente renderizada

png

Uma captura de tela (PNG) codificada em Base64 da página renderizada

Se você quiser extrair uma imagem e baixá-la, consulte esta seção.

Exemplo de requisição

curl --user "USERNAME:PASSWORD" \\
'https://realtime.oxylabs.io/v1/queries' \\
-H "Content-Type: application/json" \\
-d '{"source": "universal", "url": "https://www.example.com", "render": "html"}'

import requests
from pprint import pprint

# Structure payload.
payload = {
    'source': 'universal',
    'url': 'https://www.example.com',
    'render': 'html',
}

# Get response.
response = requests.request(
    'POST',
    'https://realtime.oxylabs.io/v1/queries',
    auth=('USERNAME', 'PASSWORD'),
    json=payload,
)

# Instead of response with job status and results url, this will return the
# JSON response with the result.
pprint(response.json())

<?php

$params = [
    'source' => 'universal',
    'url' => 'https://www.example.com',
    'render' => 'html',
];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://realtime.oxylabs.io/v1/queries");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($params));
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_USERPWD, "USERNAME" . ":" . "PASSWORD");

$headers = array();
$headers[] = "Content-Type: application/json";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
echo $result;

if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close($ch);

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

namespace OxyApi
{
    class Program
    {
        static async Task Main()
        {
            const string Username = "YOUR_USERNAME";
            const string Password = "YOUR_PASSWORD";

            var parameters = new Dictionary<string, string>()
            {
                { "source", "universal" },
                { "url", "https://www.example.com" },
                { "render" : "html" },
            };


            var client = new HttpClient();

            Uri baseUri = new Uri("https://realtime.oxylabs.io");
            client.BaseAddress = baseUri;

            var requestMessage = new HttpRequestMessage(HttpMethod.Post, "/v1/queries");
            requestMessage.Content = JsonContent.Create(parameters);

            var authenticationString = $"{Username}:{Password}";
            var base64EncodedAuthenticationString = Convert.ToBase64String(System.Text.ASCIIEncoding.UTF8.GetBytes(authenticationString));
            requestMessage.Headers.Add("Authorization", "Basic " + base64EncodedAuthenticationString);

            var response = await client.SendAsync(requestMessage);
            var contents = await response.Content.ReadAsStringAsync();

            Console.WriteLine(contents);
        }
    }
}

package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"net/http"
)

func main() {
	const Username = "YOUR_USERNAME"
	const Password = "YOUR_PASSWORD"

	payload := map[string]string{
		"source": "universal",
		"url": "https://www.example.com",
        	"render": "html",
	}

	jsonValue, _ := json.Marshal(payload)

	client := &http.Client{}
	request, _ := http.NewRequest("POST",
		"https://realtime.oxylabs.io/v1/queries",
		bytes.NewBuffer(jsonValue),
	)

	request.SetBasicAuth(Username, Password)
	response, _ := client.Do(request)

	responseText, _ := ioutil.ReadAll(response.Body)
	fmt.Println(string(responseText))
}

package org.example;

import okhttp3.*;
import org.json.JSONObject;

public class Main implements Runnable {
    private static final String AUTHORIZATION_HEADER = "Authorization";
    public static final String USERNAME = "YOUR_USERNAME";
    public static final String PASSWORD = "YOUR_PASSWORD";

    public void run() {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("source", "universal");
        jsonObject.put("url", "https://www.example.com");
        jsonObject.put("render", "html");

        Authenticator authenticator = (route, response) -> {
            String credential = Credentials.basic(USERNAME, PASSWORD);

            return response
                    .request()
                    .newBuilder()
                    .header(AUTHORIZATION_HEADER, credential)
                    .build();
        };

        var client = new OkHttpClient.Builder()
                .authenticator(authenticator)
                .build();

        var mediaType = MediaType.parse("application/json; charset=utf-8");
        var body = RequestBody.create(jsonObject.toString(), mediaType);
        var request = new Request.Builder()
                .url("https://realtime.oxylabs.io/v1/queries")
                .post(body)
                .build();

        try (var response = client.newCall(request).execute()) {
            assert response.body() != null;
            System.out.println(response.body().string());
        } catch (Exception exception) {
            System.out.println("Error: " + exception.getMessage());
        }

        System.exit(0);
    }

    public static void main(String[] args) {
        new Thread(new Main()).start();
    }
}

import fetch from 'node-fetch';

const username = 'YOUR_USERNAME';
const password = 'YOUR_PASSWORD';
const body = {
  'source': 'universal',
  'url': 'https://www.example.com',
  'render': 'html'
};
const response = await fetch('https://realtime.oxylabs.io/v1/queries', {
  method: 'post',
  body: JSON.stringify(body),
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + Buffer.from(`${username}:${password}`).toString('base64'),
  }
});

console.log(await response.json());

{
    "source": "universal", 
    "url": "https://www.example.com", 
    "render": "html"
}

A renderização de JavaScript leva mais tempo para extrair a página. Defina o timeout no lado do cliente para 180 segundos se estiver usando os métodos de integração Realtime ou Proxy Endpoint.

Para garantir o menor consumo de tráfego, nosso sistema não carrega ativos desnecessários durante a renderização da página.

Forçando a renderização em páginas específicas

Para uma extração bem-sucedida, alguns tipos de página de domínios específicos exigem renderização devido ao conteúdo dinâmico. Para esses casos, nosso sistema aplica a renderização automaticamente mesmo se você não definir o render parâmetro, para que você sempre obtenha dados precisos e confiáveis dessas páginas, que de outra forma seriam difíceis.

Observe que trabalhos renderizados consomem mais tráfego em comparação com trabalhos não renderizados.

Se quiser desativar a renderização, você pode fazer isso adicionando o seguinte parâmetro às suas solicitações:

"render": ""

A lista completa de destinos afetados é mantida no arquivo abaixo. Queremos que nossos usuários estejam totalmente cientes disso ao extrair as seguintes páginas:

Domínios com renderização forçada

Domínio

Categoria de renderização

acmemarkets

product_pages

adorebeauty

product

aeroin

all

agrizone

all

ajog

all

albertsons

aisles; product_pages; search

allegro

all

amazon

amazon_bestsellers

anbima

all

andronicos

product_pages

appliancesonline

all

aruodas

all

asda

search

auto5

all

avfoni

all

avito

all

b-parts

product

bakersplus

product; categoria

bedbathandbeyond

all

bergdorfgoodman

all

Bestbuy

site

bevmo

all

bidfax

all

bilbasen

all

binglee

all

blibli

all

bloomingdales

all

book-secure

all

bookscouter

all

boulanger

all

canadagoose

all

canadiangamingbusiness

all

car

all

carfax

all

cargurus

all

carrefour

all

carrsqc

product_pages

carsales

all

carters

all

casasbahia

search

cec

all

ceneo

all

challenger

all

chewy

all

choicehotels

all

chrono24

all

citymarket

product; categoria

continentalwigs

all

costco

products; categories (url)

crunchbase

all

csod

all

cuinsight

all

darty

all

davidyurman

all

dillons

product; categoria

dergahtesbih

all

dextools

all

didi-food

all

didongviet

all

displays2go

all

ebay

all

ecsc-expat

all

edaboard

all

elcajonmitsubishi

all

elcapitalfinanciero

all

electroplanet

all

eraspace

all

etsy

all

exchange4media

all

expedia

organic_requests

extendedstayamerica

all

facebook

marketplace

fedex

all

flooranddecor

all

fmkorea

all

fotocasa

all

food4less

product; categoria

foodsco

product; categoria

fredmeyer

product; categoria

frysfood

product; categoria

g2

all

gemini

all

gerbes

product; categoria

glassdoor

all

gnc

product

goflink

all

google

ai_overview;maps

gopuff

all

grainger

all

greggyoungcdjratlantic

all

grofers

all

grok

all

haldex

all

harristeeter

product; search; categoria; root

harrods

all

harveynorman

all

hasznaltauto

all

headtopics

all

homecare

all

homedepot

search

homehardware

all

hyatt

all

hydradynellc

all

icrimewatch

all

ifood

delivery

immobilienscout24

all

indeed

all

instagram

all

interdiscount

all

intermarche

all

itsynergy

all

janesvillevw

all

jaycfoods

product; categoria

jbhifi

all

jewelosco

product_pages

kaina24

all

kayak

all

kingsoopers

product; categoria

kroger

all

laprensagrafica

all

latamairlines

all

lazada

all

leboncoin

all

leclercdrive

all

lexusofatlanticcity

all

lifestyleasia

all

loblaws

all

loccitane

all

lowes

product

loyalty360

all

luisaviaroma

all

macys

marca;em destaque;product

magazineluiza

product

marianos

product; categoria

master-outillage

all

mavs

all

mcmaster

all

medscape

all

menards

all

mercadolibre

all

metromarket

product; categoria

milatcikolata

all

mister-auto

all

neimanmarcus

all

norauto

all

nordstrom

all

oocl

all

openai (chatgpt)

all

ozon

all

pay-less

all

pedidosya

all

perplexity

all

petco

all

picknsave

product; categoria

pointp

all

powerbuy

all

pricerunner

all

printus

all

publix

all

qfc

product; categoria

radwell

all

ralphs

product; categoria

raptorsupplies

all

realadvisor

API

realestate

all

redfin

localização

reporteindigo

all

researchgate

PDF

reuters

all

ripley

product_pages

runnersneed

all

rvtrader

all

safeway

aisles;product_pages;search

sahibinden

all

saksfifthavenue

all

sbermarket

all

secure-hotel-booking

all

senheng

all

sephora

all

shaws

product_pages

shein

all

shi

all

shoppersdrugmart

all

similarweb

all

smappliance

all

smithsfoodanddrug

product; categoria

smythstoys

all

sobeys

all

sociolla

all

speedo

all

starmarket

product_pages

stockx

all

stupiddope

all

svastara

all

takealot

all

target

all

theaustralian

all

theiet

all

thenonprofittimes

all

thespaces

all

tiki

all

tiktok

all;search;usuário

tmall

all

tomthumb

product_pages

tractorsupply

search

trendyol

all

truckpaper

all

truclothing

all

truepeoplesearch

all

upwork

all

vimeo

all

vivadodgeramfiat

all

vons

all

wabco-customercentre

all

walmart

geo_location; search_with_video

watchfinder

all

weismarkets

orgânico

vinho

all

winoui

all

wipo

all

worten

products

wyndhamhotels

all

yelp

all

zalando

all

zoro

all

Instruções do navegador

Quando uma página precisar de interação, como clicar em um botão, inserir um termo de busca ou rolar para carregar mais itens, você pode definir suas próprias browser_instructions que são executadas enquanto a página é renderizada.

A maneira mais fácil de criar instruções do navegador é o construtor visual com IA no Web Scraper API Playground. Saiba mais aqui.

Início rápido

Antes de tudo, as instruções do navegador exigem o render parâmetro, seja html ou png, e são fornecidas como uma lista no browser_instructions campo. Cada item da lista é executado em ordem.

Suponha que você queira buscar por caixas de pizza em um site — digite o termo no campo de busca, clique no botão de busca e aguarde 5 segundos para os resultados carregarem:

{
    "source": "universal",
    "url": "https://www.etsy.com/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "input",
            "value": "pizza boxes",
            "selector": {
                "type": "css",
                "value": "#global-enhancements-search-query"
            }
        },
        {
            "type": "click",
            "selector": {
                "type": "css",
                "value": "button[data-id='gnav-search-submit-button']"
            }
        },
        {
            "type": "wait",
            "wait_time_s": 5
        }
    ]
}

O resultado contém o HTML após a execução das instruções:

{
  "results": [
    {
      "content": "<!DOCTYPE html><html lang=\"en-US\">  Search results for \"pizza boxes\"  </html>",
      "created_at": "2026-08-19 12:23:06",
      "updated_at": "2026-08-19 12:23:24",
      "page": 1,
      "url": "https://www.etsy.com/search?q=pizza+boxes&ref=search_bar&instant_download=false",
      "job_id": "7495817623108602881",
      "is_render_forced": false,
      "type": "raw",
      "status_code": 200
    }
  ]
}

O HTML extraído deve ficar assim:

Obtendo recursos do navegador

Fornecemos uma instrução de navegador independente para obter recursos do navegador.

A função está definida aqui:

Usando fetch_resource resultará no job retornando a primeira ocorrência de um recurso Fetch/XHR que corresponda ao formato fornecido, em vez do HTML que está sendo direcionado.

Suponha que queiramos apontar para um recurso GraphQL que é obtido ao visitar uma página de produto de forma orgânica no navegador. Forneceremos as informações do job assim:

{
    "source": "universal",
    "url": "https://petstore.swagger.io/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "fetch_resource",
            "filter": "/v2/swagger.json"
        }
    ]
}

Essas instruções resultarão em um resultado assim:

{
    "results": [
        {
            "content": "{\"swagger\":\"2.0\",\"info\":{\"description\":\"This is a sample server Petstore server. ...",
            "created_at": "2026-09-17 12:27:43",
            "updated_at": "2026-09-17 12:28:29",
            "page": 1,
            "url": "https://petstore.swagger.io/v2/swagger.json",
            "job_id": "7506328031753955329",
            "status_code": 200
        }
    ],
    "job": {...}
}

Lista de instruções de navegador suportadas

Argumentos gerais

Todas as instruções definidas abaixo têm um conjunto consistente de argumentos. Os argumentos são os seguintes.

`tipo`

Tipo: Enum["click", "input", "scroll", "scroll_to_bottom", "wait", "wait_for_element", "fetch_resource"]
Descrição: Tipo de instrução do navegador.
Obrigatório: verdadeiro

`timeout_s`

Tipo: inteiro
Descrição: Quanto tempo até a ação ser ignorada se não for concluída a tempo.
Restrições: 0 < timeout_s <= 60
Valor padrão: 5

`wait_time_s`

Tipo: inteiro
Descrição: Quanto tempo esperar antes de executar a próxima ação.
Restrições: 0 < wait_time_s <= 60
Valor padrão: 0

`on_error`

Tipo: Enum["error", "skip"]
Descrição: Indica o que fazer com as instruções caso esta instrução falhe:
- "error": Interrompe a execução das instruções do navegador.
- "skip": Continua com a próxima instrução.
Valor padrão: "error"

Exemplo com argumentos gerais

{
    "type": "wait_for_element",
    "selector": {
        "type": "text",
        "value": "Load More Items"
    },
    "timeout_s": 5,
    "wait_time_s": 2,
    "on_error": "skip"

}

Instruções

`click`

Descrição: Clica em um elemento e aguarda uma quantidade definida de segundos.
Argumentos:
- type: string = "click"
- selector: dicionário
  - type: Enum["xpath", "css", "text"]
  - value: string

Exemplo:

{
    "type": "click",
    "selector": {
        "type": "xpath",
        "value": "//button"
    }
}

`input`

Descrição: Insere um texto em um elemento selecionado.
Argumentos:
- type: string = "input"
- selector: dicionário
  - type: Enum["xpath", "css", "text"]
  - value: string
- value: string

Exemplo:

{
    "type": "input",
    "selector": {
        "type": "xpath",
        "value": "//input"
    },
    "value": "pizza boxes"
}

`scroll`

Descrição: Rola uma quantidade definida de pixels.
Argumentos:
- type: string = "scroll"
- x: inteiro
- y: inteiro

Exemplo:

{
    "type": "scroll",
    "x": 0,
    "y": 100
}

`scroll_to_bottom`

Descrição: Rola até o final por uma quantidade definida de segundos.
Argumentos:
- type: string = "scroll_to_bottom"

Exemplo:

{
    "type": "scroll_to_bottom",
    "timeout_s": 10
}

`wait`

Descrição: Aguarda uma quantidade definida de segundos.
Argumentos:
- type: string = "wait"

Exemplo:

{
    "type": "wait",
    "wait_time_s": 2
}

`wait_for_element`

Descrição: Aguarda o elemento carregar por uma quantidade definida de segundos.
Argumentos:
- type: string = "wait_for_element"
- selector: dicionário
  - type: Enum["xpath", "css", "text"]
  - value: string

Exemplo:

{
    "type": "wait_for_element",
    "selector": {
        "type": "text",
        "value": "Load More Items"
    },
    "timeout_s": 5
}

`fetch_resource`

A fetch_resource instrução deve ser a última instrução na lista de instruções do navegador; quaisquer instruções subsequentes não serão executadas.

Descrição: Obtém a primeira ocorrência de um recurso Fetch/XHR correspondente ao padrão definido.
Argumentos:
- type: string = "fetch_resource"
- filter: string(RegEx expression)
- on_error: Enum["error", "skip"]

Exemplo:

{
    "type": "fetch_resource",
    "filter": "/graphql/item/"
}

Validação das instruções

Qualquer inconsistência em relação ao formato da instrução resultará em um 400 código de status e uma mensagem de erro correspondente.

Por exemplo, uma carga útil como esta:

{
    "source": "universal",
    "url": "https://www.example.com/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "unsupported-wait",
            "wait_time_s": 5
        }
    ]
}

Resultará em:

{    
    "errors": {
        Tipo de ação não suportado `unsupported-wait`, escolha entre 'click,fetch_resource,input,scroll,scroll_to_bottom,wait,wait_for_element'
    }
}

Resolução de problemas

Códigos de status

Veja nossos códigos de resposta descritos aqui. Os códigos de status em relação à validação das instruções estão documentados aqui.

Erros e avisos

Se houver um erro ou aviso resultante de suas ações de navegação, você o encontrará no resultado sob as chaves browser_instructions_error ou browser_instructions_warnings. Por exemplo, se você enviou as seguintes instruções do navegador e o esperado xpath não estiver localizado na página, o resultado incluirá um aviso.

browser_instructions:

[
    {
        "type": "input", 
        "selector": {
            "type": "xpath",
            "value": "//input[@type='search']"
        },
        "value": "oxylabs"
    }
]

Resultados:

{
  "results": [
    {
      "content": "<!doctype html><html>
        Conteúdo após executar as instruções      
      </html>",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "browser_instructions_warnings": [
        {
          "action_type": "click",
          "msg": "Não foi possível encontrar o tipo de seletor `xpath` com o valor `//input[@type=search]` na página."
        },
      ],
      "page": 1,
      "url": "https://example.com",
      "job_id": "7117835067442906113",
      "status_code": 200
    }
  ]
}

Possíveis erros e avisos

Ocorreu um erro inesperado ao converter instruções do navegador em ações.

Ocorreu um erro inesperado ao executar {action.type} instruções do navegador.

Ação {action.type} esgotou o tempo.

Não foi possível encontrar o tipo de seletor {selector.type} com o valor {selector.value} na página.

AnteriorDomínio e localidade

PróximoCustom Parser

Atualizado há 1 dia

Isto foi útil?