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

Vous souhaitez maîtriser Puppeteer pour surveiller le réseau et manipuler les réponses ? Ce guide couvre tout ce que vous devez savoir, de l’interception des requêtes à la modification des réponses d’API et aux 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 simulées pour les tests.
• Analyser les réponses du serveur : extrayez des données JSON, HTML ou binaires pour tester les API et obtenir des informations sur les performances.
• Simuler les conditions réseau : testez en 3G, 4G ou avec des connexions lentes afin d’optimiser les performances.
• Exemples de code pratiques : configuration et utilisation étape par étape pour des cas concrets.
• Conseils juridiques et d’efficacité : restez conforme et améliorez les performances de Puppeteer grâce à la mise en cache, au filtrage des requêtes et à la limitation du débit.

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

Comment capturer des réponses/requêtes HTTP avec Puppeteer ...

Configuration et paramétrage

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

Configuration initiale

Commencez par suivre ces étapes :

• Créez un nouveau répertoire pour votre projet Node.js.
• Exécutez npm init pour initialiser le projet.
• Installez Puppeteer à l’aide de la commande :

npm install puppeteer

Créez ensuite 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 réseau

Pour surveiller et modifier les réponses réseau, vous devez activer l’interception des requêtes 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 l’indique la documentation officielle de Puppeteer :

« Une fois l’interception des requêtes activée, chaque requête sera bloquée tant qu’elle n’est pas poursuivie, traitée par une réponse ou abandonnée » [2].

Un exemple tiré de la documentation 2024 de Agenty montre comment intercepter et analyser efficacement les réponses d’API d’e-commerce [1]. 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 :

• Surveiller toutes les requêtes et réponses réseau.
• Modifier les en-têtes et les charges utiles des requêtes.
• Analyser les réponses JSON des API.
• Filtrer et suivre des modèles d’URL spécifiques.
• Gérer différents types de réponses.

Conseil : incluez toujours une gestion des erreurs, par exemple en encapsulant l’analyse des réponses dans des blocs try-catch, en particulier lorsque vous travaillez avec des données JSON ou accédez aux propriétés des réponses.

Cette configuration prépare le terrain pour des techniques de surveillance réseau plus avancées dans les sections suivantes.

Surveillance des réponses réseau

Puppeteer vous permet de surveiller les réponses du serveur à l’aide d’écouteurs d’événements qui suivent l’activité des API et XHR. Cette section explique comment surveiller efficacement les réponses afin de permettre une analyse détaillée et des ajustements ultérieurs.

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 les réponses suivies, vous pouvez organiser et traiter les données en vue d’une utilisation ultérieure.

Gestion des données de réponse

Triez et gérez les réponses selon leur type de contenu avec l’approche suivante :

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 des données

Utilisez les méthodes suivantes pour extraire des 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;

Pour garantir des performances fluides :

• Ciblez des modèles d’URL et des méthodes de requête spécifiques
• Gérez les erreurs avec élégance
• Utilisez des blocs try-catch pour l’analyse
• Mettez les données de réponse en cache lorsque cela est pertinent

L’étude d’Agenty [1] démontre qu’une surveillance attentive des réponses peut améliorer considérablement les workflows d’automatisation.

sbb-itb-23997f1

Méthodes de modification des réponses

La surveillance des réponses n’est qu’une partie de l’équation ; leur modification est essentielle pour tester les cas limites et garantir les bonnes performances de votre application dans diverses conditions. Puppeteer facilite l’ajustement des réponses réseau, afin de vous aider à simuler et tester des situations spécifiques.

Modification des en-têtes

L’ajustement des 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 afin d’adopter une approche plus claire :

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 contextes de requête, par exemple pour tester du contenu localisé ou vérifier une authentification basée sur des jetons.

Tests des conditions réseau

Il est essentiel de tester le comportement de votre application dans diverses conditions réseau. Puppeteer vous permet d’émuler différents contextes de connectivité, tels que la 3G ou les connexions lentes :

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 goulets d’étranglement en matière de performances et garantit que votre application reste utilisable dans un large éventail d’environnements réseau.

Tests des réponses d’API

Vous pouvez également intercepter les requêtes API et renvoyer des réponses simulées. Cette approche est particulièrement utile pour tester des contextes spécifiques sans dépendre de serveurs en production :

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 une meilleure fiabilité, encapsulez 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 le bon déroulement de vos tests, même si des erreurs inattendues surviennent pendant l’interception des requêtes.

