n8n+DiffHook

n8n + Playwright — JS-gerendertes Scraping ohne Browserflotte

DiffHook führt Playwright bei jedem Check für Sie aus, wartet, bis die Seite fertig gerendert ist, diffet das Ergebnis und POSTet Änderungen per signiertem Webhook an n8n. Kein Headless-Chromium zum Installieren, keine Stealth-Plugins zum Patchen.

Eine React- oder Vue-SPA aus n8n heraus zu scrapen heißt meist: Browserless-Node zusammenstricken, ein Custom-Docker-Image mit Playwright-Install, oder eine Drittanbieter-Scraping-API mit eigenem Auth- und Rate-Limit-Tanz. Jede Variante packt einen Browser in Ihr n8n-Deployment. DiffHook dreht das Modell um: Der Browser läuft auf unserer Seite, vollständig gemanagt, und nur das Diff geht über die Leitung — der Rest bleibt das vertraute n8n-Webhook-Pattern.

Kostenlos startenRender-Engine-Dokumentation lesen
n8n

Der vollstaendige n8n-+-DiffHook-Hub

Alle n8n-Rezepte, Templates und Preise an einem Ort.

Workflow

Playwright-gerenderte Diffs in n8n einbinden in 5 Schritten

Kein Docker-Image, kein Browserless-Guthaben, keine Playwright-Installation. Der Browser wohnt in DiffHook.

01

n8n-Webhook bereitstellen

Erstellen oder nutzen Sie einen n8n-Workflow mit einem Webhook-Trigger-Node. Kopieren Sie die Produktions-URL — DiffHook liefert hierhin, wann immer sich das gerenderte DOM ändert.

02

html_rendered und Playwright-Engine wählen

Setzen Sie type auf html_rendered und render.engine auf playwright. Ergänzen Sie wait_for_selector oder wait_until: networkidle, damit DiffHook den Snapshot erst zieht, wenn die Client-Side-App ruhig ist.

03

Ziel mit CSS-Selektor isolieren

Nachdem Playwright fertig gerendert hat, wendet DiffHook den Selektor auf das aufgelöste DOM an. Ein enger Selektor hält das Diff fokussiert und verhindert, dass n8n-Workflows bei irrelevanten UI-Änderungen feuern.

04

Monitor registrieren

Einmalig POST an /v1/monitors mit URL, Render-Konfiguration, Selektor, Intervall und dem n8n-Webhook als Zustellung. DiffHook plant die Browser-Runs und cached das zuletzt funktionierende DOM.

05

Post-Render-Diff in n8n empfangen

Bei jeder Änderung feuert der Webhook-Trigger von n8n mit previous_value, current_value und Render-Metadaten. HMAC prüfen, dann das Diff zu den nachgelagerten Nodes routen — genau wie bei einer statischen Seite.

API-Beispiel

Playwright-gerenderter Monitor, ein POST

render.engine wählt den Browser — jederzeit auf puppeteer umschalten. wait_for_selector hält den Snapshot bei JS-lastigen Seiten stabil.

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"
    }
  ]
}

Importierbarer Workflow

Mit einem fertigen n8n-Workflow starten

Das Template prüft den HMAC, zieht den extrahierten Text aus dem gerenderten DOM und postet eine aufgeräumte Zusammenfassung auf Slack. Importieren, Key einfügen, fertig.

n8n-Template auf GitHub ansehen

FAQ

n8n Playwright — häufige Fragen

Wann sollte ich Playwright statt der einfachen HTML-Engine nehmen?
Immer dann, wenn der relevante Inhalt client-seitig gerendert wird — React, Vue, Svelte oder alles, was nach dem Seitenladen Daten nachzieht. Liefert ein curl auf die URL nur eine leere Hülle oder ein „Loading"-Placeholder, brauchen Sie html_rendered. Stecken die Daten schon im rohen HTML, das DiffHook per Fetch bekommt, bleiben Sie bei html_css — viel schneller und günstiger.
Woher weiß DiffHook, dass die Seite fertig gerendert ist?
Zwei Mechanismen. Entweder wait_for_selector (DiffHook wartet bis zu 30 Sekunden, bis der Selektor im DOM erscheint) oder wait_until: networkidle (die Seite gilt als fertig, sobald 500 ms lang keine Netzwerkanfragen mehr laufen). Beides ist pro Monitor konfigurierbar, damit Sie für kapriziöse Seiten nachjustieren können.
Kann ich eigene Header oder Cookies an Playwright übergeben?
Ja. Jeder Monitor akzeptiert eine request_headers-Map und ein cookies-Array. Auth-Tokens, regionale Präferenz-Cookies, A/B-Test-Pins — alles lässt sich auf den Monitor beschränken und verschlüsselt ablegen. Nützlich, wenn sich die gerenderte Ansicht pro User-Segment unterscheidet und Sie genau eines im Blick haben wollen.
Ist Playwright schwerer für meine Tarifgrenzen?
Gerenderte Checks zählen mehr als einfache HTML-Checks (sie nutzen einen echten Browser), aber das Verhältnis ist begrenzt. Der kostenlose Tarif erlaubt eine kleine Anzahl gerenderter Checks pro Tag; kostenpflichtige Tarife skalieren linear. Das Dashboard zeigt die effektiven Kosten jedes Monitors — keine Überraschungen.
Wie steht es um CAPTCHAs und Bot-Schutz?
Die Playwright-Flotte von DiffHook läuft mit realistischen User-Agents, TLS-Fingerprints und Stealth-Patches, was die meisten generischen WAF-Regeln abfängt. Für Seiten hinter Cloudflare Turnstile oder hCaptcha können Sie einen gelösten Token über request_headers mitschicken oder auf die Puppeteer-Engine wechseln, die andere Browser-Profile hat — manchmal kommt die eine durch, wo die andere hängt.

Verwandte Workflows

Auch großartig mit DiffHook

n8n + Puppeteer

Dasselbe Rendering-Scraping mit Puppeteer — hilfreich, wenn sich eine Seite unter Chromium anders verhält.

n8n-Web-Scraping

Statisches HTML-Scraping für Seiten, die keinen Browser brauchen — günstiger und schneller, wenn es passt.

n8n-Webhook

HMAC-Verifikation, Retries und Replay im Detail auf der generischen n8n-Webhook-Seite.

Zapier-Web-Scraping

Dieselbe Rendering-Engine, Zapier als Ziel — identische Monitor-Form, andere Webhook-URL.

Make.com-Web-Scraping

Schleusen Sie das Post-Render-Diff ins Webhook-Modul von Make.com für Low-Code-Routing.

Ein Scraping-Skript ersetzen

Sie migrieren von einem Playwright-plus-Cron-Skript? Hier der Seite-an-Seite-Vergleich zum Managed-Monitor.

Hören Sie auf, einen Browser zu hosten, nur um eine Seite zu diffen

Gerendertes Scraping, Playwright- und Puppeteer-Engines, HMAC-signierte Webhooks, kostenloser Tarif. Start in unter einer Minute.

Kostenloses Konto erstellenPreise ansehen