Opérations de clic avec Puppeteer : gestion des éléments complexes, des doubles clics et résolution des problèmes

Puppeteer simplifie l’automatisation du navigateur et propose des outils puissants pour cliquer et interagir avec les éléments web. Que vous gériez des clics simples, du contenu dynamique ou des éléments délicats tels que les iframes et les superpositions, Puppeteer répond à vos besoins. Voici ce que vous devez savoir :

• Clics de base : utilisez page.click() ou l’API Locator pour les interactions standard.
• Contenu dynamique : attendez le chargement des éléments ou les réponses AJAX avant de cliquer.
• Éléments délicats : gérez les éléments masqués, recouverts par des superpositions ou présents dans des iframes avec des scripts personnalisés.
• Actions avancées : effectuez des doubles clics, des clics droits et des opérations de glisser-déposer.
• Gestion des erreurs : corrigez les problèmes fréquents tels que « Élément introuvable » ou les problèmes de synchronisation grâce aux attentes et à des sélecteurs précis.
• Conseils de stabilité : utilisez des délais d’expiration adaptés, des pauses aléatoires et le mode furtif pour une automatisation plus fluide.

Puppeteer garantit une automatisation fiable grâce à des fonctionnalités telles que les attentes intégrées, la prise en charge du shadow DOM et des méthodes de clic avancées. Découvrez l’article pour obtenir des exemples détaillés et des conseils de dépannage.

sbb-itb-23997f1

Essayez le navigateur headless basé sur Puppeteer de Latenode pour l’automatisation du navigateur !

Latenode est une plateforme d’automatisation d’applications qui offre une intégration directe avec un navigateur headless basé sur Puppeteer. Ajoutez du code de toute complexité, extrayez des données de sites web, réalisez des captures d’écran et effectuez toutes les opérations imaginables.

Ne manquez pas l’occasion d’améliorer, de simplifier et d’accélérer l’automatisation web. Essayez le navigateur headless de Latenode DÈS MAINTENANT !

Premiers pas avec les commandes de clic

Voyons comment utiliser efficacement la simulation de clics de Puppeteer, en commençant par quelques exemples pratiques.

Méthode de clic de base

La fonction page.click() est la méthode de référence de Puppeteer pour déclencher des événements de clic. Voici comment l’utiliser :

// Cliquer sur un élément via son sélecteur
await page.click('#submit-button');

// Ajouter des options à votre clic
await page.click('.menu-item', {
  delay: 100,           // Ajoute un délai avant le clic
  button: 'left',       // Spécifie le bouton de la souris
  clickCount: 1,        // Nombre de clics à effectuer
  timeout: 30000        // Temps d’attente maximal
});

Pour une approche plus flexible, vous pouvez utiliser l’API Locator de Puppeteer, introduite dans la version 13.0 :

const button = page.getByRole('button', { name: 'Submit' });
await button.click();

Lorsque les sélecteurs CSS ne répondent pas à vos besoins, envisagez d’utiliser XPath.

XPath et sélection d’éléments

XPath peut être une alternative puissante pour sélectionner des éléments, notamment lorsque les sélecteurs CSS ne suffisent pas :

// Sélectionner un élément avec XPath
const element = await page.$x('//button[contains(text(), "Submit")]');
await element[0].click();

// Associer XPath à une attente
const submitButton = await page.waitForXPath(
  '//button[@class="submit-btn"]',
  { visible: true }
);
await submitButton.click();

Navigation après un clic

Après un clic, vous devrez peut-être gérer une navigation ou des mises à jour de contenu dynamique. Puppeteer simplifie cette tâche :

// Attendre une navigation de page après un clic
await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
  page.click('#navigation-link')
]);

// Gérer le chargement de contenu dynamique
await Promise.all([
  page.waitForSelector('.new-content'),
  page.click('#load-more')
]);

Pour les applications monopages (SPA), vous pouvez surveiller des changements spécifiques de l’état de la page :

await page.click('#update-button');
await page.waitForFunction(
  'document.querySelector(".status").textContent === "Updated"'
);

Ces techniques vous aideront à gérer plus efficacement les clics et leurs résultats dans vos scripts Puppeteer.

Travailler avec des éléments difficiles

Cette section présente les techniques permettant de gérer les éléments complexes qui ne répondent pas aux méthodes de clic standard.

Éléments masqués et superpositions

