Was macht browser-automation?
Browser-Automation ermöglicht Web-Tests, Scraping und Interaktionen mit KI-Agenten. Der Unterschied zwischen einem fehlerhaften Skript und einem zuverlässigen System liegt im Verständnis von Selektoren, Wartestrategien und Anti-Erkennungsmustern.
Einführung
Dieses Skill bietet eine strukturierte Anleitung zur Browser-Automation mit Fokus auf Zuverlässigkeit und Langlebigkeit. Es behandelt grundlegende Konzepte, die für jede Automatisierungsaufgabe unerlässlich sind.
Kernkonzepte
Selektoren
Selektoren sind der Schlüssel zur Identifizierung von Elementen auf einer Webseite. Bevorzugen Sie stabile Selektoren wie data-testid oder aria-label gegenüber fragilen CSS-Klassen oder IDs.
- CSS-Selektoren: Einfach, aber anfällig für Änderungen.
- XPath: Mächtig, aber komplex.
- Text-Selektoren: Gut für UI-Tests, aber abhängig von Lokalisierung.
- Attribut-basierte Selektoren:
[data-testid="..."]sind ideal für Tests.
Wartestrategien
Wartezeiten sind entscheidend, um auf dynamische Inhalte zu warten. Vermeiden Sie feste Verzögerungen (z.B. time.sleep()), da sie ineffizient und unzuverlässig sind.
- Implizite Wartezeit: Setzt eine globale Wartezeit für alle
find-Operationen. - Explizite Wartezeit: Wartet auf eine bestimmte Bedingung (z.B. Sichtbarkeit eines Elements).
- Smart Waiting: Nutzt Bibliotheken wie
auto-waitoderwait-for-element.
Beispiel in Playwright:
await page.waitForSelector('[data-testid="submit-button"]', { state: 'visible' });
await page.click('[data-testid="submit-button"]');
Anti-Erkennungsmuster
Um Bot-Erkennung zu vermeiden, müssen Browser-Fingerprinting und Verhaltensmuster berücksichtigt werden.
- User-Agent-Rotation: Wechseln Sie realistische User-Agent-Strings.
- Viewport-Größe: Verwenden Sie gängige Bildschirmauflösungen.
- Mausbewegungen: Simulieren Sie natürliche Mausbewegungen statt Clicks ohne Kontext.
- Header-Spoofing: Setzen Sie realistische HTTP-Header (z.B.
Accept-Language).
Beispiel in Puppeteer:
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
await page.setViewport({ width: 1280, height: 720 });
Plattformunterstützung
Dieses Skill ist plattformunabhängig und funktioniert mit:
- Playwright: Ideal für moderne Web-Apps und Cross-Browser-Tests.
- Puppeteer: Fokussiert auf Chromium, geeignet für Scraping und Screenshots.
- Selenium: Ältere, aber weit verbreitete Lösung für Legacy-Systeme.
Best Practices
- Verwenden Sie stabile Selektoren: Bevorzugen Sie
data-testid-Attribute. - Implementieren Sie explizite Wartezeiten: Vermeiden Sie
time.sleep(). - Simulieren Sie menschliches Verhalten: Fügen Sie zufällige Verzögerungen und Mausbewegungen ein.
- Rotieren Sie Fingerabdrücke: Ändern Sie den User-Agent und andere Header regelmäßig.
- Fehlerbehandlung: Fangen Sie Ausnahmen und wiederholen Sie Aktionen bei Bedarf.
Beispiele
Einfaches Scraping mit Playwright
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com');
const title = await page.title();
console.log('Title:', title);
await browser.close();
})();
Formularausfüllen mit Anti-Erkennung
const { createCursor } = require('ghost-cursor');
const page = await browser.newPage();
const cursor = createCursor(page);
await cursor.click('input#email');
await page.keyboard.type('[email protected]');
await cursor.click('button[type="submit"]');
Fehlerbehebung
- Element nicht gefunden: Überprüfen Sie den Selektor auf Änderungen im DOM.
- Timeout: Erhöhen Sie die Wartezeit oder prüfen Sie auf Netzwerkprobleme.
- Bot-Erkennung: Fügen Sie Anti-Erkennungsmuster hinzu (z.B. zufällige Verzögerungen).
Fazit
Browser-Automation ist ein mächtiges Werkzeug, erfordert aber sorgfältige Planung. Mit den richtigen Selektoren, Wartestrategien und Anti-Erkennungsmustern können Sie zuverlässige und skalierbare Automatisierungslösungen erstellen.