Formularautomatisierung mit Puppeteer: Texteingabe, Formularausfüllung und Nutzersimulation

Puppeteer ist eine Node.js-Bibliothek, die Browser wie Chrome automatisiert und wiederkehrende Aufgaben wie das Ausfüllen von Formularen, Texteingaben und Benutzerinteraktionen vereinfacht. Das können Sie damit tun:

• Formulareingaben automatisieren: Textfelder, Dropdown-Menüs, Kontrollkästchen und selbst dynamische Formulare ausfüllen.
• Menschliches Tippen simulieren: Verzögerungen, Korrekturen und Pausen für realistische Eingaben hinzufügen.
• Komplexe Formulare verarbeiten: Datumsauswahlen, mehrstufige Formulare und Echtzeitvalidierung verwalten.
• Benutzerinteraktion: Mausbewegungen, Scrollen und Navigation simulieren.

Wichtigste Vorteile:

• Zeit sparen, indem Sie manuelle Arbeit um bis zu 50 % reduzieren.
• Genauigkeit verbessern, indem Sie menschliche Fehler vermeiden.
• Workflows für mehrere Formulare gleichzeitig skalieren.
• Kosten senken, indem Sie wiederkehrende Aufgaben automatisieren.

Schnellbeispiel:

await page.type('#username', 'exampleUser');
await page.type('#password', 'examplePass');
await page.click('#submit-button');

Ganz gleich, ob Sie Login-Seiten, mehrstufige Formulare oder dynamische Inhalte automatisieren: Puppeteer bietet die Tools, um Ihren Workflow zu vereinfachen. Bereit, loszulegen? Sehen wir uns an, wie es funktioniert.

sbb-itb-23997f1

Puppeteer-basierten Headless Browser auf Latenode verwenden, um Formularübermittlungen zu automatisieren

Latenode bietet eine direkte Integration mit einem Puppeteer-basierten Headless Browser, um Formularübermittlungen, das Scraping von Daten aus Websites, das Erstellen von Screenshots und vieles mehr zu automatisieren. Fügen Sie Code beliebiger Komplexität hinzu oder nutzen Sie den KI-Assistenten, um den Node zu konfigurieren.

Verbinden Sie ihn mit beliebigen KI-Modellen, Datenbanken, CRM-Systemen und anderen Services, um Ihre Workflows zu verbessern, zu erweitern und zu beschleunigen. Verpassen Sie nicht die Gelegenheit, Low-Code-Webautomatisierung auf Latenode auszuprobieren. Testen Sie jetzt den vorgefertigten Headless Browser und sparen Sie sich Installation und Konfiguration dauerhaft!

Grundlegende Methoden für Formulareingaben

In diesem Abschnitt erfahren Sie, wie Puppeteer Texteingaben verarbeiten und Tippen auf eine menschlichere Weise simulieren kann.

Automatisierung von Textfeldern

Mit diesen Methoden können Sie Texteingaben mit Puppeteer automatisieren:

Wenn Sie beispielsweise ein Login-Formular wie https://the-internet.herokuapp.com/login automatisieren, können Sie folgenden Code verwenden:

await page.type('#username', 'tomsmith');
await page.type('#password', 'SuperSecretPassword!');
await page.keyboard.press('Enter');

Damit die Eingabe natürlicher wirkt, können Sie Verzögerungen zwischen den Tastenanschlägen hinzufügen. Weitere Details dazu finden Sie im nächsten Abschnitt.

Menschliche Tippmuster hinzufügen

Um zu simulieren, wie Menschen tippen, können Sie variable Verzögerungen, Korrekturen und Pausen einführen. Das Plugin puppeteer-extra-plugin-human-typing hilft Ihnen dabei, diese Effekte zu erzeugen.

await page.type('#search-input', 'Automatisierungstests', { delay: 100 });

await page.typeHuman('[name="q"]', "Schreibt gerade ein Roboter?", {
  backspaceMaximumDelayInMs: 1500,
  backspaceMinimumDelayInMs: 750,
  maximumDelayInMs: 650,
  minimumDelayInMs: 150
});