Les éléments sont parfois masqués ou recouverts par des superpositions, ce qui les empêche d’être cliquables. Voici comment ajuster leurs propriétés pour interagir avec eux :

// Rendre un élément masqué visible avant de cliquer
await page.evaluate(() => {
  const button = document.querySelector('#hidden-button');
  button.style.display = 'block';
  button.scrollIntoView();
});
await page.click('#hidden-button');

// Gérer les éléments bloqués par des superpositions
await page.evaluate(() => {
  const overlay = document.querySelector('.modal-overlay');
  if (overlay) overlay.remove(); // Supprimer la superposition
  const target = document.querySelector('#target-button');
  target.style.zIndex = '9999'; // Placer l’élément cible au premier plan
});

Clics sur du contenu dynamique

La gestion des éléments chargés dynamiquement exige d’attendre qu’ils deviennent cliquables :

// Attendre qu'un élément chargé dynamiquement apparaisse, puis cliquer
const dynamicElement = await page.waitForSelector('.dynamic-content', {
  visible: true,
  timeout: 5000
});
await dynamicElement.click();

// Gérer les éléments chargés via AJAX
await Promise.all([
  page.waitForResponse(response => 
    response.url().includes('/api/data')), // Attendre la réponse AJAX
  page.click('#load-more-button') // Déclencher l’appel AJAX
]);

Interactions avec les iframes et au survol

Interagir avec des éléments dans des iframes ou exigeant des actions de survol peut être délicat. Voici comment les gérer :

// Cliquer sur des éléments dans une iframe
const frame = page.frames().find(f => 
  f.url().includes('embedded-content'));
await frame.click('.iframe-button');

// Gérer les interactions déclenchées au survol
await page.hover('#menu-trigger'); // Survoler le déclencheur
await page.waitForSelector('.dropdown-content'); // Attendre que la liste déroulante apparaisse
await page.click('.dropdown-item'); // Cliquer sur l’élément de la liste déroulante

Pour les interactions au survol qui révèlent du contenu supplémentaire :

await page.hover('#interactive-element'); // Survoler l’élément interactif
await page.waitForFunction(() => {
  const element = document.querySelector('.hover-content');
  return window.getComputedStyle(element).opacity === '1'; // Attendre que le contenu devienne visible
});
await page.click('.hover-content .button'); // Cliquer sur le bouton révélé

« Clique sur le premier élément trouvé qui correspond à selector. » — Documentation Puppeteer [2]

Ces méthodes vous aident à interagir de manière fiable avec des éléments web complexes tout en gardant vos scripts stables et efficaces. Nous aborderons ensuite des techniques de clic avancées telles que les doubles clics, les clics droits et les actions de glissement.

Méthodes de clic spéciales

Puppeteer offre un ensemble d’options de clic avancées qui vous permettent d’automatiser précisément des actions complexes de la souris.

Doubles clics et clics droits

Pour effectuer des doubles clics, vous pouvez configurer les paramètres de clic comme indiqué ci-dessous :

// Double-cliquer avec page.click()
await page.click('#target-element', { clickCount: 2 });

// Double-cliquer à l’aide des coordonnées de la souris
const element = await page.$('#target-element');
const rect = await element.boundingBox();
await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2, {
  clickCount: 2,
  delay: 100 // Ajouter un délai pour plus de stabilité
});

Pour les clics droits, utilisez l’option 'button' afin de spécifier l’action :

// Effectuer un clic droit sur un élément
await page.click('#context-menu-trigger', { button: 'right' });

// Parcourir le menu contextuel avec les entrées clavier
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');

« Oui, toutes ces interactions se situent au niveau du système d’exploitation. Elles sont donc en dehors de l’espace navigateur/puppeteer. Il n’existe aucune solution de contournement à ma connaissance. » — ebidel [3]

En plus de ces actions, Puppeteer prend également en charge les interactions de glisser-déposer.

Actions de clic et glissement

Pour effectuer un glisser-déposer, coordonnez plusieurs événements de souris afin d’obtenir des résultats précis :

