Analyse et traitement des réponses du réseau dans Puppeteer : surveillance et modification

Voulez-vous maîtriser Marionnettiste pour la surveillance du réseau et la manipulation des réponses ? Ce guide couvre tout ce que vous devez savoir : de l'interception des requêtes à la modification des réponses d'API, en passant par les tests dans différentes conditions réseau. Voici un aperçu de ce que vous apprendrez :

• Surveiller et modifier les requêtes réseau: Ajustez les en-têtes, les charges utiles et les réponses fictives pour les tests.
• Analyser les réponses du serveur: Extrayez des données JSON, HTML ou binaires pour les tests d'API et les informations sur les performances.
• Simuler les conditions du réseau:Testez sous 3G, 4G ou connexions lentes pour optimiser les performances.
• Exemples de codes pratiques:Configuration et utilisation étape par étape pour des scénarios réels.
• Conseils juridiques et d'efficacité:Restez conforme et améliorez les performances de Puppeteer avec la mise en cache, le filtrage des requêtes et la limitation du débit.

Commencez avec Puppeteer pour améliorer vos flux de travail d’automatisation et rationaliser les processus de test.

Comment capturer les réponses/requêtes HTTP à l'aide de Marionnettiste ...

Configuration et configuration

Voici comment configurer Puppeteer pour surveiller les réponses du réseau étape par étape.

La configuration initiale

Commencez par ces étapes :

• Créez un nouveau répertoire pour votre Node.js .
• Courir npm init pour initialiser le projet.
• Installez Puppeteer en utilisant la commande :

npm install puppeteer

Ensuite, créez un fichier de script principal et ajoutez le code de configuration de base :

const puppeteer = require('puppeteer');

async function startMonitoring() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // Continue configuration here
}

Configuration de l'interception du réseau

Pour surveiller et modifier les réponses du réseau, vous devez activer l’interception des demandes et configurer des écouteurs d’événements.

// Enable request interception
await page.setRequestInterception(true);

// Set up request listener
page.on('request', request => {
    // Always call continue() to prevent requests from stalling
    request.continue();
});

// Set up response listener
page.on('response', async response => {
    const url = response.url();
    if (response.headers()['content-type'].includes('application/json')) {
        const responseData = await response.json();
        console.log(`Response from ${url}:`, responseData);
    }
});

Comme indiqué dans la documentation officielle du marionnettiste :

« Une fois l'interception des requêtes activée, chaque requête sera bloquée à moins qu'elle ne soit poursuivie, traitée ou abandonnée. » .

Un exemple de AgenceLa documentation 2024 montre comment intercepter et analyser efficacement les réponses des API de commerce électronique Leur méthode comprend :

await page.setRequestInterception(true);
page.on("request", (req) => {
    if (req.url().includes('/api/prices')) {
        const modifiedData = {
            // Modified request data
            zipCode: '10001'
        };
        req.continue({ postData: JSON.stringify(modifiedData) });
    } else {
        req.continue();
    }
});

Cette configuration vous permet de :

• Surveillez toutes les demandes et réponses du réseau.
• Modifier les en-têtes de requête et les charges utiles.
• Analysez les réponses JSON des API.
• Filtrez et suivez des modèles d’URL spécifiques.
• Gérer différents types de réponses.

Conseil: Incluez toujours la gestion des erreurs, comme l'encapsulation de l'analyse des réponses try-catch blocs, en particulier lorsque vous travaillez avec des données JSON ou que vous accédez aux propriétés de réponse.

Cette configuration ouvre la voie à des techniques de surveillance réseau plus avancées dans les sections suivantes.

Surveillance de la réponse du réseau

Puppeteer vous permet de surveiller les réponses du serveur en utilisant des écouteurs d'événements pour suivre l'activité API et XHR. Cette section explique comment surveiller efficacement les réponses, permettant ainsi une analyse détaillée et des ajustements supplémentaires.

Suivi des requêtes API et XHR

Vous pouvez configurer des écouteurs d’événements pour suivre les réponses API et XHR comme suit :

// Wait for a specific XHR response
const response = await page.waitForResponse(
    response => response.url().includes('/api/data') && 
                response.request().method() !== 'OPTIONS'
);

// Monitor all responses
page.on('response', async response => {
    const url = response.url();
    const method = response.request().method();
    const status = response.status();

    console.log(`${method} ${url}: ${status}`);
});

