Netzwerk-Anfragen in Puppeteer abfangen und modifizieren: 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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span> })
        });
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
    }
});

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

Ü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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Intercepted: <span class="hljs-subst">${request.url()}</span>`</span>);
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">interceptedRequest</span> =></span> {
    <span class="hljs-keyword">if</span> (interceptedRequest.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">const</span> resourceType = interceptedRequest.<span class="hljs-title function_">resourceType</span>();
    <span class="hljs-keyword">switch</span>(resourceType) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">'image'</span>:
            <span class="hljs-comment">// Handle image requests</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-keyword">case</span> <span class="hljs-string">'xhr'</span>:
            <span class="hljs-comment">// Handle API calls</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-attr">default</span>:
            interceptedRequest.<span class="hljs-title function_">continue</span>();
    }
});

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()
Methodik	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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">const</span> requestData = {
            <span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>(),
            <span class="hljs-attr">method</span>: request.<span class="hljs-title function_">method</span>(),
            <span class="hljs-attr">postData</span>: request.<span class="hljs-title function_">postData</span>()
        };
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Price Request:'</span>, requestData);
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
    <span class="hljs-string">'Authorization'</span>: <span class="hljs-string">'Bearer YOUR_TOKEN'</span>,
    <span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'CustomValue'</span>
});

Für eine genauere Kontrolle einzelner Anfragen:

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
    headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer YOUR_TOKEN'</span>;
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ 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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/original'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
            <span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">replace</span>(<span class="hljs-string">'/api/original'</span>, <span class="hljs-string">'/api/new'</span>)
        });
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
    }
});

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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;

    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>) && request.<span class="hljs-title function_">method</span>() === <span class="hljs-string">'POST'</span>) {
        <span class="hljs-keyword">let</span> postData = request.<span class="hljs-title function_">postData</span>();
        <span class="hljs-keyword">if</span> (postData) {
            postData = postData.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/11001/g</span>, <span class="hljs-string">'90210'</span>);
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ postData });
            <span class="hljs-keyword">return</span>;
        }
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-title function_">async</span> (response) => {
    <span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
    <span class="hljs-keyword">const</span> status = response.<span class="hljs-title function_">status</span>();
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response from <span class="hljs-subst">${url}</span>: <span class="hljs-subst">${status}</span>`</span>);

    <span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
        <span class="hljs-comment">// Process response data</span>
    }
});

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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({
                <span class="hljs-attr">price</span>: <span class="hljs-number">99.99</span>,
                <span class="hljs-attr">currency</span>: <span class="hljs-string">'USD'</span>,
                <span class="hljs-attr">zipCode</span>: <span class="hljs-string">'90210'</span>
            })
        });
        <span class="hljs-keyword">return</span>;
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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, Antworttext: JSON.stringify(successData)
404	Fehlende Ressource	Status: 404, Meldung: „Nicht gefunden“
500	Serverfehler	Status: 500, Meldung: „Interner Serverfehler“

Beispielsweise:

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test-endpoint'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">404</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'text/plain'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-string">'Not Found!'</span>
        });
        <span class="hljs-keyword">return</span>;
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

„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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
        <span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
        headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer '</span> + yourAuthToken;
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ 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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">route</span>(<span class="hljs-string">'**/*'</span>, <span class="hljs-function">(<span class="hljs-params">route</span>) =></span> {
    <span class="hljs-keyword">const</span> resourceType = route.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">resourceType</span>();
    <span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(resourceType)) {
        route.<span class="hljs-title function_">abort</span>();
        <span class="hljs-keyword">return</span>;
    }
    route.<span class="hljs-title function_">continue</span>();
});

Ressourcentyp	Action	Auswirkungen
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:

<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
    <span class="hljs-attr">priority</span>: <span class="hljs-number">1</span>,
    <span class="hljs-attr">headers</span>: modifiedHeaders
});

Angehaltene Anfragen: Stellen Sie sicher, dass alle Anfragen ordnungsgemäß gelöst werden:

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
        }
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Request handling error:'</span>, error);
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">abort</span>();
    }
});

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

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

<span class="hljs-comment">// Example workflow setup in Latenode</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'fetch'</span>) {
        <span class="hljs-keyword">const</span> modifiedHeaders = {
            ...request.<span class="hljs-title function_">headers</span>(),
            <span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'Modified-Value'</span>
        };
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ <span class="hljs-attr">headers</span>: modifiedHeaders });
    }
});

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

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