Visión LLM Web Scraping: Lee la captura de pantalla, no el DOM

Un modelo de visión no lee tu HTML; lee una imagen de la página. Eso cambia lo que significa "scraping": en lugar de buscar el selector que contiene un valor, le das una captura de pantalla a un modelo y preguntas qué ve. El navegador de scraping sin scraping toma esa captura en la nube a través del Protocolo de Herramientas de Desarrollo de Chrome, y un modelo multimodal convierte los píxeles en datos estructurados.

Esta es la herramienta a la que recurrir cuando el DOM se opone a ti: un precio incrustado en una imagen, un gráfico sin tabla subyacente, un widget renderizado en un lienzo, o un diseño donde el significado reside en la posición en lugar de en las etiquetas. Esta guía se conecta al Navegador de Scraping, captura una captura de pantalla de una página renderizada y tiene un modelo de visión que devuelve JSON de la imagen, con cada paso ejecutado en vivo.

Por qué leer una captura de pantalla en lugar del DOM

El scraping basado en selectores asume que los datos que deseas son un valor en el marcado. A menudo, no es así. Una tienda puede renderizar precios como imágenes para disuadir a los bots, un panel puede dibujar números en un elemento de lienzo que no contiene texto, y una página de marketing puede codificar una comparación enteramente en diseño visual. En esos casos, el HTML está vacío del valor o tan enredado que el selector es más frágil que la cosa a la que apunta.

Un modelo de visión elude el marcado. Ve lo que una persona ve: la página renderizada y dispuesta, y lee los valores de la imagen. La captura de pantalla tiene que ser fiel, razón por la cual proviene de un navegador real: el Navegador de Scraping renderiza la página del lado del servidor, ejecuta sus scripts y captura el marco que un usuario vería, para que el modelo razone sobre la página terminada en lugar de una medio construida.

Requisitos

Necesitas Python 3.9 o más reciente, el cliente playwright y requests, una clave API de Scrapeless para la sesión del navegador y una clave para un modelo multimodal. Obtén la clave de Scrapeless en el plan gratuito en app.scrapeless.com. Mantén ambas claves en variables de entorno; viajan en una URL de conexión y un encabezado de autorización, nunca en el código fuente.

Instalar

pip install playwright requests

Configurar

export SCRAPELESS_API_KEY="tu_clave_api_de_scrapeless"
export OPENROUTER_API_KEY="tu_clave_api_del_modelo"

Capturar la captura de pantalla con el Navegador de Scraping

Conéctate al navegador en la nube a través de CDP, abre la página y captura el área de visualización. La captura de pantalla es un PNG producido por el mismo Chromium que renderizó la página, por lo que lo que recibe el modelo es exactamente lo que vería un visitante. La captura se realiza a través del Protocolo de Herramientas de Desarrollo de Chrome y devuelve bytes en el formato de imagen PNG:

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

print("bytes de la captura de pantalla:", len(png))
print("firma PNG ok:", png[:8] == b"\x89PNG\r\n\x1a\n")

La ejecución confirma que una imagen real ha regresado:

bytes de la captura de pantalla: 55462
firma PNG ok: True

Obtén tu clave API en el plan gratuito: app.scrapeless.com

Leer la captura de pantalla con un modelo de visión

Codifica el PNG como una URL de datos en base64, envíalo a un modelo multimodal junto con el esquema que deseas y limita la respuesta a JSON. El modelo lee la página renderizada y devuelve los campos: sin selectores, sin recorrido del DOM. Base64 sigue el estándar de codificación de datos Base64, que es como la imagen viaja dentro de una solicitud JSON. La tubería completa de captura y lectura:

import os, base64, json, requests
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

img = "data:image/png;base64," + base64.b64encode(png).decode()
resp = requests.post(
    "https://openrouter.ai/api/v1/chat/completions",
    headers={"Authorization": f"Bearer {os.environ['OPENROUTER_API_KEY']}", "Content-Type": "application/json"},
    json={"model": "google/gemini-2.5-flash-lite",
          "messages": [{"role": "user", "content": [
              {"type": "text", "text": 'De esta captura de pantalla de una página de citas, devuelve JSON '
                                       '{"quotes":[{"author":..., "text":...}]} para las primeras 3 citas '
                                       'que puedes ver. Devuelve SOLO JSON.'},
              {"type": "image_url", "image_url": {"url": img}}]}],
          "response_format": {"type": "json_object"}, "temperature": 0},
    timeout=120,
)
resp.raise_for_status()
quotes = json.loads(resp.json()["choices"][0]["message"]["content"])["quotes"]
print("citas extraídas de la imagen:", len(quotes))
print("primer autor de la imagen:", quotes[0]["author"])

