Abfangen und Ändern von Netzwerkanforderungen in Puppeteer: Ein praktischer Leitfaden

Inhaltsverzeichnis

Abfangen und Ändern von Netzwerkanforderungen in Puppeteer: Ein praktischer Leitfaden

Abfangen und Ändern von Netzwerkanfragen in Puppenspieler ist eine leistungsstarke Methode zur Verwaltung von Web-Automatisierungsaufgaben. Sie können HTTP-Anfragen und -Antworten in Echtzeit überwachen, blockieren oder anpassen. Folgendes können Sie tun:

Überwachen Sie die Netzwerkaktivität: Protokollieren Sie Details wie URLs, Methoden, Header und Payloads.
Anforderungen ändern: Ändern Sie Header, leiten Sie URLs um oder passen Sie Payloads für API-Tests und -Debugging an.
Blockressourcen: Verhindern Sie das Laden von Bildern, Schriftarten oder Skripten, um die Leistung zu verbessern.
Antworten simulieren: Simulieren Sie Serverantworten zum Testen oder ändern Sie Inhalte dynamisch.
Testfehlerszenarien: Simulieren Sie HTTP-Statuscodes wie 404 oder 500, um die Fehlerbehandlung zu testen.

Schnelles 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();
    }
});

In diesem Handbuch wird die Verwendung der Puppeteer-API zum Abfangen von Anforderungen erläutert. Es enthält außerdem praktische Beispiele zum Überwachen, Ändern und Testen von Netzwerkinteraktionen.

Puppenspieler Tutorial Nr. 12 | HTTP-Interceptors | Anfragen abfangen

Puppenspieler

Überwachung von Netzwerkanforderungen

Puppeteer ermöglicht die Überwachung von Netzwerkanfragen und bietet Ihnen einen klaren Überblick über den Webverkehr bei Automatisierungsaufgaben. So können Sie die Netzwerkaktivität effektiv verfolgen und analysieren.

Einrichten von Anforderungslistenern

Aktivieren Sie zunächst die Anforderungsabfangfunktion und fügen Sie einen Listener hinzu. 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();
});

Im Inneren der 'request' Event-Listener können Sie auf abgefangene Anfragen zugreifen und diese sogar ändern. Stellen Sie einfach sicher, dass Sie request.continue() damit die ursprüngliche Anfrage nicht blockiert wird.

Filtern von Anfragen nach Typ

Mit Puppeteer können Sie Netzwerkanfragen nach Typ filtern und sich so leichter auf bestimmten Datenverkehr konzentrieren. So können Sie Anfragen selektiv bearbeiten:

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.

Protokollierung von Anforderungsdaten

Nachdem Sie die Anfragen gefiltert haben, können Sie durch die Protokollierung der wichtigsten Details nützliche Muster erkennen. Hier ist ein kurzer Überblick über einige wichtige Anfrageeigenschaften:

Eigenschaft anfordern	Beschreibung	Zugriffsmethode
URL	Vollständige Anforderungs-URL	`request.url()`
Methode	HTTP-Methode (z. B. GET, POST)	`request.method()`
Headers	Header anfordern	`request.headers()`
Post-Daten	Mit der Anfrage gesendete Nutzlast	`request.postData()`

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 Verkehr detailliert analysieren. Überprüfen Sie immer request.isInterceptResolutionHandled() um Konflikte mit anderen Handlern zu vermeiden.

Ändern ausgehender Anfragen

Mit Puppeteer können Sie ausgehende Anfragen optimieren, um sie bei der Interaktion mit Webservern besser an Ihre Anforderungen anzupassen.

Header-Änderungen

Sie können HTTP-Header anpassen, um Token einzuschließen, Benutzeragenten zu ändern oder benutzerdefinierte Werte hinzuzufügen.

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

Für eine genauere 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 der Eigenschaften ausgehender Anfragen, z. B. das Festlegen benutzerdefinierter Header, das Ändern von Anfragemethoden oder das Anpassen der Anfragenutzlast.“ – Saairaamprasad ^[1]

Als Nächstes sehen wir uns die Umleitung von Anfragen durch die Umleitung von URLs an.

URL-Umleitungen

Leiten Sie bestimmte Anfragen mit dem folgenden 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.

Datenänderungen anfordern

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

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 Kurzreferenz zum Ändern verschiedener Anforderungseigenschaften:

Eigenschaft anfordern	So ändern Sie	Häufige Anwendungsfälle
Headers	`continue({ headers })`	Hinzufügen von Authentifizierungstoken und benutzerdefinierten Kennungen
URL	`continue({ url })`	Umleitung von Endpunkten, Umleitung von Anfragen
Post-Daten	`continue({ postData })`	Aktualisieren von Formulardaten, Ändern von API-Nutzdaten

Hinweis: Das Ändern von Anfragen kann die Leistung beeinträchtigen. Daher ist es ratsam, Anfragen nur bei Bedarf abzufangen. Diese Methoden ermöglichen Ihnen eine präzise Kontrolle über ausgehende Anfragen in Ihren Automatisierungs-Workflows.

Verwalten von Serverantworten

Puppeteer ermöglicht die Bearbeitung und Änderung von Serverantworten und ist damit ein leistungsstarkes Tool für die Webautomatisierung. Dieser Abschnitt baut auf früheren Techniken zur Anforderungsänderung auf und konzentriert sich auf die Steuerung von Serverantworten, um Ihnen die volle Kontrolle über Netzwerkinteraktionen zu ermöglichen.

Reaktionsüberwachung

