Netzwerkanfragen in Puppeteer abfangen und ändern: Ein praxisnaher Leitfaden

Das Abfangen und Ändern von Netzwerkanfragen in Puppeteer ist eine leistungsstarke Methode zur Steuerung von Webautomatisierungsaufgaben. Damit können Sie HTTP-Anfragen und -Antworten in Echtzeit überwachen, blockieren oder anpassen. Das können Sie damit tun:

• Netzwerkaktivität überwachen: Details wie URLs, Methoden, Header und Payloads protokollieren.
• Anfragen ändern: Header ändern, URLs umleiten oder Payloads für API-Tests und Debugging anpassen.
• Ressourcen blockieren: Das Laden von Bildern, Schriftarten oder Skripten verhindern, um die Performance zu verbessern.
• Antworten simulieren: Serverantworten für Tests mocken oder Inhalte dynamisch verändern.
• Fehlerszenarien testen: HTTP-Statuscodes wie 404 oder 500 simulieren, um die Fehlerbehandlung zu testen.

Kurzes Beispiel

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/test')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ success: true })
        });
    } else {
        await request.continue();
    }
});

Dieser Leitfaden erklärt, wie Sie Puppeteers API zum Abfangen von Anfragen nutzen, einschließlich praktischer Beispiele für die Überwachung, Änderung und das Testen von Netzwerkinteraktionen.

Puppeteer-Tutorial #12 | HTTP-Interzeptoren | Anfragen abfangen

Netzwerkanfragen überwachen

Puppeteer ermöglicht die Überwachung von Netzwerkanfragen und gibt Ihnen einen klaren Einblick in den Webverkehr während Automatisierungsaufgaben. So können Sie Netzwerkaktivitäten effektiv verfolgen und analysieren.

Request-Listener einrichten

Aktivieren Sie zunächst das Abfangen von Anfragen und hängen Sie einen Listener an. Hier ist ein Beispiel:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    console.log(`Intercepted: ${request.url()}`);
    await request.continue();
});

Innerhalb des Event-Listeners 'request' können Sie abgefangene Anfragen aufrufen und sogar ändern. Stellen Sie lediglich sicher, dass Sie request.continue() aufrufen, damit die ursprüngliche Anfrage nicht blockiert wird.

Anfragen nach Typ filtern

Puppeteer ermöglicht es Ihnen, Netzwerkanfragen anhand ihres Typs zu filtern. So können Sie sich leichter auf bestimmten Datenverkehr konzentrieren. So verarbeiten Sie Anfragen gezielt:

page.on('request', interceptedRequest => {
    if (interceptedRequest.isInterceptResolutionHandled()) return;
    const resourceType = interceptedRequest.resourceType();
    switch(resourceType) {
        case 'image':
            // Handle image requests
            break;
        case 'xhr':
            // Handle API calls
            break;
        default:
            interceptedRequest.continue();
    }
});

Durch die Kategorisierung und Priorisierung von Ressourcentypen können Sie Ihre Netzwerküberwachung optimieren und sich auf das Wesentliche konzentrieren.

Anfragedaten protokollieren

Sobald Sie die Anfragen gefiltert haben, hilft Ihnen die Protokollierung wichtiger Details dabei, nützliche Muster zu erkennen. Hier ist ein kurzer Überblick über wichtige Anfrageeigenschaften:

Wenn Sie beispielsweise API-Anfragen für Preisdaten überwachen möchten:

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        const requestData = {
            url: request.url(),
            method: request.method(),
            postData: request.postData()
        };
        console.log('Price Request:', requestData);
    }
    await request.continue();
});

Mit dieser Methode können Sie den Datenverkehr detailliert analysieren. Prüfen Sie immer request.isInterceptResolutionHandled(), um Konflikte mit anderen Handlern zu vermeiden.

Ausgehende Anfragen ändern

Mit Puppeteer können Sie ausgehende Anfragen an Ihre Anforderungen bei der Interaktion mit Webservern anpassen.

Header ändern

Sie können HTTP-Header anpassen, um Tokens einzubinden, User Agents zu ändern oder eigene Werte hinzuzufügen.

await page.setExtraHTTPHeaders({
    'Authorization': 'Bearer YOUR_TOKEN',
    'Custom-Header': 'CustomValue'
});

Für eine detailliertere Kontrolle einzelner Anfragen:

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    const headers = request.headers();
    headers['Authorization'] = 'Bearer YOUR_TOKEN';
    await request.continue({ headers });
});

