Dynamische Website scrapen
Dynamische Websites laden Inhalte nach dem ersten Seitenaufruf per JavaScript. Diese Anleitung zeigt, wie du mit dem Browser-Endpoint von FourA Daten von diesen Seiten erfasst.
Das Problem
Wenn du einen Standard-HTTP-Request an eine JavaScript-lastige Website sendest, erhältst du nur das HTML-Gerüst, aber nicht den eigentlichen Inhalt. Die benötigten Daten (Produktlisten, Preise, Suchergebnisse) werden erst nach dem Rendern der Seite im Browser per JavaScript geladen.
Dies ist bei modernen Frameworks wie React, Vue, Angular und Next.js immer häufiger der Fall.
Die Lösung: Browser-Requests
Der Browser-Endpoint von FourA (POST /api/browser/) öffnet deine URL in einer Chrome-Browserinstanz, die:
- die Seite lädt
- sämtliches JavaScript ausführt
- auf das Rendern der Inhalte wartet
- das vollständig gerenderte HTML zurückgibt
Schritt 1: Identifiziere, was du benötigst
Besuche vor dem Request die Zielseite im Browser und nutze die DevTools (F12), um einen Text oder ein Element zu finden, das das Laden der Inhalte bestätigt. Zum Beispiel:
- Ein Produktname, der nach dem JS-Rendering erscheint
- Eine CSS-Klasse wie
product-gridim gerenderten HTML - Ein Text wie "results", der erst nach dem Laden der Daten erscheint
Schritt 2: Browser-Request senden
curl -X POST https://eu.api.foura.ai/api/browser/ \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://example.com/products",
"timeout_ms": 15000,
"checkText": "product-grid"
}'
Die Option checkText weist FourA an, zu prüfen, ob der String "product-grid" auf der gerenderten Seite erscheint. Wenn er vor dem Timeout nicht erscheint, schlägt der Request fehl, sodass du weißt, dass der Inhalt nicht geladen wurde.
Schritt 3: HTML parsen
Die Response enthält das vollständig gerenderte HTML im Feld body. Parse es mit deiner bevorzugten Bibliothek:
Python (BeautifulSoup)
import requests
from bs4 import BeautifulSoup
resp = requests.post("https://eu.api.foura.ai/api/browser/", headers={
"X-API-Key": "YOUR_API_KEY",
"Content-Type": "application/json"
}, json={
"url": "https://example.com/products",
"timeout_ms": 15000,
"checkText": "product-grid"
})
html = resp.json()["body"]
soup = BeautifulSoup(html, "html.parser")
for product in soup.select(".product-card"):
name = product.select_one(".product-name").text.strip()
price = product.select_one(".product-price").text.strip()
print(f"{name}: {price}")
Node.js (cheerio)
import * as cheerio from 'cheerio';
const resp = await fetch('https://eu.api.foura.ai/api/browser/', {
method: 'POST',
headers: { 'X-API-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
body: JSON.stringify({
url: 'https://example.com/products',
timeout_ms: 15000,
checkText: 'product-grid'
})
});
const { body: html } = await resp.json();
const $ = cheerio.load(html);
$('.product-card').each((i, el) => {
console.log($(el).find('.product-name').text(), $(el).find('.product-price').text());
});
Fehlerbehebung
Immer noch leerer Inhalt?
- Prüfe, ob die Seite tatsächlich JavaScript-Rendering nutzt (Vergleich von "Quelltext anzeigen" mit den DevTools)
- Erhöhe
timeout_ms: Einige Seiten laden langsam - Prüfe, ob die Seite eine Authentifizierung oder Cookies erfordert (nutze den Parameter
cookies)
Wird eine CAPTCHA-Seite angezeigt?
- Wechsle bei Single-/HTTP-Requests zum Proxy-Endpoint (
POST /api/proxy/) für automatische IP-Rotation. - Um Browser-Requests eine Proxy-Rotation hinzuzufügen, nutze den Parameter
proxydes Browser-Endpoints, anstatt ihn in den Proxy-Endpoint einzubetten. Der Proxy-Endpoint bettet nur Single-/HTTP-Requests ein, keine Browser-Requests.
curl -X POST "https://eu.api.foura.ai/api/browser/" \
-H "X-API-Key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com", "proxy": "http://proxy-url:port"}'
Nächste Schritte
- Den richtigen Endpoint wählen: Wann du Browser vs. Single nutzt
- Mitbewerberpreise überwachen: Vollständiges Tutorial zur Preisüberwachung
- Anti-Bot-Schutz: Umgang mit geschützten Websites