Renderizado de JS y control del navegador

Aprende cómo usar un parámetro render para definir instrucciones del navegador en Web Scraper API para que puedas extraer páginas dinámicas complejas.

Renderizado de JavaScript

Si la página que desea extraer requiere JavaScript para cargar dinámicamente todos los datos necesarios en el DOM, puede incluir un render parámetro en sus solicitudes en lugar de configurar y usar manualmente instrucciones personalizadas del navegador. Las solicitudes con este parámetro se renderizarán por completo y los datos se almacenarán en un archivo HTML o en una captura PNG, según el parámetro especificado.

HTML

Establezca el render parámetro para html para obtener la salida sin procesar de la página renderizada.

PNG (Captura de pantalla)

Establezca el render parámetro para png para obtener una captura de pantalla codificada en Base64 de la página renderizada.

Si desea extraer una imagen y descargarla, consulte esta sección.

Solicitar ejemplo

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

# 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=('user', 'pass1'),
    json=payload,
)

# En lugar de una respuesta con el estado del trabajo y la URL de resultados, esto devolverá la
# respuesta JSON con el 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());

# La cadena completa que envíes tiene que estar codificada en URL.

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

El renderizado de JavaScript tarda más en extraer la página. Establezca un timeout del lado del cliente en 180 segundos si usa los métodos de integración Realtime o Proxy Endpoint.

Para garantizar el menor consumo de tráfico, nuestro sistema no carga activos innecesarios durante el renderizado de la página.

Forzar el renderizado en páginas específicas

Para una extracción exitosa, algunos tipos de páginas de dominios específicos requieren renderizado debido a su contenido dinámico. Nuestro sistema aplica automáticamente el renderizado para estas páginas, incluso si el usuario no lo establece explícitamente.

Tenga en cuenta que los trabajos renderizados consumen más tráfico que los trabajos no renderizados.

Queremos que nuestros usuarios sean plenamente conscientes de esto al extraer las siguientes páginas:

6KB

Force render domains.csv

Abrir

Este enfoque ofrece la mejor experiencia posible de extracción, garantizando la precisión y fiabilidad de los datos de estas páginas exigentes.

Si desea desactivar el renderizado, puede hacerlo añadiendo el siguiente parámetro a sus solicitudes:

"render": ""

Instrucciones del navegador

Puede definir sus propias instrucciones del navegador que se ejecutan al renderizar JavaScript.

La forma más sencilla de configurar las instrucciones del navegador es usando el creador visual de instrucciones del navegador con IA en el Web Scraper API Playground. Lea sobre ello aquí.

Uso

Para usar instrucciones del navegador, proporciona un conjunto de browser_instructions al crear un trabajo.

Supongamos que quieres buscar el término pizza boxes en un sitio web.

Un ejemplo de los parámetros del trabajo sería el siguiente:

{
    "source": "universal",
    "url": "https://www.ebay.com/",
    "render": "html",
    "browser_instructions": [
        {
            "type": "input",
            "value": "cajas para 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
        }
    ]
}

Paso 1. Debes proporcionar el "render": "html" parámetro.

Paso 2. Las instrucciones del navegador deben describirse en el campo "browser_instructions" .

Las instrucciones de navegador de ejemplo anteriores especifican que el objetivo es introducir un término de búsqueda pizza boxes en un campo de búsqueda, hacer clic en el botón search y esperar 5 segundos a que cargue el contenido.

El resultado extraído debería verse así:

{
  "results": [
    {
      "content": "<!doctype html><html>
        Contenido después de ejecutar las instrucciones      
      </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
    }
  ]
}

El HTML extraído debería verse así:

Obtener recursos del navegador

Proporcionamos una instrucción de navegador independiente para obtener recursos del navegador.

La función está definida aquí:

El uso del fetch_resource hará que el trabajo devuelva la primera aparición de un recurso Fetch/XHR que coincida con el formato proporcionado en lugar del HTML al que se dirige.

Supongamos que queremos apuntar a un recurso GraphQL que se obtiene al visitar una página de producto de forma orgánica en el navegador. Proporcionaremos la información del trabajo así:

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

Estas instrucciones darán como resultado algo así:

