Changedetection.io für dynamische Webseiten: JavaScript & Login meistern

Dynamische Webseiten überwachen (JavaScript, Login, Headless Browser)

Bis jetzt hast du vor allem „klassische“ Webseiten überwacht – also Seiten, deren Inhalte direkt im HTML stehen. In der Praxis sieht das Web heute aber ganz anders aus:

👉 Inhalte werden oft erst nach dem Laden per JavaScript erzeugt 👉 Daten kommen dynamisch über APIs 👉 Inhalte sind nur sichtbar, wenn du eingeloggt bist

Damit stößt klassisches Monitoring schnell an Grenzen. Zum Glück bietet changedetection.io auch hierfür Lösungen.

Problem: JavaScript-basierte Webseiten

Viele moderne Webseiten (z. B. Shops, Dashboards, Portale) funktionieren so:

1. HTML wird geladen
2. JavaScript wird ausgeführt
3. Inhalte werden nachgeladen (z. B. via API)

👉 Ergebnis:

• Im rohen HTML steht oft fast nichts
• Die eigentlichen Inhalte sind unsichtbar für einfache Tools

Beispiel

Ohne JavaScript siehst du:

```id="v1lgwz"

Mit JavaScript im Browser:

👉 komplette Seite mit Inhalt


### Konsequenz

Standard-Monitoring erkennt:
👉 **keine Änderungen**, obwohl sich Inhalte ändern


## Lösung: Headless Browser

Hier kommt ein entscheidendes Konzept ins Spiel:

👉 **Headless Browser**

Das sind Browser (wie Chrome), die:

* im Hintergrund laufen
* JavaScript ausführen
* Seiten vollständig rendern

Changedetection.io nutzt dafür z. B.:

👉 **Playwright**


## Einsatz von Playwright

Mit Playwright kann Changedetection.io:

* JavaScript ausführen
* dynamische Inhalte laden
* Buttons klicken
* auf Elemente warten
* komplexe Seiten vollständig darstellen


### Aktivierung (Grundprinzip)

In den Einstellungen einer URL kannst du:

👉 **„Use browser (Playwright)“ aktivieren**


### Wann brauchst du das?

* Inhalte fehlen im Monitoring
* Seite lädt dynamisch nach
* Preise / Daten erscheinen erst verzögert
* Single-Page-Applications (SPA)

👉 Kurz:
**Immer wenn HTML ≠ sichtbare Seite**


## Warten auf Inhalte (sehr wichtig)

Ein häufiges Problem:

👉 Seite lädt, aber Inhalte kommen später

Lösung:

* „Wait time“ setzen (z. B. 3–5 Sekunden)
* oder auf ein Element warten (Selector)

---

### Beispiel

Warte auf:

```id="3kh5a6"
div.product-list

👉 Erst wenn das Element da ist, wird die Seite analysiert

Login-Handling

Viele relevante Inhalte sind nur nach Login sichtbar:

• interne Portale
• Kundenbereiche
• Admin-Dashboards
• geschützte Dokumente

Möglichkeiten

Changedetection.io unterstützt:

1. Cookies nutzen

• Login im Browser durchführen
• Cookies übernehmen

2. HTTP Auth

• Basic Auth direkt hinterlegen

3. Playwright-Skripte

• Login automatisieren (fortgeschritten)

Wichtig

• Sessions können ablaufen
• Tokens müssen ggf. erneuert werden
• Sicherheit beachten (keine sensiblen Daten offen speichern)

Rendering vs. HTML (entscheidender Unterschied)

Ein zentrales Verständnis für modernes Monitoring:

HTML (klassisch)

• das, was direkt vom Server kommt
• schnell, leichtgewichtig
• aber oft unvollständig

Rendering (mit Browser)

• vollständige Darstellung der Seite
• inkl. JavaScript, CSS, dynamischer Inhalte
• entspricht dem, was der Nutzer sieht

Vergleich

Methode	Vorteil	Nachteil
HTML	schnell, ressourcenschonend	oft unvollständig
Rendering	realistische Darstellung	mehr Ressourcen nötig

Empfehlung

• einfache Seiten → HTML reicht
• moderne Seiten → Rendering aktivieren

👉 Hybrid-Ansatz ist ideal

Praxisbeispiele

Online-Shop

• Preis wird per JS geladen 👉 → Playwright notwendig

Dashboard

• Daten nur nach Login sichtbar 👉 → Login + Rendering

Behördenportal

• Inhalte teilweise dynamisch 👉 → Kombination aus Selektoren + Rendering

Moderne Webseiten sind dynamisch – und genau darauf musst du dein Monitoring anpassen.

Mit den richtigen Einstellungen kannst du:

✔ auch komplexe Seiten überwachen ✔ echte Inhalte statt Roh-HTML erfassen ✔ geschützte Bereiche einbinden ✔ zuverlässige Ergebnisse erzielen

👉 Der Schlüssel ist: Verstehen, wann HTML reicht – und wann du einen echten Browser brauchst.