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
Puppeteer simplifie l'automatisation Web en proposant des outils pour contrôler les navigateurs Chrome et Chromium. Le page.goto()
la méthode est essentielle pour naviguer efficacement dans les pages, que ce soit pour des tests, du scraping ou l'automatisation de tâches. Voici ce que vous y trouverez :
page.goto()
: Accédez aux URL avec des options telles que timeout
, waitUntil
et referer
.
domcontentloaded
, load
, networkidle0
, ou networkidle2
pour les pages dynamiques ou statiques.
try-catch
Blocs.
Option d'attente | Idéal pour | Timing (Environ.) |
---|---|---|
domcontentloaded |
Vérifications de structure statique | secondes 1-2 |
load |
Pages statiques entièrement chargées | secondes 2-5 |
networkidle2 |
Équilibré pour un contenu dynamique | secondes 3-8 |
networkidle0 |
Pages complexes et dynamiques | secondes 5-10 |
À retenirAdaptez vos conditions d'attente et votre gestion des erreurs au type de page pour une automatisation fiable. Découvrez des méthodes avancées pour les SPA et les processus en plusieurs étapes afin de gérer efficacement les flux de travail complexes.
Latenode permet d'utiliser le navigateur sans tête alimenté par Puppeteer, en particulier dans vos scénarios automatiques, pour analyser le processus d'analyse des données et surveillance stranic. Vous pouvez simplement intégrer votre bibliothèque d'utilisateurs, ajouter votre code et rechercher vos services - dans vos services bole 300 intégration avec les applications.
Contrairement aux scrapers classiques, il capture la structure visuelle réelle, reconnaissant à la fois les éléments de conception et les blocs de texte. Essayez Headless Browser dans ce modèle maintenant ! Ce flux de travail capture et analyse non seulement les données du site Web, mais garantit également que vous pouvez facilement partager des informations pour une communication transparente.
Le page.goto()
La méthode dans Puppeteer est utilisée pour naviguer vers des URL spécifiques.
Le page.goto()
la méthode accepte plusieurs paramètres pour personnaliser la navigation :
await page.goto(url, {
timeout: 30000,
waitUntil: 'networkidle0',
referer: 'https://example.com'
});
Voici une ventilation des paramètres clés :
Option d'attente | Description | Idéal pour |
---|---|---|
load |
Déclenche lorsque le load l'événement est déclenché. |
Pages statiques faciles à charger. |
domcontentloaded |
Se déclenche lorsque le code HTML initial est entièrement chargé. | Vérifications rapides de la structure de la page. |
networkidle0 |
Attend qu'il n'y ait plus d'activité réseau pendant 500 ms. | Pages avec un contenu dynamique ou complexe. |
networkidle2 |
Attend qu'il ne reste que 2 connexions réseau. | Équilibre la rapidité et la minutie. |
Ces options vous permettent de contrôler comment et quand la page est considérée comme entièrement chargée, garantissant une navigation précise et fiable.
Une fois les paramètres de navigation définis, la gestion de la réponse est l'étape suivante. page.goto()
La méthode renvoie une promesse qui se résout en un objet réponse. Cet objet fournit des détails sur la navigation :
const response = await page.goto(url);
if (response) {
const status = response.status();
const headers = response.headers();
const ok = response.ok(); // true for status codes 200-299
}
Voici comment vous pouvez vérifier la navigation :
response.status()
pour confirmer le statut HTTP.
response.headers()
.
Pour la gestion des erreurs, enveloppez le page.goto()
appel dans un bloc try-catch :
try {
const response = await page.goto(url, { waitUntil: 'networkidle0' });
if (!response.ok()) {
throw new Error(`Page load failed with status: ${response.status()}`);
}
} catch (error) {
console.error('Navigation failed:', error);
}
L'objet de réponse inclut plusieurs méthodes utiles :
response.status()
: Récupère le code d'état HTTP.
response.headers()
: Récupère les en-têtes de réponse.
response.securityDetails()
: Fournit les détails SSL/TLS.
response.timing()
: Offre des données de synchronisation de navigation.
Ces outils vous permettent de valider la navigation et de gérer efficacement tous les problèmes.
Lorsque vous utilisez les fonctionnalités de navigation de Puppeteer, choisir la bonne stratégie d'attente est essentiel pour créer une automatisation fiable. Vos scripts ne doivent s'exécuter que lorsque la page est entièrement prête.
Le marionnettiste utilise le waitUntil
Paramètre définissant le moment où une page est considérée comme chargée. Voici un exemple :
const navigationOptions = { waitUntil: ['load', 'networkidle0'], timeout: 30000 };
await page.goto('https://example.com', navigationOptions);
Si vous spécifiez plusieurs conditions d'attente, Puppeteer attend qu'elles soient toutes remplies avant de continuer. Voici une description des conditions d'attente courantes et de leur durée habituelle :
Condition d'attente | Temps approximatif |
---|---|
domcontentloaded |
secondes 1-2 |
load |
secondes 2-5 |
networkidle2 |
secondes 3-8 |
networkidle0 |
secondes 5-10 |
Choisissez vos conditions d’attente en fonction de la structure de votre page et de la vitesse à laquelle elle se charge.
La bonne condition d'attente dépend du fait que vous avez affaire à un site statique ou dynamique :
// For a static site
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15000 });
// For a dynamic site
await page.goto(url, { waitUntil: 'networkidle0', timeout: 45000 });
Assurez-vous que la valeur du délai d'attente correspond à la complexité de la condition d'attente choisie. Des conditions plus détaillées, comme networkidle0
, des délais d'attente plus longs peuvent être nécessaires pour éviter les erreurs. Pour rendre votre script encore plus fiable, combinez les conditions d'attente avec des vérifications supplémentaires.
Pour une meilleure précision, vous pouvez associer des conditions d'attente à des vérifications d'éléments spécifiques :
await page.goto(url, { waitUntil: 'load' });
await page.waitForSelector('#main-content');
await page.waitForFunction(() => {
return document.readyState === 'complete' && !document.querySelector('.loading-spinner');
});
Cette méthode garantit que la page est entièrement chargée et que certains éléments sont disponibles. Vous minimisez ainsi les échecs de test et améliorez la fiabilité de votre automatisation.
Cette section explique les techniques avancées de gestion de la navigation complexe dans Puppeteer. S'appuyant sur les stratégies de navigation et d'attente de base décrites précédemment, ces méthodes se concentrent sur la gestion de scénarios plus complexes.
Gérez efficacement les erreurs de navigation en combinant des vérifications de délai d'expiration avec des étapes de récupération personnalisées :
const navigationPromise = page.goto(url);
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Navigation timed out')), 45000)
);
try {
await Promise.race([navigationPromise, timeoutPromise]);
} catch (error) {
if (error instanceof TimeoutError) {
await page.reload({ waitUntil: 'networkidle0' });
} else {
console.error(`Navigation failed: ${error.message}`);
throw error;
}
}
Cette approche garantit que les délais d’attente sont gérés et que la page peut récupérer ou se recharger selon les besoins.
La navigation dans les applications monopage (SPA) nécessite une stratégie différente, impliquant souvent des changements d'itinéraire et des comportements spécifiques au framework :
// Wait for the route to update
await page.waitForFunction(
'window.location.pathname === "/dashboard"'
);
// React framework example
await page.click('[data-testid="nav-link"]');
await page.waitForFunction(() => {
return document.querySelector('#react-root').__reactContainer !== null;
});
Cette méthode garantit une navigation fluide dans les SPA en attendant des changements spécifiques dans l'état de l'application.
Pour les flux de travail impliquant plusieurs étapes, vous pouvez combiner des techniques de navigation pour gérer des scénarios complexes :
async function complexNavigation(page, targetUrl) {
// Load the initial page
await page.goto(targetUrl);
// Check for authentication completion
await page.waitForSelector('#auth-complete');
// Handle dynamic content
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});
// Verify the page state
await page.waitForFunction(() => {
return window.performance.timing.loadEventEnd > 0;
});
}
Pour les processus en plusieurs étapes, vous pouvez également utiliser une navigation et des actions parallélisées :
await page.goto(baseUrl);
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.click('button[type="submit"]')
]);
Ces techniques rationalisent la navigation dans les flux de travail complexes, garantissant une gestion efficace du contenu dynamique et des processus en plusieurs étapes.
Améliorer la vitesse et l'efficacité de la navigation est essentiel pour créer des workflows d'automatisation performants. Voici quelques techniques pratiques pour améliorer les performances dans différents scénarios.
Vous pouvez configurer la taille du cache du navigateur et gérer efficacement la mise en cache en suivant ces étapes :
const browser = await puppeteer.launch({
args: ['--disk-cache-size=104857600'], // 100MB cache
userDataDir: './cache-directory'
});
const context = await browser.createIncognitoBrowserContext();
await page._client.send('Network.clearBrowserCache');
await page.setCacheEnabled(true);
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'document') {
request.continue({
headers: {
...request.headers(),
'Cache-Control': 'max-age=3600'
}
});
} else {
request.continue();
}
});
Une fois la mise en cache configurée, vous pouvez vous concentrer sur la gestion du chargement des ressources pour une navigation encore plus rapide.
Pour réduire le chargement inutile des ressources, bloquez les éléments non essentiels comme les images et les polices :
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image' || request.resourceType() === 'font') {
request.abort();
} else {
request.continue();
}
});
Cette approche permet d’économiser de la bande passante et d’accélérer les interactions entre les pages.
Gérer efficacement plusieurs onglets peut améliorer les performances en optimisant les ressources disponibles. Voici comment gérer la navigation entre plusieurs onglets :
async function navigateMultipleTabs(urls) {
const pages = await Promise.all(
urls.map(async url => {
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(30000);
return page;
})
);
await Promise.all(
pages.map(async (page, index) => {
try {
await page.goto(urls[index], {
waitUntil: 'networkidle0',
timeout: 30000
});
} catch (error) {
console.error(`Failed to load ${urls[index]}: ${error.message}`);
await page.close();
}
})
);
return pages.filter(page => !page.isClosed());
}
Pour éviter de surcharger les ressources, limitez le nombre d'onglets ouverts en les traitant par lots :
const maxConcurrentTabs = 3;
const tabPool = [];
for (let i = 0; i < urls.length; i += maxConcurrentTabs) {
const batch = urls.slice(i, i + maxConcurrentTabs);
const currentTabs = await navigateMultipleTabs(batch);
tabPool.push(...currentTabs);
await Promise.all(
tabPool.map(async tab => {
// Process each tab as needed
await tab.close();
})
);
tabPool.length = 0;
}
Cette méthode de traitement par lots garantit un fonctionnement fluide sans surcharger les ressources système.
Pour tirer le meilleur parti de Puppeteer's page.goto()
méthode, concentrez-vous sur ces stratégies pratiques :
waitUntil
option à votre type de page pour une meilleure fiabilité.
try-catch
blocs et délais d'attente pour gérer efficacement les erreurs de navigation.
page.goto()
avec des conditions d'attente personnalisées pour gérer correctement les changements d'état.
Ces approches s'appuient sur les techniques évoquées précédemment et vous aident à gérer des scénarios complexes et à améliorer vos performances. Voici comment les appliquer étape par étape :
1. Configurer la navigation de base
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(30000);
await page.goto(url, {
waitUntil: 'networkidle0',
timeout: 30000
});
2. Intégrer la gestion des erreurs
try {
await page.goto(url, {
waitUntil: ['load', 'networkidle0'],
timeout: 30000
});
} catch (error) {
if (error instanceof TimeoutError) {
await page.evaluate(() => window.stop());
throw error;
}
}
3. Optimiser le chargement des ressources
await page.setRequestInterception(true);
await page.setCacheEnabled(true);
page.on('request', request => {
if (request.resourceType() === 'image') {
request.abort();
} else {
request.continue();
}
});