Sie können eingehende Serverantworten verfolgen, indem Sie einen Antwortereignis-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 so, das Serververhalten zu analysieren. Darüber hinaus können Sie den Antwortinhalt dynamisch an Ihre Bedürfnisse anpassen.

Ändern des Antwortinhalts

Um die Verarbeitung von Antworten anzupassen, verwenden Sie Interception. Hier 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 zum Testen von APIs durch Simulieren von Antworten oder Optimieren von Daten in bestimmten Szenarien.

Testen von HTTP-Statuscodes

Sobald Sie die Bearbeitung von Inhalten beherrschen, können Sie verschiedene HTTP-Statuscodes simulieren, um die Fehlerbehandlung zu testen. So geht's:

Statuscode	Luftüberwachung	Implementierungsbeispiel
200	Erfolgsantwort	`status: 200, body: JSON.stringify(successData)`
404	Fehlende Ressource	`status: 404, body: 'Not Found'`
500	Serverfehler	`status: 500, body: 'Internal Server Error'`

Beispielsweise:

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();
});

„Mit der Request Interception in Puppeteer können Sie ausgehende HTTP-Anfragen und eingehende Antworten beobachten, ändern oder blockieren. Diese Funktion ist praktisch, wenn Sie das Laden von Seiten optimieren, verschiedene Netzwerkbedingungen simulieren oder dynamisches Laden von Inhalten handhaben.“ – Saairaamprasad ^[1]

Pro Tipp: Das Abfangen von Antworten kann zwar wirkungsvoll sein, sollte aber sparsam eingesetzt werden. Übermäßiger Einsatz von Abfangfunktionen kann Ihre Automatisierungsskripte verlangsamen oder unnötige Komplexität verursachen.

sbb-itb-23997f1

Richtlinien zum Abfangen von Anfragen

Request Interception ist ein leistungsstarkes Tool, erfordert jedoch sorgfältigen Einsatz, um eine reibungslose Leistung und Zuverlässigkeit zu gewährleisten. Nachfolgend finden Sie praktische Schritte zum Verwalten von Sitzungen, Verbessern der Geschwindigkeit und Beheben häufiger Probleme.

Verwalten von Benutzersitzungen

So können Sie Benutzersitzungen effektiv handhaben:

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

Überprüfen Sie immer den Abfangstatus, bevor Sie Header ändern, um Konflikte mit anderen Abfangprogrammen zu vermeiden.

Geschwindigkeitsoptimierung

Das Blockieren unnötiger Ressourcen kann die Seitenladezeiten erheblich verkürzen – manchmal 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();
});

Ressourcentyp	Action	Impact der HXNUMXO Observatorien
Bilder	Blockieren	Beschleunigt das Laden von Seiten
Stylesheets	Selektives Laden	Spart Bandbreite
Analyse	Blockieren	Reduziert den Netzwerk-Overhead
API-Aufrufe	Erlauben	Behält die wesentlichen Funktionen bei

Wenn Leistungsprobleme auftreten, können diese Strategien zur Ressourcenverwaltung hilfreich sein.

Tipps zur Fehlerbehebung

Unsachgemäße Handhabung ist eine häufige Ursache für Probleme. Hier sind einige praktische Lösungen:

„Sobald die Anforderungsabfangfunktion aktiviert ist, wird jede Anforderung unterbrochen, sofern sie nicht fortgesetzt, beantwortet oder abgebrochen wird.“

Antoine Vastel, Forschungsleiter bei Schloss ^[4]

Auflösungsbehandlung: Benutzen isInterceptResolutionHandled Prüfungen zur Vermeidung von Race Conditions.
Mehrere Handler: Weisen Sie Prioritäten zu, wenn Sie mehrere Intercept-Handler verwenden:

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

Angehaltene Anfragen: Stellen Sie sicher, dass alle Anfragen ordnungsgemäß gelö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 einfach. Zu komplizierte Regeln können die Arbeit verlangsamen und die Wartung Ihres Codes erschweren.

Key Take Away

Die Anforderungsabfangfunktion von Puppeteer bietet Entwicklern leistungsstarke Tools zur Verfeinerung von Web-Automatisierungsaufgaben. Diese Tools ermöglichen:

Änderungsanfrage: Passen Sie Header, Methoden und Nutzdaten an, um den Datenfluss effektiv zu steuern.
Antworthandhabung: Passen Sie Serverantworten für verschiedene Testanforderungen an.
Ressourcenmanagement: Verbessern Sie die Leistung durch selektive Bearbeitung von Anfragen.

Praktische Anwendungen

Das Abfangen von Anfragen hat sich in vielen Szenarien als hilfreich erwiesen. So zeigte sich beispielsweise in einem aktuellen E-Commerce-Fall die Nützlichkeit der Anpassung von Produktpreisanfragen anhand von Postleitzahlen. ^[2].

Einige häufige Verwendungen sind:

Mocking-API-Antworten zum Testen
Verbessern des Daten-Scrapings durch Ändern von Headern
Steigerung der Ladegeschwindigkeit durch Blockieren unnötiger Ressourcen
Stärkung der Sicherheit mit benutzerdefinierten Authentifizierungstoken

Diese Beispiele verdeutlichen, wie durch das Abfangen von Anfragen sowohl Entwicklungs- als auch Betriebsprobleme gelöst werden können und der Weg für fortgeschrittene Automatisierungstechniken geebnet wird.

Verwenden von Puppeteer mit Latenknoten

Latenknoten

Latenode vereinfacht die Implementierung dieser Strategien. Hier ist ein Beispiel-Workflow, der die Integration von Puppeteer mit Latenode zeigt:

// 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 Anforderungsheader dynamisch an Ihre spezifischen Anforderungen anpassen können.