n8n+DiffHook

n8n + Playwright — scraping renderizado sin flota de navegadores

DiffHook ejecuta Playwright por ti en cada comprobación, espera a que la página termine de renderizarse, hace el diff y envía los cambios a n8n por un webhook firmado. Sin Chromium headless que instalar, sin plugins stealth que parchear.

Raspar una SPA React o Vue desde n8n suele implicar pegar el nodo Browserless, una imagen Docker con Playwright instalado o una API de scraping de terceros con su propio baile de auth y rate limits. Todos meten un navegador dentro de tu despliegue n8n. DiffHook le da la vuelta al modelo: el navegador corre de nuestro lado, completamente gestionado, y solo el diff cruza la red — el resto sigue siendo el mismo patrón webhook de n8n.

Empezar gratisLeer la documentación del motor de render
n8n

El hub completo de n8n + DiffHook

Todas las recetas, plantillas y precios de n8n en un solo lugar.

Flujo

Conecta diffs renderizados por Playwright a n8n en 5 pasos

Sin imagen Docker, sin crédito de Browserless, sin instalar Playwright. El navegador vive en DiffHook.

01

Expón un webhook n8n

Crea o reutiliza un flujo n8n con un nodo disparador Webhook. Copia la URL de producción — DiffHook entregará ahí cuando el DOM renderizado cambie.

02

Elige html_rendered y el motor Playwright

Pon type a html_rendered y render.engine a playwright. Añade wait_for_selector o wait_until: networkidle para que DiffHook tome el snapshot solo cuando la app cliente se haya asentado.

03

Aísla el objetivo con un selector CSS

Cuando Playwright termina de renderizar, DiffHook aplica el selector sobre el DOM resuelto. Un selector apretado mantiene el diff enfocado y evita que los flujos n8n se disparen ante cambios de UI irrelevantes.

04

Registra el monitor

Un POST a /v1/monitors con la URL, la config de render, el selector, el intervalo y el webhook n8n como entrega. DiffHook planifica las ejecuciones del navegador y cachea el último DOM válido.

05

Recibe el diff post-render en n8n

En cada cambio, el trigger Webhook de n8n dispara con previous_value, current_value y metadatos de render. Verifica el HMAC y enruta el diff a los nodos como harías con una página estática.

Ejemplo de API

Monitor renderizado por Playwright, un POST

render.engine elige el navegador — pásate a puppeteer cuando quieras. wait_for_selector mantiene el snapshot estable en páginas con mucho JS.

POST /v1/monitors
POST https://api.diffhook.com/v1/monitors
Authorization: Bearer $DIFFHOOK_API_KEY
Content-Type: application/json

{
  "type": "html_rendered",
  "url": "https://spa.example.com/dashboard",
  "render": { "engine": "playwright", "wait_for_selector": ".data-loaded" },
  "css_selector": "#metric-value",
  "interval_seconds": 600,
  "deliveries": [
    {
      "type": "webhook",
      "url": "https://n8n.yourdomain.com/webhook/rendered-change"
    }
  ]
}

Flujo importable

Arranca con un flujo n8n ya hecho

La plantilla verifica el HMAC, extrae el texto renderizado del DOM y publica un resumen limpio en Slack. Impórtala, pega tu clave, listo.

Ver la plantilla n8n en GitHub

FAQ

n8n Playwright — preguntas frecuentes

¿Cuándo conviene Playwright frente al motor HTML normal?
Siempre que el contenido que te importa se renderice en cliente — React, Vue, Svelte o cualquier cosa que traiga datos tras la carga del documento. Si un curl a la URL devuelve una cáscara vacía o un placeholder «loading», necesitas html_rendered. Si el dato ya está en el HTML que DiffHook se trae con un fetch, quédate con html_css — es mucho más rápido y barato.
¿Cómo decide DiffHook que la página ha terminado de renderizar?
Dos mecanismos. O wait_for_selector (DiffHook espera hasta 30 segundos a que el selector aparezca en el DOM) o wait_until: networkidle (la página se considera lista cuando no hay peticiones de red durante 500 ms). Ambos se configuran por monitor para ajustar sitios caprichosos.
¿Puedo pasar cabeceras o cookies personalizadas a Playwright?
Sí. Cada monitor acepta un mapa request_headers y un array cookies. Tokens de auth, cookies de preferencia regional, fijaciones de test A/B — todo se puede limitar al monitor y guardar cifrado. Útil cuando la vista renderizada cambia por segmento de usuario y quieres vigilar uno concreto.
¿Playwright pesa más en los límites del plan?
Las comprobaciones renderizadas cuentan más que las HTML simples (usan un navegador real), pero el ratio está acotado. El plan gratuito permite un número reducido de comprobaciones renderizadas al día; los planes de pago escalan de forma lineal. El panel muestra el coste efectivo de cada monitor para que no haya sorpresas.
¿Y los CAPTCHA y la protección antibots?
La flota Playwright de DiffHook corre con user agents realistas, huellas TLS y parches stealth, lo que resuelve la mayoría de reglas WAF genéricas. Para sitios tras Cloudflare Turnstile o hCaptcha puedes pasar un token resuelto vía request_headers o cambiar al motor Puppeteer, que tiene perfiles de navegador distintos — a veces pasa uno donde el otro se queda fuera.

Flujos relacionados

También geniales con DiffHook

n8n + Puppeteer

El mismo patrón de scraping renderizado con Puppeteer — útil cuando un sitio se comporta distinto bajo Chromium.

Web scraping n8n

Scraping de HTML estático para páginas que no necesitan navegador — más barato y rápido cuando aplica.

Webhook n8n

Profundiza en verificación HMAC, reintentos y replay en la página genérica de n8n-webhook.

Web scraping Zapier

El mismo motor renderizado, Zapier como destino — forma de monitor idéntica, URL de webhook distinta.

Web scraping Make.com

Envía el diff post-render al módulo webhook de Make.com para enrutar en low-code.

Sustituir un script de scraping

¿Migras de un script Playwright + cron? Compara el monitor gestionado punto por punto.

Deja de alojar un navegador solo para diferenciar una página

Scraping renderizado, motores Playwright y Puppeteer, webhooks firmados con HMAC, plan gratuito. Arrancas en menos de un minuto.

Crear cuenta gratisVer precios