// Exemple de glisser-déposer
async function dragAndDrop(page, sourceSelector, targetSelector) {
  const source = await page.$(sourceSelector);
  const target = await page.$(targetSelector);

  const sourceBound = await source.boundingBox();
  const targetBound = await target.boundingBox();

  await page.mouse.move(
    sourceBound.x + sourceBound.width / 2,
    sourceBound.y + sourceBound.height / 2
  );
  await page.mouse.down();
  await page.waitForTimeout(100);

  await page.mouse.move(
    targetBound.x + targetBound.width / 2,
    targetBound.y + targetBound.height / 2,
    { steps: 10 }
  );
  await page.waitForTimeout(100);
  await page.mouse.up();
}

Pour des interactions plus spécifiques, comme les curseurs ou les listes triables, vous pouvez déclencher des événements de glissement personnalisés :

// Déclencher des événements de glissement personnalisés
await page.evaluate((sourceSelector) => {
  const element = document.querySelector(sourceSelector);
  element.dispatchEvent(new MouseEvent('dragstart', {
    bubbles: true,
    cancelable: true
  }));
}, sourceSelector);

Événements de clic AJAX

Puppeteer gère également les clics qui déclenchent des mises à jour asynchrones, telles que les requêtes AJAX. Utilisez des mécanismes d’attente appropriés pour garantir leur fiabilité :

// Attendre une réponse AJAX après un clic
await Promise.all([
  page.waitForResponse(
    response => response.url().includes('/api/endpoint')
  ),
  page.click('#ajax-button')
]);

// Gérer simultanément plusieurs requêtes AJAX
const [response1, response2] = await Promise.all([
  page.waitForResponse(res => res.url().includes('/api/data1')),
  page.waitForResponse(res => res.url().includes('/api/data2')),
  page.click('#multi-ajax-trigger')
]);

Pour le contenu dynamique chargé via AJAX, vous pouvez vérifier les mises à jour en combinant les événements de clic et les contrôles de contenu :

// Vérifier que le contenu dynamique est chargé après le clic
await page.click('#load-more');
await page.waitForFunction(
  selector => document.querySelector(selector).children.length > 10,
  {},
  '.dynamic-content'
);

Ces méthodes vous permettent d’automatiser des interactions utilisateur complexes tout en assurant leur fiabilité grâce à une gestion adéquate du temps et des événements.

Problèmes de clic fréquents et solutions

Cette section examine les erreurs fréquentes liées aux clics dans Puppeteer et explique comment les résoudre efficacement.

Corriger l’erreur « Élément introuvable »

L’erreur « Élément introuvable » se produit lorsque Puppeteer ne parvient pas à localiser l’élément cible. Pour la résoudre, essayez d’utiliser des sélecteurs précis, de gérer les éléments du Shadow DOM ou de vous assurer que les éléments masqués sont visibles :

// Utiliser des sélecteurs spécifiques
const button = await page.waitForSelector('#submit-form-button', {
  visible: true,
  timeout: 5000
});

// Gérer les éléments au sein d’un Shadow DOM
await page.evaluate((selector) => {
  const root = document.querySelector('#shadow-host').shadowRoot;
  const element = root.querySelector(selector);
  element.click();
}, '#target-button');

// Rendre les éléments masqués visibles et les faire défiler à l’écran
await page.evaluate((selector) => {
  const element = document.querySelector(selector);
  element.scrollIntoView();
  element.style.display = 'block';
}, '#hidden-element');

Une fois les problèmes de sélecteurs résolus, des difficultés liées au timing peuvent encore perturber les opérations de clic.

Résoudre les problèmes de synchronisation

Les problèmes de synchronisation surviennent souvent lorsque les éléments ne sont pas entièrement chargés ou visibles. Voici comment les gérer :

// Attendre la navigation et la visibilité de l’élément avant de cliquer
await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
  page.waitForSelector('#dynamic-content', { visible: true }),
  page.click('#trigger-button')
]);

// Ajouter des pauses aléatoires pour simuler le comportement d’un utilisateur réel
const delay = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000;
await page.waitForTimeout(delay);

Ces techniques permettent de synchroniser vos actions avec le contenu dynamique de la page.

Gérer les défis liés à la sécurité du navigateur

Les fonctionnalités de sécurité du navigateur peuvent parfois bloquer les clics automatisés. Pour contourner ces restrictions, vous pouvez utiliser le mode furtif ou des configurations Puppeteer sécurisées :

// Activer le mode furtif avec puppeteer-extra
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch({
  headless: false,
  ignoreHTTPSErrors: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-sync',
    '--ignore-certificate-errors',
    '--lang=en-US,en;q=0.9'
  ]
});