Diese Methode lässt Eingaben natürlicher erscheinen, indem sie:

• Die Tippgeschwindigkeit anpasst
• Korrekturen von Tippfehlern simuliert
• Pausen zwischen Wörtern hinzufügt
• Realistisches Tastaturverhalten nachbildet

Für eine noch realistischere Interaktion:

await page.focus('#input-field');
await page.type('#input-field', 'Hallo Welt');

Automatisierung komplexer Formulare

Aufbauend auf der grundlegenden Automatisierung von Textfeldern erfordern erweiterte Formulare wie Dropdown-Menüs, Datumseingaben und dynamische Formulare spezifische Ansätze. Sehen wir uns an, wie Sie diese Komponenten effektiv verarbeiten.

Auswahlmenüs und Eingabesteuerelemente

Die Automatisierung von Dropdown-Menüs, Kontrollkästchen und Optionsfeldern ist mit Puppeteer unkompliziert. So funktioniert es:

// Einen Wert aus einem Dropdown-Menü auswählen
await page.select('#country-select', 'AUS');  // Wählt „Australien“ aus

// Mit einem Kontrollkästchen interagieren
await page.click('#terms-checkbox');

// Ein Optionsfeld auswählen
await page.click('[id=Mortgagees_0__MortgageeType][value=COR]');

„Locators enthalten die Informationen zur Auswahl eines Elements und ermöglichen Puppeteer, automatisch darauf zu warten, dass das Element im DOM vorhanden und im richtigen Zustand für die Aktion ist.“ [4]

Automatisierung von Datumseingaben

Datumsauswahlen können unterschiedlich komplex sein. So verarbeiten Sie sowohl einfache als auch schreibgeschützte Datumsfelder:

// Direkt in eine einfache Datumseingabe schreiben
await page.type("#datepicker", "01/26/2025");

// Eine schreibgeschützte Datumseingabe ändern
await page.$eval('#txt_FromDateText', el => el.removeAttribute('readonly'));
await page.type('#txt_FromDateText', '03/17/2025');

Für kalenderbasierte Datumsauswahlen:

await page.click('#calendar-trigger'); // Kalender öffnen
await page.waitForSelector('.calendar-grid'); // Auf die Kalenderoberfläche warten
await page.click(`[data-date="2025-03-17"]`); // Gewünschtes Datum auswählen

Verarbeitung dynamischer Formulare

Dynamische Formulare bringen oft Herausforderungen wie Ladeverzögerungen, bedingte Felder und Echtzeitvalidierung mit sich. So können Sie sie verwalten:

Für Felder mit dynamischer Validierung:

// Warten, bis das Eingabefeld bereit ist
await page.waitForSelector('#dynamic-input');

// Daten eingeben und warten, bis die Validierung abgeschlossen ist
await page.type('#dynamic-input', '[email protected]');
await page.waitForFunction(
  selector => !document.querySelector(selector).classList.contains('error'),
  {},
  '.validation-indicator'
);

Die Verarbeitung mehrstufiger Formulare erfordert sorgfältige Navigation:

// Zum nächsten Schritt wechseln
await page.click('#next-button');
await page.waitForNavigation();

// Bestätigungsdialoge akzeptieren
page.on('dialog', async dialog => {
  await dialog.accept();
});

Fügen Sie abschließend immer eine Fehlerbehandlung für unerwartete Probleme hinzu:

try {
  await page.waitForSelector('#dynamic-content', { timeout: 5000 });
} catch (error) {
  console.error('Dynamische Inhalte konnten nicht geladen werden:', error);
}

Simulation von Benutzerinteraktionen

Über die Eingabeautomatisierung hinaus verbessert die Simulation vollständiger Benutzerinteraktionen die Verarbeitung von Formularübermittlungen. Puppeteer bietet Tools für präzise Mausaktionen und Navigation und eignet sich daher ideal für komplexe Formularanforderungen.