Outils d’analyse avancés

Puppeteer propose une gamme d’outils permettant d’inspecter le trafic en détail et d’améliorer les performances.

Guide du Chrome DevTools Protocol

Le Chrome DevTools Protocol (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 aussi collecter des métriques de performance à l’aide du 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é réseau et à analyser efficacement les goulets d’étranglement en matière de performances.

Analyse de fichiers HAR

Les fichiers HAR (HTTP Archive) fournissent un enregistrement complet de l’activité réseau, ce qui les rend particulièrement utiles 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, surveillez les métriques suivantes :

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

Intégration Latenode

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 des sites web et des API avec le nœud personnalisé de TimePaste. Gagnez du temps et améliorez la fiabilité grâce à des mises à jour en temps réel et à des captures d’écran des problèmes. Les nœuds personnalisés offrent une automatisation avancée sans nécessiter une expertise technique approfondie, ce qui vous permet de reproduire efficacement des fonctionnalités SaaS. » [3]

Avec Latenode, vous pouvez :

• Configurer des contrôles de santé automatisés
• Capturer des captures d’écran des problèmes comme preuve visuelle
• Activer des notifications en temps réel

Ces fonctionnalités rationalisent la surveillance et garantissent une résolution rapide des problèmes.

Résolution de problèmes et recommandations

Résolution des problèmes

La surveillance réseau dans Puppeteer peut rencontrer certains problèmes fréquents, 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 l’éviter, appelez toujours request.continue() lors de l’interception des requêtes, même si vous vous contentez de surveiller 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 le cache pour vous assurer que toutes les réponses sont capturées :

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

Ces étapes contribuent à une surveillance réseau plus fluide et vous préparent aux conseils de performance présentés ensuite.

Conseils de rapidité et d’efficacité

Améliorez les performances de Puppeteer grâce à ces techniques d’optimisation :

Par exemple, vous pouvez filtrer les ressources non essentielles, telles que les images et les polices, afin de réduire la charge 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.

Recommandations juridiques

Les améliorations techniques sont importantes, mais le respect des limites légales et éthiques l’est tout autant. Voici quelques pratiques essentielles à suivre :

• Obtenez un consentement explicite avant de collecter des données personnelles.
• Vérifiez les politiques d’automatisation des sites web avec lesquels vous interagissez.
• Utilisez la limitation du débit pour éviter de surcharger les serveurs.

Voici un exemple de limitation du 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é à l’échelle de l’entreprise, envisagez les mesures suivantes :

1. Protocoles de gestion 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. Pistes d’audit : conservez des journaux détaillés avec les horodatages et les modifications effectuées.

Trouver le bon équilibre entre optimisation des performances et conformité juridique garantit que vos efforts d’automatisation sont à la fois efficaces et responsables.

Conclusion

Résumé

Puppeteer fournit aux développeurs des outils permettant de surveiller et modifier efficacement le trafic web. En interceptant les requêtes et en analysant les réponses, les développeurs peuvent affiner 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 de créer des workflows d’automatisation précis.

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

Premiers pas avec Latenode

Latenode s’appuie sur les capacités de Puppeteer pour automatiser l’analyse réseau. Les fonctionnalités de ses nœuds personnalisés rendent la surveillance plus efficace et conviviale [3].

« Automatisez la surveillance des sites web et des API avec le nœud personnalisé de TimePaste. Gagnez du temps et améliorez la fiabilité grâce à des mises à jour en temps réel et à des captures d’écran des problèmes. Les nœuds personnalisés offrent une automatisation avancée sans nécessiter une expertise technique approfondie, ce qui vous permet de reproduire efficacement des fonctionnalités SaaS. » [3]

Voici comment mettre en œuvre l’analyse des réponses réseau avec Latenode :

• Configurez le nœud personnalisé TimePaste
• Paramétrez les vérifications de statut de réussite
• Activez la capture d’écran
• Ajoutez une surveillance des modèles de texte
• Ajustez les délais de chargement des pages

Le créateur visuel de workflows de Latenode et la génération de code assistée par IA, combinés aux outils réseau de Puppeteer, créent un puissant système de surveillance. Cette intégration fournit des informations en temps réel sur les applications web et améliore vos workflows d’automatisation.