El modelo lee los píxeles y devuelve los registros:

citas extraídas de la imagen: 3
primer autor de la imagen: Albert Einstein

La imagen nunca fue analizada como HTML. El nombre del autor provino del texto renderizado en la captura de pantalla, razón por la cual este enfoque sobrevive en una página que oculta el mismo valor detrás de una etiqueta de imagen o un lienzo.

Cuándo la visión justifica su costo, y cuándo no

El raspado por visión no es gratuito: una imagen consume muchos más tokens que el fragmento de HTML que contiene el mismo valor, y el modelo puede leer incorrectamente texto pequeño o de bajo contraste. Así que utilízalo de manera deliberada. Vale la pena cuando el valor es realmente visual: texto incorporado en imágenes, gráficos y widgets de lienzo, PDFs renderizados en una página, o un diseño cuyo significado es espacial. Cuando los datos son texto limpio en el DOM, un selector es más barato, rápido y exacto, y leerlo desde el marcado es la mejor opción. La fortaleza de emparejar el Navegador de Raspado con un modelo de visión es que puedes alternar entre los dos en la misma sesión renderizada: analiza el DOM donde es confiable, captura pantalla y lee donde no lo es.

Conclusión

El raspado por modelo de visión lee la página de la manera en que lo hace una persona. El Navegador de Raspado Sin Residuos renderiza el objetivo y captura una captura de pantalla fiel en la nube a través de CDP, y un modelo multimodal convierte esa imagen en JSON estructurado. La ejecución anterior extrajo tres citas y el autor "Albert Einstein" de los píxeles, sin selector en ninguna parte del código. Úsalo donde el DOM no puede llevar el valor, y mantén los selectores para las partes de una página que ya contienen texto limpio: el explicador sobre qué es un raspador LLM enmarca dónde encajan los modelos en la extracción. Lee las capacidades en la página del producto del Navegador de Raspado y compara el volumen de imágenes contra la página de precios antes de ejecutarlo a gran escala.

Únete a nuestra comunidad para reclamar un plan gratuito y comparar notas con otros desarrolladores que construyen canalizaciones de extracción: Discord · Telegram.

Preguntas Frecuentes

P: ¿Cuándo debo raspar por captura de pantalla en lugar de analizar HTML?

Utiliza visión cuando el valor es visual en lugar de textual: un precio renderizado como una imagen, números dibujados en un lienzo, un gráfico sin una tabla subyacente, o un diseño que codifica significado por posición. Cuando los datos son texto limpio en el DOM, un selector CSS es más barato y más exacto.

P: ¿Por qué capturar la captura de pantalla con el Navegador de Raspado en lugar de uno local?

Porque el modelo solo puede leer lo que muestra la captura de pantalla. El Navegador de Raspado renderiza la página del lado del servidor, ejecuta sus scripts y captura el marco terminado desde Chromium en la nube, así que la imagen es la página completamente renderizada, en lugar de una que se carga a medias desde un navegador local sin cabeza que también tienes que mantener.

P: ¿Cómo se incluye la imagen en la solicitud?

Los bytes PNG se codifican en base64 en una URL data:image/png;base64,... y se envían como una parte de contenido image_url junto con el aviso de texto. El modelo recibe la imagen en línea en la misma solicitud JSON que las instrucciones.

P: ¿Devuelve el modelo una estructura confiable?

Restringe la respuesta a un objeto JSON y dale un esquema explícito, como lo hace el ejemplo. El modelo entonces devuelve solo los campos que solicitas. Trata las lecturas visuales de texto pequeño o de bajo contraste con cuidado y valida los valores que deben ser exactos.

P: ¿Es esto más caro que el raspado del DOM?

Sí. Una imagen consume muchos más tokens que el fragmento HTML equivalente, por lo que el raspado por visión cuesta más por página. Úsalo donde soluciona un problema real: datos solo visuales, y analiza el DOM donde el texto ya está disponible.

P: ¿Puedo mezclar los dos enfoques?
Sí, y a menudo es el diseño correcto. Una sola sesión de Scraping Browser puede servir para ambas cosas: analizar el DOM en busca de los campos que se encuentran en un marcado limpio y capturar una captura de pantalla de la región que no lo está, de modo que cada parte de la página se lea de la manera más confiable y económica.