Maus- und Scroll-Aktionen

So können Sie realistische Mausbewegungen und Scrollvorgänge simulieren:

// Über ein Element fahren
await page.hover('#form-element');

// Einen verzögerten Klick ausführen
await page.click('#submit-button', { delay: 5000 });

// Beispiel für sanftes Scrollen
await page.evaluate(() => {
    window.scrollTo({ top: 500, behavior: 'smooth' });
});

Bei unendlichem Scrollen verfolgen Sie die Seitenhöhe und laden Inhalte dynamisch:

await page.evaluate(async () => {
    await new Promise((resolve) => {
        let totalHeight = 0;
        const distance = 100;
        const timer = setInterval(() => {
            const scrollHeight = document.body.scrollHeight;
            window.scrollBy(0, distance);
            totalHeight += distance;

            if (totalHeight >= scrollHeight) {
                clearInterval(timer);
                resolve();
            }
        }, 100);
    });
});

Diese Techniken gehen über grundlegende Interaktionen hinaus, insbesondere bei mehrstufigen Formularen, die eine reibungslose Navigation erfordern.

Navigation in mehrstufigen Formularen

Bei der Automatisierung mehrstufiger Formulare ist die Verwaltung benutzerähnlicher Verhaltensweisen entscheidend. Konfigurieren Sie den Browser für die Entwicklung so, dass seine Benutzeroberfläche angezeigt wird, und verlangsamen Sie die Abläufe für ein einfacheres Debugging:

const browser = await puppeteer.launch({
    headless: false,  // Browseroberfläche während der Entwicklung anzeigen
    slowMo: 100       // Verzögerung von 100 ms zwischen Aktionen hinzufügen
});

Fügen Sie variable Verzögerungen hinzu, um natürliches Benutzerverhalten nachzuahmen:

Wechseln Sie für den produktiven Einsatz in den Headless-Modus (headless: true), um die Performance zu verbessern. Das Automatisierungsbeispiel SauceDemo demonstriert die Eingabevalidierung durch die Verwendung des Selektors .error-message-container [1].

Um modale Dialoge oder Pop-ups zu verarbeiten, reagieren Sie abhängig von ihrem Inhalt:

page.on('dialog', async dialog => {
    const message = dialog.message();
    if (message.includes('bestätigen')) {
        await dialog.accept();
    } else {
        await dialog.dismiss();
    }
});

Diese Strategien sorgen dafür, dass Ihre Automatisierungsabläufe sowohl effizient als auch realistisch sind.

Richtlinien für die Formularautomatisierung

Dieser Abschnitt baut auf den Grundlagen der Formularautomatisierung auf und konzentriert sich auf Fehlerbehandlung und Performance-Optimierung, damit Ihre Workflows reibungslos laufen.

Fehlerbehandlung

Verwenden Sie try-catch-Blöcke, um Fehler effektiv zu erkennen und zu behandeln:

try {
    await page.type('#username', 'testuser');
    await page.type('#password', 'password123');
    await page.click('#submit');
} catch (error) {
    console.error(`Formularübermittlung fehlgeschlagen: ${error.message}`);
    await page.screenshot({ path: `fehler-${Date.now()}.png` });
}

Validieren Sie Ihre Formulare, indem Sie auf Fehlermeldungen prüfen und erfolgreiche Übermittlungen bestätigen:

// Nach Fehlermeldungen suchen
const errorMessage = await page.$('.error-message-container');
if (errorMessage) {
    const text = await page.evaluate(el => el.textContent, errorMessage);
    throw new Error(`Validierung fehlgeschlagen: ${text}`);
}

// Erfolgreiche Übermittlung bestätigen
const success = await page.waitForSelector('.success-message', { timeout: 5000 })
    .catch(() => false);
if (!success) {
    throw new Error('Zeitüberschreitung bei der Formularübermittlung');
}

Legen Sie Timeouts fest, damit Ihr Skript nicht unbegrenzt hängen bleibt:

await page.setDefaultNavigationTimeout(30000);
await page.setDefaultTimeout(20000);

Sehen wir uns nun an, wie Sie die Performance für eine schnellere und effizientere Automatisierung verbessern können.

Performance-Tipps

Optimieren Sie Ihre Automatisierungsskripte mit diesen Techniken:

Beispielsweise setzte DataScrape Solutions diese Strategien ein und reduzierte die Verarbeitungszeit für 50.000 Formularübermittlungen von 7.500 Minuten auf 5.833 Minuten – eine Verbesserung von 22 % [6].

Hier ist eine beispielhafte Produktionskonfiguration:

const browser = await puppeteer.launch({
    headless: "new",
    args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-sandbox'
    ]
});

// Nicht benötigte Ressourcen blockieren
await page.setRequestInterception(true);
page.on('request', request => {
    if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
        request.abort();
    } else {
        request.continue();
    }
});

Die Ausführung im Headless-Modus kann ebenfalls deutlich schneller sein: Tests, die zuvor 5 Sekunden dauerten, wurden in nur 3 Sekunden abgeschlossen – eine Verbesserung von 40 % [7].

„Die Beherrschung der Fehlerbehandlung war nicht nur vorteilhaft – sie war entscheidend für den Aufbau effizienter und zuverlässiger Automatisierungs-Workflows.“ – Nathan, OneQuery [5]

Verwenden Sie für dynamische Formulare schließlich intelligente Wartestrategien, um unvorhersehbares Verhalten zu bewältigen:

// Warten, bis sich die Netzwerkaktivität stabilisiert hat
await page.waitForNavigation({ 
    waitUntil: 'networkidle0',
    timeout: 30000 
});

// Sicherstellen, dass das Element vor der Interaktion sichtbar ist
await page.waitForSelector('#submit-button', {
    visible: true,
    timeout: 5000
});

Zusammenfassung und nächste Schritte

Puppeteer vereinfacht die Formularautomatisierung und reduziert manuellen Aufwand erheblich [3]. So können Sie Puppeteer in Ihre Workflows integrieren:

Mit diesen Methoden können Sie von grundlegender Automatisierung zu einer vollständig integrierten Puppeteer-Konfiguration übergehen.

„Puppeteer ist mehr als nur ein Tool – es ist ein Zugang zu höherer Geschäftseffizienz. Durch die Automatisierung wiederkehrender Aufgaben, die Optimierung von Workflows und die Erfassung von Echtzeitdaten können Unternehmen in der heutigen wettbewerbsintensiven Landschaft einen Vorsprung behalten.“ [3]

Um auf den oben beschriebenen Vorteilen aufzubauen, erkunden Sie diese Integrationsoptionen:

• Low-Code-Lösungen: Latenode macht serverlose Puppeteer-Automatisierung ohne Programmierkenntnisse zugänglich. So können Sie beispielsweise Workflows erstellen, die URL-Snapshots als PDFs speichern und automatisch in AWS-S3-Buckets hochladen [8].
• Erweiterte Funktionen: Verwenden Sie Puppeteer-Extra-Plugins für Aufgaben wie anonymes Browsen [2]. Bei CAPTCHA-Herausforderungen können Services wie 2Captcha für eine reibungslose Automatisierung sorgen [1].
• Enterprise-Integration: Unternehmen wie TaskUs haben Puppeteer erfolgreich in ihre Abläufe integriert. Wie Manish Pandya, SVP of Digital bei TaskUs, erklärt:

„TaskUs nutzt PixieBrix, um unseren Kunden die unkomplizierte Flexibilität zu bieten, Benutzererfahrungen und Workflows zu verbessern. Es ist ein wichtiger Wegbereiter, um unsere Vision zu verwirklichen.“ [9]

Für eine zuverlässige Formularautomatisierung sollten Sie sich auf robuste Fehlerbehandlung, intelligente Wartestrategien und konsistentes Monitoring konzentrieren.