Renderização de 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 raspar páginas dinâmicas complexas.

Renderização de JavaScript

Se a página que você deseja extrair exigir JavaScript para carregar dinamicamente todos os dados necessários no DOM, você pode incluir um render parâmetro em suas requisições em vez de configurar e usar manualmente instruções personalizadas do navegador. As requisições com esse parâmetro serão renderizadas بالكامل, e os dados serão armazenados em um arquivo HTML ou em uma captura de tela PNG, dependendo do parâmetro especificado.

HTML

Defina o render parâmetro para html para obter a saída bruta da página renderizada.

PNG (Captura de tela)

Defina o render parâmetro para png para obter uma captura de tela codificada em Base64 da página renderizada.

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

Exemplo de solicitação

curl --user "user:pass" \\
'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

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

# Obtenha a response.
response = requests.request(
    'POST',
    'https://realtime.oxylabs.io/v1/queries',
    auth=('user', 'pass1'),
    json=payload,
)

# Em vez de uma resposta com status do job e URL dos resultados, isso retornará o
# resposta JSON com o resultado.
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, "user" . ":" . "pass1");

$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());

# A string inteira que você enviar precisa estar codificada em URL.

https://realtime.oxylabs.io/v1/queries?source=universal&url=https%3A%2F%2Fwww.example.com%2F&render=html&access_token=12345abcde

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 Realtime ou Proxy Endpoint métodos de integração.

Para garantir o menor consumo de tráfego possível, 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. Nosso sistema aplica automaticamente a renderização para essas páginas, mesmo que não seja definida explicitamente pelo usuário.

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

Queremos que nossos usuários estejam totalmente cientes disso ao extrair as seguintes páginas:

6KB

Force render domains.csv

Abrir

Essa abordagem oferece a melhor experiência de extração possível, garantindo a precisão e a confiabilidade dos dados nessas páginas desafiadoras.

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

"render": ""

Instruções do navegador

Você pode definir suas próprias instruções do navegador que são executadas ao renderizar JavaScript.

A maneira mais fácil de configurar instruções do navegador é usando o criador visual de instruções de navegador com IA no Web Scraper API Playground. Leia sobre isso aqui.

Uso

Para usar instruções do navegador, forneça um conjunto de browser_instructions ao criar uma tarefa.

Digamos que você queira pesquisar o termo pizza boxes em um site.

Um exemplo de parâmetros da tarefa seria o seguinte:

{
    "source": "universal",
    "url": "https://www.ebay.com/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "input",
            "value": "caixas de pizza",
            "selector": {
                "type": "xpath",
                "value": "//input[@class='gh-tb ui-autocomplete-input']"
            }
        },
        {
            "type": "click",
            "selector": {
                "type": "xpath",
                "value": "//input[@type='submit']"
            }
        },
        {
            "type": "wait",
            "wait_time_s": 5
        }
    ]
}

Etapa 1. Você deve fornecer o "render": "html" parâmetro.

Etapa 2. As instruções do navegador devem ser descritas no campo "browser_instructions" .

As instruções de exemplo acima especificam que o objetivo é inserir um termo de pesquisa pizza boxes em um campo de pesquisa, clicar no botão pesquisar e esperar 5 segundos para o conteúdo carregar.

O resultado coletado deve ser o seguinte:

{
  "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",
      "page": 1,
      "url": "https://www.ebay.com/",
      "job_id": "7117835067442906113",
      "status_code": 200
    }
  ]
}

O HTML coletado deve ser assim:

Obtendo recursos do navegador

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

A função é definida aqui:

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

Digamos que queremos direcionar um recurso GraphQL que é obtido ao visitar uma página de produto organicamente no navegador. Forneceremos as informações da tarefa assim:

{
    "source": "universal",
    "url": "https://www.example.com/product-page/123",
    "render": "html",
    "browser_instructions": [
        {
            "type": "fetch_resource",
            "filter": "/graphql/product-info/123"
        }
    ]
}

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

{
  "results": [
    {
      "content": "{'product_id': 123, 'description': '', 'price': 123}",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "page": 1,
      "url": "https://example.com/v1/graphql/product-info/123/",
      "job_id": "7117835067442906114",
      "status_code": 200
    }
  ]
}

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.

`type`

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

`timeout_s`

Tipo: int
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: int
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: Indicador do 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": "Carregar mais itens"
    },
    "timeout_s": 5,
    "wait_time_s": 2,
    "on_error": "skip"

}

Instruções

`click`

Descrição: Clica em um elemento e espera um número definido de segundos.
Args:
- type: str = "click"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str

Exemplo:

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

`input`

Descrição: Insere um texto em um elemento selecionado.
Args:
- type: str = "input"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str
- value: str

Exemplo:

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

`scroll`

Descrição: Rola um número definido de pixels.
Args:
- type: str = "scroll"
- x: int
- y: int

Exemplo:

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

`scroll_to_bottom`

Descrição: Rola até o fim por um número definido de segundos.
Args:
- type: str = "scroll_to_bottom"

Exemplo:

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

`wait`

Descrição: Espera um número definido de segundos.
Args:
- type: str = "wait"

Exemplo:

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

`wait_for_element`

Descrição: Espera o elemento carregar por um número definido de segundos.
Args:
- type: str = "wait_for_element"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str

Exemplo:

{
    "type": "wait_for_element",
    "selector": {
        "type": "text",
        "value": "Carregar mais itens"
    },
    "timeout_s": 5
}

`fetch_resource`

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

Descrição: Busca a primeira ocorrência de um recurso Fetch/XHR correspondente ao padrão definido.
Args:
- type: str = "fetch_resource"
- filter: str(expressão RegEx)
- on_error: Enum["error", "skip"]

Exemplo:

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

Validação de 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, um payload como:

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

Resultará em:

{    
    "errors": {
        "message": "Unsupported action type `unsupported-wait`, choose from 'click,fetch_resource,input,scroll,scroll_to_bottom,wait,wait_for_element'"
    }
}

Soluçã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ê tiver enviado as seguintes instruções do navegador e o esperado xpath não for 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 ação {action.type} atingiu o tempo limite.

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

AnteriorDomínio e locale PróximoCustom Parser

Atualizado há 1 mês

Isto foi útil?