Gestion des agents utilisateurs dans Puppeteer pour l'émulation de périphériques

Table des matières

Gestion des agents utilisateurs dans Puppeteer pour l'émulation de périphériques

Contrôler la façon dont votre navigateur apparaît sur les sites Web est essentiel pour l'automatisation et les tests Web. Marionnettiste rend cela possible en vous permettant de modifier le Chaîne de l'agent utilisateur - un identifiant numérique que les sites Web utilisent pour détecter votre navigateur et votre appareil.

Voici ce que vous apprendrez:

Qu'est-ce qu'une chaîne User-Agent ? Il informe les sites Web sur votre navigateur, votre système d'exploitation et votre appareil.
Pourquoi le personnaliser ? Pour éviter d'être détecté, testez les sites Web sur différents appareils ou assurez-vous de la réactivité mobile.
Comment utiliser Puppeteer : Modifier l'agent utilisateur avec page.setUserAgent() et émuler des appareils avec des profils intégrés comme l'iPhone ou des paramètres personnalisés.

Les principaux conseils incluent :

Toujours définir l'agent utilisateur avant chargement d'une page.
Faites correspondre l'agent utilisateur avec les paramètres spécifiques à l'appareil (par exemple, la taille de la fenêtre d'affichage, la prise en charge tactile).
Utilisez des outils comme le puppeteer-extra-stealth-plugin pour éviter la détection des robots.

Exemple rapide :

await page.setUserAgent(
  'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1'
);
await page.setViewport({ width: 375, height: 812, isMobile: true, hasTouch: true });

Cela garantit que votre navigateur imite un iPhone, vous aidant à tester des sites Web ou à extraire des données sans être signalé.

Marionnettiste Tutoriel n°13 | setUserAgent et setViewPort | Test ...

Marionnettiste

Mise en place du marionnettiste

Préparez Puppeteer en installant les dépendances nécessaires et en écrivant votre premier script d'émulation.

Procédure d'installation

Assurez-vous que vous utilisez Node.js Version 14 ou ultérieure. Choisissez ensuite l'une des méthodes d'installation suivantes :

# Option 1: Install Puppeteer with Chrome included
npm i puppeteer

# Option 2: Install Puppeteer without Chrome
npm i puppeteer-core

Si vous utilisez Linux, vérifiez les dépendances manquantes avec :

ldd chrome | grep not

Une fois Puppeteer installé, vous êtes prêt à écrire votre premier script d'émulation d'appareil. Cette configuration est essentielle pour contrôler l'agent utilisateur et simuler efficacement les appareils.

Premier script d'émulation de périphérique

Voici un exemple de script qui émule un iPhone X et charge une page Web :

const puppeteer = require('puppeteer');

(async () => {
  // Launch browser in non-headless mode
  const browser = await puppeteer.launch({ 
    headless: false 
  });

  // Create a new page
  const page = await browser.newPage();

  // Set iPhone X User-Agent
  await page.setUserAgent(
    'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) ' +
    'AppleWebKit/604.1.38 (KHTML, like Gecko) ' +
    'Version/11.0 Mobile/15A372 Safari/604.1'
  );

  // Configure viewport for iPhone X
  await page.setViewport({
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true
  });

  // Navigate to a webpage
  await page.goto('https://pptr.dev');

  // Pause to view the result
  await page.waitForTimeout(3000);

  // Close the browser
  await browser.close();
})();

Ce script couvre l'essentiel de l'émulation de périphérique :

Lancement du navigateur: Démarre Puppeteer en mode sans tête pour plus de visibilité.
Installation des pages: Crée une nouvelle page dans le navigateur.
Paramètres de l'agent utilisateur:Imite un navigateur iPhone X.
Configuration de la fenêtre: Correspond aux dimensions et aux capacités de l'écran d'un iPhone X.
Navigation: Charge une page Web spécifiée.

Conseils de configuration

Puppeteer stocke le cache de son navigateur à ~/.cache/puppeteer.
Pour utiliser un répertoire de cache personnalisé, définissez le PUPPETEER_CACHE_DIR variable d'environnement.
Si vous travaillez dans Docker ou WSL, assurez-vous que toutes les dépendances système requises sont installées.
Pour des raisons de sécurité, évitez de courir Chrome sans sandboxing sauf si absolument nécessaire.

Définition des chaînes de l'agent utilisateur

Cette section explique comment configurer et affiner efficacement les paramètres de l'agent utilisateur.

Utilisation de setUserAgent()

Le page.setUserAgent() Cette méthode est idéale pour personnaliser l'identification du navigateur. Voici un exemple d'utilisation :

const page = await browser.newPage();
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
  '(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'
);