Une fois que vous avez suivi les réponses, vous pouvez organiser et traiter les données pour une utilisation ultérieure.

Gestion des données de réponse

Triez et gérez les réponses en fonction de leur type de contenu en utilisant cette approche :

page.on('response', async response => {
    const contentType = response.headers()['content-type'];

    try {
        if (contentType.includes('application/json')) {
            const jsonData = await response.json();
            // Process JSON data
        } else if (contentType.includes('text/html')) {
            const htmlContent = await response.text();
            // Process HTML content
        }
    } catch (error) {
        console.error('Error processing response:', error);
    }
});

Méthodes d'extraction de données

Utilisez les méthodes suivantes pour extraire les données des réponses :

const searchResponse = await page.waitForResponse(
    response => response.url().includes('sample-search.php')
);

const data = await searchResponse.json();
const results = data.results;

Type de réponse	Méthode d'extraction	Meilleur cas d'utilisation
JSON	réponse.json()	Réponses API, données structurées
Texte	réponse.texte()	Contenu HTML, texte brut
binaire	réponse.buffer()	Fichiers, images, téléchargements

Pour garantir un fonctionnement fluide :

• Concentrez-vous sur des modèles d'URL et des méthodes de requête spécifiques
• Gérer les erreurs avec élégance
• Utilisez try-catch blocs pour l'analyse
• Mettre en cache les données de réponse, le cas échéant

Étude d'Agenty démontre comment une surveillance minutieuse des réponses peut améliorer considérablement les flux de travail d'automatisation.

sbb-itb-23997f1

Méthodes de modification de la réponse

La surveillance des réponses n'est qu'une partie de l'équation ; leur modification est essentielle pour tester les cas limites et garantir le bon fonctionnement de votre application dans diverses conditions. Puppeteer facilite l'ajustement des réponses réseau, vous aidant ainsi à simuler et tester des scénarios spécifiques.

Modification de l'en-tête

Ajuster les en-têtes HTTP vous permet de tester les mécanismes d'authentification et le comportement du serveur. Voici comment modifier les en-têtes avec Puppeteer :

await page.setRequestInterception(true);
page.on('request', (request) => {
    const headers = request.headers();
    headers['Authorization'] = 'Bearer YOUR_TOKEN';
    headers['Accept-Language'] = 'en-US';
    request.continue({ headers });
});

Pour plusieurs en-têtes, vous pouvez utiliser setExtraHTTPHeaders pour une approche plus propre :

await page.setExtraHTTPHeaders({
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36',
    'accept': 'text/html,application/xhtml+xml,application/xml',
    'accept-language': 'en-US,en;q=0.9'
});

Ces ajustements vous permettent de simuler différents scénarios de demande, tels que le test de contenu localisé ou la vérification de l'authentification basée sur des jetons.

Tests de l'état du réseau

Il est essentiel de tester le comportement de votre application dans différentes conditions réseau. Puppeteer vous permet d'émuler différents scénarios de connectivité, comme la 3G ou des connexions lentes :

État du réseau	Vitesse de téléchargement	Vitesse de téléchargement	Latence
3G	750 Ko / s	250 Ko / s	100ms
4G	4 Mo / s	3 Mo / s	20ms
Connection lente	100 Ko / s	50 Ko / s	500ms

Voici un exemple de simulation d’un réseau 3G :

await page.emulateNetworkConditions({
    download: 768000,
    upload: 256000,
    latency: 100
});

Cette méthode vous aide à identifier les goulots d’étranglement des performances et garantit que votre application est utilisable dans une gamme d’environnements réseau.

Test de réponse API

Vous pouvez également intercepter les requêtes API et renvoyer des réponses fictives. Ceci est particulièrement utile pour tester des scénarios spécifiques sans dépendre de serveurs en ligne :

await page.route('https://api.example.com/data', route => {
    route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
            success: true,
            data: {
                id: 123,
                status: 'completed'
            }
        })
    });
});

Pour plus de fiabilité, enveloppez votre logique d'interception dans un bloc try/catch :

try {
    page.on('request', async request => {
        if (request.url().includes('/api/')) {
            const mockResponse = {
                status: 200,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ test: true })
            };
            await request.respond(mockResponse);
        } else {
            await request.continue();
        }
    });
} catch (error) {
    console.error('Interception error:', error);
}