„Das Abfangen von Anfragen erleichtert die Änderung von Eigenschaften ausgehender Anfragen, etwa das Setzen benutzerdefinierter Header, die Änderung von Anfragemethoden oder die Anpassung der Anfrage-Payload.“ – Saairaamprasad [1]

Als Nächstes sehen wir uns an, wie Sie Anfragen durch URL-Umleitungen umleiten.

URL-Umleitungen

Leiten Sie bestimmte Anfragen mit folgendem Ansatz um:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/original')) {
        await request.continue({
            url: request.url().replace('/api/original', '/api/new')
        });
    } else {
        await request.continue();
    }
});

Mit dieser Methode können Sie API-Endpunkte ändern oder Anfragen dynamisch umleiten.

Anfragedaten ändern

Sie können auch Payloads für POST- und PUT-Anfragen ändern. So geht es:

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;

    if (request.url().includes('/api/prices') && request.method() === 'POST') {
        let postData = request.postData();
        if (postData) {
            postData = postData.replace(/11001/g, '90210');
            await request.continue({ postData });
            return;
        }
    }
    await request.continue();
});

Hier ist eine kurze Referenz zum Ändern verschiedener Anfrageeigenschaften:

Hinweis: Das Ändern von Anfragen kann die Performance beeinträchtigen. Fangen Sie Anfragen daher nur ab, wenn es erforderlich ist. Mit diesen Methoden erhalten Sie präzise Kontrolle über ausgehende Anfragen in Ihren Automatisierungsworkflows.

Serverantworten verwalten

Puppeteer ermöglicht es Ihnen, Serverantworten zu verarbeiten und zu ändern, was es zu einem leistungsstarken Tool für die Webautomatisierung macht. Dieser Abschnitt baut auf den zuvor beschriebenen Techniken zur Anfrageänderung auf und konzentriert sich auf die Steuerung von Serverantworten, damit Sie Netzwerkinteraktionen vollständig kontrollieren können.

Antworten überwachen

Sie können eingehende Serverantworten verfolgen, indem Sie einen Response-Event-Listener einrichten:

page.on('response', async (response) => {
    const url = response.url();
    const status = response.status();
    console.log(`Response from ${url}: ${status}`);

    if (response.url().includes('/api/prices')) {
        const data = await response.json();
        // Process response data
    }
});

Dieses Snippet protokolliert Details wie URL, Statuscodes und Header und hilft Ihnen dabei zu analysieren, wie sich der Server verhält. Über die reine Überwachung hinaus können Sie Antwortinhalte dynamisch an Ihre Anforderungen anpassen.

Antwortinhalte ändern

Um die Verarbeitung von Antworten anzupassen, verwenden Sie das Abfangen von Anfragen. Hier ist ein Beispiel:

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                price: 99.99,
                currency: 'USD',
                zipCode: '90210'
            })
        });
        return;
    }
    await request.continue();
});

Diese Technik ist besonders nützlich, um APIs durch gemockte Antworten zu testen oder Daten in bestimmten Fällen anzupassen.

HTTP-Statuscodes testen

Sobald Sie die Änderung von Inhalten beherrschen, können Sie verschiedene HTTP-Statuscodes simulieren, um die Fehlerbehandlung zu testen. So geht es:

Zum Beispiel:

page.on('request', async (request) => {
    if (request.url().includes('/api/test-endpoint')) {
        await request.respond({
            status: 404,
            contentType: 'text/plain',
            body: 'Not Found!'
        });
        return;
    }
    await request.continue();
});

„Das Abfangen von Anfragen in Puppeteer ermöglicht es Ihnen, ausgehende HTTP-Anfragen und eingehende Antworten zu beobachten, zu ändern oder zu blockieren. Diese Funktion ist besonders hilfreich, wenn Sie das Laden von Seiten optimieren, verschiedene Netzwerkbedingungen simulieren oder das Laden dynamischer Inhalte verarbeiten möchten.“ – Saairaamprasad [1]

Profi-Tipp: Das Abfangen von Antworten kann sehr leistungsstark sein, sollte jedoch sparsam eingesetzt werden. Eine übermäßige Nutzung kann Ihre Automatisierungsskripte verlangsamen oder unnötige Komplexität verursachen.

sbb-itb-23997f1

Richtlinien für das Abfangen von Anfragen

