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 :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'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'</span>
);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>, <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span> });

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 ...

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 :

<span class="hljs-comment"># Option 1: Install Puppeteer with Chrome included</span>
npm i puppeteer

<span class="hljs-comment"># Option 2: Install Puppeteer without Chrome</span>
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 :

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-comment">// Launch browser in non-headless mode</span>
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ 
    <span class="hljs-attr">headless</span>: <span class="hljs-literal">false</span> 
  });

  <span class="hljs-comment">// Create a new page</span>
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();

  <span class="hljs-comment">// Set iPhone X User-Agent</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
    <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) '</span> +
    <span class="hljs-string">'AppleWebKit/604.1.38 (KHTML, like Gecko) '</span> +
    <span class="hljs-string">'Version/11.0 Mobile/15A372 Safari/604.1'</span>
  );

  <span class="hljs-comment">// Configure viewport for iPhone X</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
    <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
    <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">3</span>,
    <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
  });

  <span class="hljs-comment">// Navigate to a webpage</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://pptr.dev'</span>);

  <span class="hljs-comment">// Pause to view the result</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">3000</span>);

  <span class="hljs-comment">// Close the browser</span>
  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();

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

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

<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '</span> +
  <span class="hljs-string">'(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'</span>
);

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:

<span class="hljs-comment">// Desktop Chrome on Windows 10</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

Pour l'émulation mobile :

<span class="hljs-comment">// iPhone 14 Safari</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) '</span> +
  <span class="hljs-string">'AppleWebKit/605.1.15 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Version/16.0 Mobile/15E148 Safari/604.1'</span>
);

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.

<span class="hljs-comment">// Default User-Agent (not recommended)</span>

<span class="hljs-comment">// Custom User-Agent (recommended)</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

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 :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
  <span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
  <span class="hljs-string">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'</span>
});

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.

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">const</span> iPhone15Pro = puppeteer.<span class="hljs-property">KnownDevices</span>[<span class="hljs-string">'iPhone 15 Pro'</span>];

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulate</span>(iPhone15Pro);
  <span class="hljs-comment">// The page now behaves like an iPhone 15 Pro.</span>
})();

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 :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">isLandscape</span>: <span class="hljs-literal">true</span>
});

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1440</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">900</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});

<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">captureBeyondViewport</span>: <span class="hljs-literal">true</span>
};
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>(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 :

<span class="hljs-comment">// Simulate 3G network conditions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateNetworkConditions</span>({
  <span class="hljs-attr">offline</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">downloadThroughput</span>: (<span class="hljs-number">750</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 750 kb/s</span>
  <span class="hljs-attr">uploadThroughput</span>: (<span class="hljs-number">250</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 250 kb/s</span>
  <span class="hljs-attr">latency</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// 100 ms</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">tap</span>(<span class="hljs-string">'#button-element'</span>);

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 :

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
puppeteer.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)'</span>);

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

<span class="hljs-keyword">const</span> newPage = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> newPage.<span class="hljs-title function_">setUserAgent</span>(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:

<span class="hljs-keyword">const</span> stealthPlugin = <span class="hljs-title class_">StealthPlugin</span>();
stealthPlugin.<span class="hljs-property">enabledEvasions</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">'user-agent-override'</span>);
puppeteer.<span class="hljs-title function_">use</span>(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.

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">naturalDelay</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> delay = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * (<span class="hljs-number">3000</span> - <span class="hljs-number">1000</span>) + <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
}

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
  <span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
  <span class="hljs-string">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml'</span>,
  <span class="hljs-string">'User-Agent'</span>: 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 :

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--disable-gpu'</span>,
    <span class="hljs-string">'--disable-dev-shm-usage'</span>,
    <span class="hljs-string">'--disable-setuid-sandbox'</span>,
    <span class="hljs-string">'--no-first-run'</span>,
    <span class="hljs-string">'--no-sandbox'</span>,
    <span class="hljs-string">'--no-zygote'</span>
  ],
  <span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache'</span>
});

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

<span class="hljs-keyword">const</span> screenshot = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
  <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
  <span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>,
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">encoding</span>: <span class="hljs-string">'binary'</span>
});

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

<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-function">(<span class="hljs-params">request</span>) =></span> {
  <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'font'</span>) {
    request.<span class="hljs-title function_">abort</span>();
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

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
Configuration de l'agent utilisateur	Attribuer un agent utilisateur à chaque nouvel onglet ou page	Diminution de 40 % du trafic de bots [1]
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 [1]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 :

<span class="hljs-comment">// Advanced browser launch setup</span>
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--enable-webgl'</span>,
    <span class="hljs-string">'--use-gl=desktop'</span>,
    <span class="hljs-string">'--disable-automation'</span>
  ],
  <span class="hljs-attr">ignoreDefaultArgs</span>: [<span class="hljs-string">'--enable-automation'</span>]
});

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.