Assurez-vous de définir l'agent utilisateur avant naviguer vers une page pour assurer la cohérence.

Choix des chaînes d'agent utilisateur

Choisissez une chaîne d'agent utilisateur qui correspond à votre cas d'utilisation :

Pour tester:

// Desktop Chrome on Windows 10
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

Pour l'émulation mobile :

// iPhone 14 Safari
await page.setUserAgent(
  'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) ' +
  'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
  'Version/16.0 Mobile/15E148 Safari/604.1'
);

Conseils de configuration de l'agent utilisateur

Voici quelques conseils pour assurer une gestion fluide des User-Agents :

Paramètres de correspondance : Associez votre agent utilisateur aux propriétés de navigateur correspondantes. Par exemple, utilisez des agents utilisateurs mobiles avec les paramètres de la fenêtre d'affichage mobile.
Évitez les problèmes de détection : L'agent utilisateur par défaut de Puppeteer inclut « HeadlessChrome », qui peut déclencher des mécanismes de détection de robots.

// Default User-Agent (not recommended)

// Custom User-Agent (recommended)
await page.setUserAgent(
  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

Les bons résultats ont leurs origines dans la cuisine : Définissez l'agent utilisateur pour chaque nouvelle page ou onglet pour éviter les incohérences.

Pour une meilleure fiabilité, vous pouvez également configurer des paramètres supplémentaires à côté de votre User-Agent :

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
});

Une gestion efficace des agents utilisateurs n'est qu'un élément de l'émulation d'appareil. Associez-la à des paramètres précis de fenêtre d'affichage, de réseau et de navigateur pour créer une expérience de navigation plus réaliste.

sbb-itb-23997f1

Émulation de périphérique avancée

Profils d'appareils intégrés

Puppeteer simplifie l'émulation d'appareils grâce à ses profils préconfigurés. Ces profils regroupent les paramètres essentiels pour vous permettre d'émuler rapidement des appareils spécifiques.

const puppeteer = require('puppeteer');
const iPhone15Pro = puppeteer.KnownDevices['iPhone 15 Pro'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone15Pro);
  // The page now behaves like an iPhone 15 Pro.
})();

Ces profils configurent automatiquement des paramètres importants, facilitant ainsi l'émulation précise des appareils. Ils fonctionnent parfaitement avec les configurations User-Agent et permettent des ajustements supplémentaires aux paramètres d'écran et de fenêtre d'affichage.

Paramètres de l'écran et de la fenêtre d'affichage

Pour émuler efficacement les appareils, vous devez configurer correctement la fenêtre d'affichage. La fenêtre d'affichage par défaut de Puppeteer (800 × 600 pixels) ne correspond pas à la plupart des appareils réels ; il est donc conseillé de la personnaliser :

await page.setViewport({
  width: 1920,
  height: 1080,
  deviceScaleFactor: 2,
  isMobile: false,
  hasTouch: false,
  isLandscape: true
});

Vous pouvez également ajuster la fenêtre d'affichage de manière dynamique pour capturer facilement des captures d'écran pleine page :

await page.setViewport({
  width: 1440,
  height: 900,
  deviceScaleFactor: 1
});

const options = {
  fullPage: true,
  captureBeyondViewport: true
};
await page.screenshot(options);

Simulation de réseau et de toucher

Une fois la fenêtre d'affichage configurée, vous pouvez aller plus loin en simulant les conditions du réseau et les interactions tactiles :

// Simulate 3G network conditions
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: (750 * 1024) / 8, // 750 kb/s
  uploadThroughput: (250 * 1024) / 8, // 250 kb/s
  latency: 100 // 100 ms
});

await page.setViewport({
  width: 375,
  height: 812,
  isMobile: true,
  hasTouch: true
});