Das Abfangen von Anfragen ist ein leistungsstarkes Werkzeug, erfordert jedoch einen sorgfältigen Einsatz, um eine reibungslose Performance und Zuverlässigkeit zu gewährleisten. Im Folgenden finden Sie praktische Schritte für die Sitzungsverwaltung, Geschwindigkeitsoptimierung und Behebung häufiger Probleme.

Benutzersitzungen verwalten

So können Sie Benutzersitzungen effektiv verwalten:

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (!request.isInterceptResolutionHandled()) {
        const headers = request.headers();
        headers['Authorization'] = 'Bearer ' + yourAuthToken;
        await request.continue({ headers });
    }
});

Prüfen Sie immer den Abfangstatus, bevor Sie Header ändern, um Konflikte mit anderen Interzeptoren zu vermeiden.

Geschwindigkeit optimieren

Das Blockieren unnötiger Ressourcen kann die Seitenladezeit erheblich verkürzen – teilweise um bis zu 500 Millisekunden [3]. Hier ist ein Beispiel:

await page.route('**/*', (route) => {
    const resourceType = route.request().resourceType();
    if (['image', 'stylesheet', 'font'].includes(resourceType)) {
        route.abort();
        return;
    }
    route.continue();
});

Wenn Performanceprobleme auftreten, können diese Strategien zur Ressourcenverwaltung helfen.

Tipps zur Fehlerbehebung

Eine fehlerhafte Verarbeitung ist eine häufige Ursache für Probleme. Hier sind einige praktische Lösungen:

„Sobald das Abfangen von Anfragen aktiviert ist, wird jede Anfrage angehalten, sofern sie nicht fortgesetzt, beantwortet oder abgebrochen wird.“

• Antoine Vastel, Forschungsleiter bei Castle [4]

1. Behandlungsstatus: Verwenden Sie Prüfungen mit isInterceptResolutionHandled, um Race Conditions zu vermeiden.
2. Mehrere Handler: Weisen Sie Prioritäten zu, wenn Sie mehrere Intercept-Handler verwenden:

await request.continue({
    priority: 1,
    headers: modifiedHeaders
});

3. Angehaltene Anfragen: Stellen Sie sicher, dass alle Anfragen korrekt aufgelöst werden:

page.on('request', async (request) => {
    try {
        if (!request.isInterceptResolutionHandled()) {
            await request.continue();
        }
    } catch (error) {
        console.error('Request handling error:', error);
        await request.abort();
    }
});

Halten Sie Ihre Abfanglogik übersichtlich. Übermäßig komplexe Regeln können die Ausführung verlangsamen und Ihren Code schwieriger wartbar machen.

Wichtigste Erkenntnisse

Das Abfangen von Anfragen in Puppeteer bietet Entwicklern leistungsstarke Werkzeuge zur Optimierung von Webautomatisierungsaufgaben. Mit diesen Werkzeugen können Sie:

• Anfragen ändern: Header, Methoden und Payloads anpassen, um den Datenfluss effektiv zu steuern.
• Antworten verarbeiten: Serverantworten für unterschiedliche Testanforderungen anpassen.
• Ressourcen verwalten: Die Performance durch die gezielte Verarbeitung von Anfragen verbessern.

Praktische Anwendungen

Das Abfangen von Anfragen hat sich in vielen Situationen als hilfreich erwiesen. In einem aktuellen E-Commerce-Fall zeigte beispielsweise die Änderung von Produktpreisanfragen anhand von Postleitzahlen ihren Nutzen [2].

Zu den häufigen Anwendungsfällen gehören:

• API-Antworten für Tests mocken
• Datenscraping durch das Ändern von Headern verbessern
• Ladezeiten durch das Blockieren unnötiger Ressourcen verkürzen
• Sicherheit mit benutzerdefinierten Authentifizierungs-Tokens stärken

Diese Beispiele zeigen, wie das Abfangen von Anfragen sowohl Herausforderungen in der Entwicklung als auch im Betrieb bewältigen und den Weg für fortgeschrittene Automatisierungstechniken ebnen kann.

Puppeteer mit Latenode verwenden

Latenode vereinfacht die Umsetzung dieser Strategien. Der folgende Beispiel-Workflow zeigt, wie Puppeteer in Latenode integriert wird:

// Example workflow setup in Latenode
await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.resourceType() === 'fetch') {
        const modifiedHeaders = {
            ...request.headers(),
            'Custom-Header': 'Modified-Value'
        };
        await request.continue({ headers: modifiedHeaders });
    }
});

Dieses Beispiel zeigt, wie Sie Anfrage-Header dynamisch an Ihre spezifischen Anforderungen anpassen können.