Cette approche garantit que vos tests se déroulent sans problème, même si des erreurs inattendues se produisent lors de l’interception des requêtes.

Outils d'analyse avancés

Puppeteer propose une gamme d'outils pour une inspection détaillée du trafic et l'amélioration des performances.

Protocole Chrome DevTools Guide

Le protocole Chrome DevTools (CDP) permet une surveillance et un débogage avancés. Voici un exemple d'utilisation :

const client = await page.target().createCDPSession();
await client.send('Network.enable');

// Set up network interception
await client.send('Network.setRequestInterception', {
    patterns: [{ urlPattern: '*' }]
});

client.on('Network.requestIntercepted', async ({ interceptionId, request }) => {
    const response = await client.send('Network.getResponseBodyForInterception', {
        interceptionId
    });

    console.log(`Response size: ${response.body.length} bytes`);
    await client.send('Network.continueInterceptedRequest', {
        interceptionId
    });
});

Vous pouvez également collecter des mesures de performance à l’aide de CDP :

// Get runtime metrics
const metrics = await page.metrics();
console.log('JavaScript memory:', metrics.JSHeapUsedSize);

// Start performance tracing
await page.tracing.start();
await page.goto('https://example.com');
await page.tracing.stop();

Ces outils vous aident à surveiller l’activité du réseau et à analyser efficacement les goulots d’étranglement des performances.

Analyse du fichier HAR

Les fichiers HAR (archives HTTP) fournissent un enregistrement complet de l'activité réseau, ce qui les rend parfaits pour l'analyse des performances. Voici un exemple pratique de création d'un fichier HAR :

const har = {
    log: {
        version: '1.2',
        entries: []
    }
};

page.on('response', async response => {
    const entry = {
        startedDateTime: new Date().toISOString(),
        request: {
            method: response.request().method(),
            url: response.url(),
            headers: response.request().headers()
        },
        response: {
            status: response.status(),
            headers: response.headers()
        }
    };
    har.log.entries.push(entry);
});

Lors de l’analyse des fichiers HAR, gardez un œil sur ces mesures :

Métrique	Description	Plage typique
Heure du premier octet	Il est temps de donner la première réponse	100-500ms
Temps de téléchargement	Il est temps de transférer les ressources	200 ms-2 s
Recherche DNS	Il est temps de résoudre le domaine	0-100ms
Négociation SSL	Il est temps de conclure une poignée de main de sécurité	50-150ms

Ces mesures aident à identifier les problèmes de performances et à améliorer la réactivité de votre application.

Laténode Intégration :

Latenode améliore les capacités de surveillance de Puppeteer en ajoutant des contrôles de santé automatisés et des diagnostics visuels. Par exemple : TimePaste utilise un nœud personnalisé pour surveiller les applications Web :

const monitor = async (page) => {
    await page.setViewport({ width: 1920, height: 1080 });

    // Enable real-time status monitoring
    const status = await page.evaluate(() => {
        return document.querySelector('.status-indicator').textContent;
    });

    if (status !== 'All checks passing') {
        await page.screenshot({ 
            path: `error-${Date.now()}.png`,
            fullPage: true 
        });
    }
};

Automatisez la surveillance de votre site web et de vos API grâce au nœud personnalisé de TimePaste. Gagnez du temps et améliorez la fiabilité en recevant des mises à jour et des captures d'écran des problèmes en temps réel. Les nœuds personnalisés offrent une automatisation avancée sans expertise technique approfondie, vous permettant de répliquer efficacement les fonctionnalités SaaS.

Avec Latenode, vous pouvez :

• Mettre en place des contrôles de santé automatisés
• Capturez des captures d'écran des problèmes pour obtenir des preuves visuelles
• Activer les notifications en temps réel

Ces fonctionnalités rationalisent la surveillance et garantissent que les problèmes sont résolus rapidement.

Résolution de problèmes et lignes directrices

Résolution de problèmes

La surveillance réseau dans Puppeteer peut rencontrer des problèmes courants, comme l'absence de réponses réseau. Cela se produit souvent lorsque l'interception des requêtes n'est pas gérée correctement.

Pour éviter cela, appelez toujours request.continue() pendant l'interception des requêtes, même si vous surveillez simplement les réponses :

await page.setRequestInterception(true);
page.on('request', request => {
    request.continue();
});

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

Autre conseil : désactivez la mise en cache pour garantir que toutes les réponses sont capturées :

