Abonnements
PRODUIT
SOLUTIONS
par cas d'utilisation
AI Gestion du leadFacturationRéseaux SociauxGestion de projetGestion des donnéespar industrie
en savoir plus
BlogGabaritsVidéosYoutubeRESSOURCES
COMMUNAUTÉS ET RÉSEAUX SOCIAUX
PARTENAIRES
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:
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 :
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é.
Préparez Puppeteer en installant les dépendances nécessaires et en écrivant votre premier script d'émulation.
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.
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 :
~/.cache/puppeteer
.PUPPETEER_CACHE_DIR
variable d'environnement.Cette section explique comment configurer et affiner efficacement les paramètres de l'agent utilisateur.
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.
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'
);
Voici quelques conseils pour assurer une gestion fluide des User-Agents :
// 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'
);
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.
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.
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);
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');
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.
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 :
async function naturalDelay() {
const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
await page.waitForTimeout(delay);
}
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.
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.
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 constaté une baisse de 40 % du trafic de robots et une amélioration de 15 % des temps de chargement. Ces résultats montrent comment de petits ajustements peuvent générer d'importants gains de performance.
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.