await page.tap('#button-element');

Résoudre les problèmes courants

Solutions d'erreur d'émulation

Lors de l'émulation, des chaînes d'agent utilisateur et des fonctionnalités de navigateur incompatibles peuvent déclencher une détection. Pour éviter cela, assurez-vous que l'agent utilisateur est cohérent sur toutes les pages :

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)');

Pour chaque nouvelle page, assurez-vous que l'agent utilisateur est défini :

const newPage = await browser.newPage();
await newPage.setUserAgent(currentUserAgent);

De plus, affinez votre configuration pour gérer des techniques de détection plus avancées.

Éviter la détection du navigateur

Les sites web utilisent souvent des méthodes sophistiquées pour identifier les outils d'automatisation. Pour contrer ce phénomène, utilisez puppeteer-extra-stealth-plugin:

const stealthPlugin = StealthPlugin();
stealthPlugin.enabledEvasions.add('user-agent-override');
puppeteer.use(stealthPlugin);

Pour minimiser davantage la détection, appliquez ces tactiques pratiques :

Gérer les tarifs des demandes:Introduisez des délais aléatoires pour imiter le comportement humain.

async function naturalDelay() {
  const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
  await page.waitForTimeout(delay);
}

Assurer la cohérence de l'en-tête: Alignez les en-têtes HTTP avec l'agent utilisateur.

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml',
  'User-Agent': currentUserAgent
});

Une fois les risques de détection traités, concentrez-vous sur l’amélioration des performances et de l’efficacité des ressources.

Vitesse et utilisation des ressources

Simplifiez votre configuration pour optimiser la vitesse et réduire la consommation de ressources. Commencez par optimiser les paramètres de lancement du navigateur :

const browser = await puppeteer.launch({
  args: [
    '--disable-gpu',
    '--disable-dev-shm-usage',
    '--disable-setuid-sandbox',
    '--no-first-run',
    '--no-sandbox',
    '--no-zygote'
  ],
  userDataDir: './cache'
});

Pour les tâches de capture d'écran, utilisez des paramètres efficaces :

const screenshot = await page.screenshot({
  type: 'jpeg',
  quality: 80,
  fullPage: true,
  encoding: 'binary'
});

Bloquez les ressources inutiles comme les images et les polices pour économiser de la mémoire et de la bande passante :

await page.setRequestInterception(true);
page.on('request', (request) => {
  if (request.resourceType() === 'image' || request.resourceType() === 'font') {
    request.abort();
  } else {
    request.continue();
  }
});

Ces ajustements améliorent les performances tout en maintenant une émulation fiable.

Conclusion

Examen des conseils clés

Un réglage précis des chaînes d'agent utilisateur et une gestion efficace des en-têtes peuvent faire toute la différence pour éviter la détection. Voici un bref aperçu des stratégies pour une meilleure émulation d'appareil :

Aspect	Best Practice	Impact positif
Configuration de l'agent utilisateur	Attribuer un agent utilisateur à chaque nouvel onglet ou page	40 % de diminution du trafic des robots
Modèles de demande	Imiter les modèles d'empreintes digitales du navigateur	Réduit les risques de détection
Alignement de l'en-tête	Faire correspondre les en-têtes HTTP à l'agent utilisateur attribué	Assure une émulation cohérente

Par exemple, Farfetch nous avons mis en œuvre ces méthodes en février 2023 et avons constaté une baisse de 40 % du trafic des robots ainsi qu'une amélioration de 15 % des temps de chargement Ces résultats montrent comment de petits ajustements peuvent conduire à de grands gains de performance.

Prochaines étapes avec Puppeteer

Une fois les bases maîtrisées, améliorez vos scripts Puppeteer en ajustant les paramètres de lancement pour un comportement plus réaliste. Voici un exemple de configuration pour commencer :

// Advanced browser launch setup
const browser = await puppeteer.launch({
  args: [
    '--enable-webgl',
    '--use-gl=desktop',
    '--disable-automation'
  ],
  ignoreDefaultArgs: ['--enable-automation']
});

Cette configuration permet des fonctionnalités telles que WebGL tout en désactivant les indicateurs d'automatisation, aidant vos scripts à s'intégrer plus naturellement.