await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);

Ces étapes contribuent à garantir une surveillance plus fluide du réseau et vous préparent aux conseils de performances à venir.

Conseils pour gagner en rapidité et en efficacité

Améliorez les performances de Puppeteer avec ces techniques d'optimisation :

Technique	Comment implémenter	Impact sur les performances
Paramètres Chrome minimaux	Utilisez les commutateurs Chrome pour désactiver les fonctionnalités inutiles	Réduit le temps de démarrage de 20 à 30 %
Mise en cache des ressources	Utilisez userDataDir pour la réutilisation des actifs	Accélère le chargement des pages de 40 %
Demande de filtrage	Bloquer les publicités, les trackers et autres ressources inutiles	Réduit la charge du réseau de 25 à 35 %
Optimisation des captures d'écran	Enregistrez les captures d'écran au format JPG avec le stockage tampon	Réduit la taille des fichiers de 50 à 60 %

Par exemple, vous pouvez filtrer les ressources non essentielles comme les images et les polices pour réduire la charge du réseau :

const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
    if (blockedResources.includes(request.resourceType())) {
        request.abort();
    } else {
        request.continue();
    }
});

Ces ajustements peuvent rendre Puppeteer à la fois plus rapide et plus efficace.

Directives légales

Les améliorations techniques sont importantes, mais respecter les limites légales et éthiques l'est tout autant. Voici quelques pratiques clés à suivre :

• Obtenir un consentement explicite avant de collecter des données personnelles.
• Vérifier les politiques d'automatisation pour les sites Web avec lesquels vous interagissez.
• Utiliser la limitation de débit pour éviter de surcharger les serveurs.

Voici un exemple de limitation de débit responsable :

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function responsibleMonitoring(page, url) {
    await delay(2000);
    await page.goto(url, { waitUntil: 'networkidle0' });
}

Pour une conformité au niveau de l’entreprise, tenez compte des mesures suivantes :

1. Protocoles de traitement des données: Limitez la collecte de données, définissez des politiques de conservation et documentez les activités de traitement.
2. Contrôles d'accès:Utilisez l’authentification et l’autorisation pour protéger les données sensibles.
3. Des pistes de vérification:Conservez des journaux détaillés avec des horodatages et toutes les modifications apportées.

L’équilibre entre les optimisations des performances et la conformité légale garantit que vos efforts d’automatisation sont à la fois efficaces et responsables.

Conclusion

Résumé

Puppeteer offre aux développeurs des outils pour surveiller et modifier efficacement le trafic web. En interceptant les requêtes et en analysant les réponses, ils peuvent optimiser le chargement des pages, simuler différentes conditions réseau et gérer le contenu dynamique. Ce niveau de contrôle sur les requêtes HTTP permet des workflows d'automatisation précis.

Voyons maintenant comment vous pouvez utiliser Latenode pour simplifier la surveillance du réseau.

Démarrer avec Latenode

Latenode s'appuie sur les capacités de Puppeteer pour automatiser l'analyse réseau. Ses fonctionnalités de nœuds personnalisés rendent la surveillance plus efficace et intuitive. .

Automatisez la surveillance de votre site web et de vos API grâce au nœud personnalisé de TimePaste. Gagnez du temps et améliorez la fiabilité en recevant des mises à jour et des captures d'écran des problèmes en temps réel. Les nœuds personnalisés offrent une automatisation avancée sans expertise technique approfondie, vous permettant de répliquer efficacement les fonctionnalités SaaS.

Voici comment vous pouvez implémenter l'analyse de la réponse du réseau avec Latenode :

• Configurer le nœud personnalisé TimePaste
• Configurer les contrôles d'état de réussite
• Activer la capture d'écran
• Ajouter une surveillance des modèles de texte
• Ajuster les délais de chargement des pages

Le générateur de workflows visuels et la génération de code assistée par IA de Latenode, combinés aux outils réseau de Puppeteer, créent un système de surveillance performant. Cette intégration offre des informations en temps réel sur les applications web, améliorant ainsi vos workflows d'automatisation.

articles similaires

• Installation et configuration de Puppeteer : résolution des problèmes courants de dépendance et de Chromium
• Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur
• Automatisation du navigateur avec Puppeteer et JavaScript : mise en œuvre pratique dans Node.js
• Gestion des agents utilisateurs dans Puppeteer pour l'émulation de périphériques