Pour davantage d’isolation et de sécurité :

const { launch } = require('secure-puppeteer');
const browser = await launch({
  isolateGlobalScope: true,
  interceptFetch: true
});

« Oui, toutes ces interactions se situent au niveau du système d’exploitation. Elles sont donc en dehors de l’espace navigateur/puppeteer. Il n’existe aucune solution de contournement à ma connaissance. » — ebidel [3]

Bonnes pratiques pour les opérations de clic

Paramètres d’attente et de délai d’expiration

Des configurations d’attente et de délai d’expiration adaptées sont essentielles pour garantir des opérations de clic fiables. Voici comment les gérer efficacement :

await page.setDefaultTimeout(60000);

await page.waitForSelector('#loginBtn', {
  visible: true,
  timeout: 30000
});

await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
  page.waitForSelector('#dynamic-content'),
  page.click('#trigger-button')
]);

Pour le contenu piloté par API, attendre l’inactivité du réseau est essentiel :

await Promise.all([
  page.waitForNetworkIdle(),
  page.click('#fetchUsers')
]);

Si les attentes intégrées aux clics ne répondent pas à vos besoins, des scripts personnalisés peuvent gérer des situations plus complexes.

Méthodes de clic JavaScript personnalisées

Dans les situations complexes, utilisez page.evaluate() pour exécuter des scripts de clic personnalisés. Voici quelques exemples :

const shadowClick = await page.evaluate(() => {
  const root = document.querySelector('#shadow-host').shadowRoot;
  const button = root.querySelector('#shadow-button');
  return button.click();
});

await page.evaluate(() => {
  const element = document.querySelector('#obscured-button');
  element.style.zIndex = '999999';
  element.click();
});

Ces méthodes sont particulièrement utiles pour :

• Interagir avec des éléments du Shadow DOM
• Gérer du contenu dynamique ou masqué
• Cliquer sur des éléments derrière des superpositions
• Parcourir des structures DOM complexes

Des scripts personnalisés comme ceux-ci peuvent gérer les cas particuliers que les méthodes standard ne couvrent pas forcément.

Conseils de vitesse et de stabilité

Après avoir traité les problèmes de synchronisation et d’interaction, concentrez-vous sur l’amélioration de la vitesse et de la stabilité afin d’optimiser votre automatisation :

const delay = Math.floor(Math.random() * (2000 - 500)) + 500;
await page.waitForTimeout(delay);

await page.waitForSelector('#target-button', {
  visible: true,
  timeout: 5000
});

Pour travailler avec des iframes :

const frame = page.frames().find(f => f.name() === 'content-frame');
await frame.waitForSelector('#frame-button');
await frame.click('#frame-button');

Pour garantir la fiabilité :

• Utilisez des sélecteurs CSS afin de cibler plus rapidement les éléments
• Encapsulez les opérations critiques dans des blocs try-catch
• Surveillez l’activité réseau pour le contenu dynamique
• Définissez des délais d’expiration réalistes afin d’éviter les attentes inutiles

Ces stratégies contribuent à créer des workflows d’automatisation plus fiables et efficaces.

Résumé

Puppeteer simplifie l’automatisation web grâce à son éventail d’opérations de clic, en offrant un ciblage précis et plusieurs méthodes pour gérer différents cas de figure. Voici un aperçu rapide de ses capacités de clic :

Ces méthodes s’intègrent parfaitement aux workflows d’automatisation et répondent aux défis fréquents tels que la gestion de l’état des éléments et les problèmes de synchronisation. L’API Locator de Puppeteer garantit que les éléments sont présents et prêts avant toute interaction, ce qui réduit les échecs de script liés aux erreurs de timing [1].

Pour les pages web complexes, Puppeteer prend en charge les sélecteurs CSS avancés, y compris ceux destinés au shadow DOM, aux attributs ARIA et au ciblage basé sur le texte. Cela le rend particulièrement utile pour le contenu dynamique, les superpositions et les structures DOM complexes. L’association de ces sélecteurs aux mécanismes d’attente et à la gestion des erreurs de Puppeteer garantit une automatisation fluide et cohérente.

« Oui, toutes ces interactions se situent au niveau du système d’exploitation. Elles sont donc en dehors de l’espace navigateur/puppeteer. Il n’existe aucune solution de contournement à ma connaissance. » — ebidel [3]