{
  "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 instrucciones de navegador compatibles

Argumentos generales

Todas las instrucciones definidas a continuación tienen un conjunto coherente de argumentos. Los argumentos son los siguientes.

`escribir`

Tipo: Enum["click", "input", "scroll", "scroll_to_bottom", "wait", "wait_for_element", "fetch_resource"]
Descripción: Tipo de instrucción del navegador.

`timeout_s`

Tipo: int
Descripción: Cuánto tiempo hasta que se omite la acción si no se completa a tiempo.
Restricciones: 0 < timeout_s <= 60
Valor predeterminado: 5

`wait_time_s`

Tipo: int
Descripción: Cuánto tiempo esperar antes de ejecutar la siguiente acción.
Restricciones: 0 < wait_time_s <= 60
Valor predeterminado: 0

`on_error`

Tipo: Enum["error", "skip"]
Descripción: Indicador de qué hacer con las instrucciones en caso de que esta instrucción falle:
- "error": Detiene la ejecución de las instrucciones del navegador.
- "skip": Continúa con la siguiente instrucción.
Valor predeterminado: "error"

Ejemplo con argumentos generales

{
    "type": "wait_for_element",
    "selector": {
        "type": "text",
        "value": "Cargar más elementos"
    },
    "timeout_s": 5,
    "wait_time_s": 2,
    "on_error": "skip"

}

Instrucciones

`clic`

Descripción: Hace clic en un elemento y espera una cantidad fija de segundos.
Args:
- type: str = "click"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str

Ejemplo:

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

`input`

Descripción: Introduce texto en un elemento seleccionado.
Args:
- type: str = "input"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str
- value: str

Ejemplo:

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

`scroll`

Descripción: Desplaza una cantidad fija de píxeles.
Args:
- type: str = "scroll"
- x: int
- y: int

Ejemplo:

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

`scroll_to_bottom`

Descripción: Desplaza hasta el final durante una cantidad fija de segundos.
Args:
- type: str = "scroll_to_bottom"

Ejemplo:

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

`esperar`

Descripción: Espera una cantidad fija de segundos.
Args:
- type: str = "wait"

Ejemplo:

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

`wait_for_element`

Descripción: Espera a que el elemento cargue durante una cantidad fija de segundos.
Args:
- type: str = "wait_for_element"
- selector: dict
  - type: Enum["xpath", "css", "text"]
  - value: str

Ejemplo:

{
    "type": "wait_for_element",
    "selector": {
        "type": "text",
        "value": "Cargar más elementos"
    },
    "timeout_s": 5
}

`fetch_resource`

El fetch_resource la instrucción debe ser la instrucción final en la lista de instrucciones del navegador; cualquier instrucción posterior no se ejecutará.

Descripción: Obtiene la primera ocurrencia de un recurso Fetch/XHR que coincida con el patrón establecido.
Args:
- type: str = "fetch_resource"
- filter: str(expresión RegEx)
- on_error: Enum["error", "skip"]

Ejemplo:

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

Validación de instrucciones

Cualquier inconsistencia con respecto al formato de la instrucción resultará en un 400 código de estado y un mensaje de error correspondiente.

Por ejemplo, una carga útil como esta:

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

Dará como resultado:

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

Solución de problemas

Códigos de estado

Consulta nuestros códigos de respuesta descritos aquí. Los códigos de estado relacionados con la validación de instrucciones están documentados aquí.

Errores y advertencias

Si hay un error o una advertencia resultante de sus acciones de navegación, la encontrará en el resultado bajo las claves browser_instructions_error o browser_instructions_warnings. Por ejemplo, si ha enviado las siguientes instrucciones del navegador y el xpath esperado no se encuentra en la página, el resultado incluirá una advertencia.

browser_instructions:

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

Resultados:

{
  "results": [
    {
      "content": "<!doctype html><html>
        Contenido después de ejecutar las instrucciones      
      </html>",
      "created_at": "2023-10-11 11:35:23",
      "updated_at": "2023-10-11 11:36:08",
      "browser_instructions_warnings": [
        {
          "action_type": "click",
          "msg": "No se pudo encontrar en la página el tipo de selector `xpath` con el valor `//input[@type=search]`."
        },
      ],
      "page": 1,
      "url": "https://example.com",
      "job_id": "7117835067442906113",
      "status_code": 200
    }
  ]
}

Posibles errores y advertencias

Se produjo un error inesperado al convertir las instrucciones del navegador en acciones.

Se produjo un error inesperado al ejecutar {action.type} instrucciones del navegador.

Acción {action.type} agotó el tiempo de espera.

No se pudo encontrar el tipo de selector {selector.type} con el valor {selector.value} en la página.

AnteriorDominio y locale SiguienteCustom Parser

Última actualización hace 1 mes

¿Te fue útil?