Opérations de clic du marionnettiste : gestion des éléments complexes, doubles clics et dépannage
Apprenez à réaliser des opérations de clic efficaces avec Puppeteer, en maîtrisant les éléments complexes, le contenu dynamique et en résolvant les problèmes courants d'automatisation web.
Puppeteer simplifie l'automatisation du navigateur en proposant 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 complexes comme les iframes et les superpositions, Puppeteer est là pour vous. Voici ce que vous devez savoir :
- Clics de base: Utilisation
page.click()ou l'API Locator pour les interactions standard. - Contenu dynamique: Attendre que les éléments soient chargés ou AJAX réponses avant de cliquer.
- Éléments délicats: Gérez les éléments masqués, superposés ou iframe 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 courants tels que « Élément non trouvé » ou les problèmes de synchronisation à l'aide d'attentes et de sélecteurs précis.
- Conseils de stabilité:Utilisez des délais d'attente appropriés, des délais aléatoires et un mode furtif pour une automatisation plus fluide.
Puppeteer assure une automatisation fiable avec des fonctionnalités telles que les attentes intégrées, ombre DOM Assistance et méthodes de clic avancées. Consultez l'article pour des exemples détaillés et des conseils de dépannage.
sbb-itb-23997f1
Essayez le navigateur sans tête basé sur Puppeteer sur Latenode pour l'automatisation du navigateur !
Latenode est une plateforme d'automatisation d'applications qui s'intègre directement à un navigateur headless basé sur Puppeteer. Ajoutez du code de toute complexité, récupérez des données de sites web, prenez 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 Headless Browser MAINTENANT sur Latenode !
Premiers pas avec les commandes de clic
Plongeons dans la manière dont vous pouvez utiliser efficacement la simulation de clic de Puppeteer, en commençant par quelques exemples pratiques.
Méthode de clic de base
L'espace page.click() La fonction est la méthode de référence de Puppeteer pour déclencher des événements de clic. Voici comment l'utiliser :
<span class="hljs-comment">// Clicking an element by its selector</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>);
<span class="hljs-comment">// Adding options to your click</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.menu-item'</span>, {
<span class="hljs-attr">delay</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// Adds a delay before the click</span>
<span class="hljs-attr">button</span>: <span class="hljs-string">'left'</span>, <span class="hljs-comment">// Specifies the mouse button</span>
<span class="hljs-attr">clickCount</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Number of times to click</span>
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span> <span class="hljs-comment">// Maximum time to wait</span>
});
Pour une approche plus flexible, vous pouvez utiliser l'API Locator de Puppeteer, introduite dans la version 13.0 :
<span class="hljs-keyword">const</span> button = page.<span class="hljs-title function_">getByRole</span>(<span class="hljs-string">'button'</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">'Submit'</span> });
<span class="hljs-keyword">await</span> button.<span class="hljs-title function_">click</span>();
Lorsque les sélecteurs CSS ne répondent pas à vos besoins, pensez à utiliser XPath.
XPath et sélection d'éléments
XPath peut être une alternative puissante pour sélectionner des éléments, en particulier lorsque les sélecteurs CSS ne sont pas suffisants :
<span class="hljs-comment">// Selecting an element with XPath</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$x(<span class="hljs-string">'//button[contains(text(), "Submit")]'</span>);
<span class="hljs-keyword">await</span> element[<span class="hljs-number">0</span>].<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Combining XPath with waiting</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForXPath</span>(
<span class="hljs-string">'//button[@class="submit-btn"]'</span>,
{ <span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span> }
);
<span class="hljs-keyword">await</span> submitButton.<span class="hljs-title function_">click</span>();
Navigation post-clic
Après avoir cliqué, vous devrez peut-être gérer la navigation ou les mises à jour de contenu dynamique. Puppeteer simplifie cette tâche :
<span class="hljs-comment">// Waiting for a page navigation after a click</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>({ <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> }),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#navigation-link'</span>)
]);
<span class="hljs-comment">// Handling dynamic content loading</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.new-content'</span>),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#load-more'</span>)
]);
Pour les applications monopages (SPA), vous pouvez surveiller les modifications spécifiques de l'état de la page :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#update-button'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-string">'document.querySelector(".status").textContent === "Updated"'</span>
);
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 explore les techniques de gestion des éléments délicats qui ne répondent pas aux méthodes de clic standard.
Éléments cachés et superposés
Parfois, certains éléments sont masqués ou recouverts par des superpositions, ce qui les rend impossibles à cliquer. Voici comment ajuster leurs propriétés pour interagir avec eux :
<span class="hljs-comment">// Make a hidden element visible before clicking</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> button = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#hidden-button'</span>);
button.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'block'</span>;
button.<span class="hljs-title function_">scrollIntoView</span>();
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#hidden-button'</span>);
<span class="hljs-comment">// Handle elements blocked by overlays</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> overlay = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.modal-overlay'</span>);
<span class="hljs-keyword">if</span> (overlay) overlay.<span class="hljs-title function_">remove</span>(); <span class="hljs-comment">// Remove the overlay</span>
<span class="hljs-keyword">const</span> target = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#target-button'</span>);
target.<span class="hljs-property">style</span>.<span class="hljs-property">zIndex</span> = <span class="hljs-string">'9999'</span>; <span class="hljs-comment">// Bring the target element to the front</span>
});
Clics sur le contenu dynamique
Traiter des éléments qui se chargent dynamiquement nécessite d'attendre qu'ils deviennent cliquables :
<span class="hljs-comment">// Wait for a dynamically loaded element to appear and then click</span>
<span class="hljs-keyword">const</span> dynamicElement = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.dynamic-content'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
<span class="hljs-keyword">await</span> dynamicElement.<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Handle elements loaded via AJAX</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForResponse</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span>
response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data'</span>)), <span class="hljs-comment">// Wait for the AJAX response</span>
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#load-more-button'</span>) <span class="hljs-comment">// Trigger the AJAX call</span>
]);
Interactions Iframe et survol
Interagir avec des éléments dans des iframes ou nécessitant un survol peut s'avérer complexe. Voici comment y remédier :
<span class="hljs-comment">// Click elements within an iframe</span>
<span class="hljs-keyword">const</span> frame = page.<span class="hljs-title function_">frames</span>().<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">f</span> =></span>
f.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'embedded-content'</span>));
<span class="hljs-keyword">await</span> frame.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.iframe-button'</span>);
<span class="hljs-comment">// Handle hover-triggered interactions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">hover</span>(<span class="hljs-string">'#menu-trigger'</span>); <span class="hljs-comment">// Hover over the trigger</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.dropdown-content'</span>); <span class="hljs-comment">// Wait for the dropdown to appear</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.dropdown-item'</span>); <span class="hljs-comment">// Click the dropdown item</span>
Pour les interactions de survol qui révèlent du contenu supplémentaire :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">hover</span>(<span class="hljs-string">'#interactive-element'</span>); <span class="hljs-comment">// Hover over the interactive element</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.hover-content'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">getComputedStyle</span>(element).<span class="hljs-property">opacity</span> === <span class="hljs-string">'1'</span>; <span class="hljs-comment">// Wait for the content to become visible</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.hover-content .button'</span>); <span class="hljs-comment">// Click the revealed button</span>
"Cliquez sur le premier élément trouvé qui correspond
selector." - Documentation du marionnettiste [2]
Ces méthodes vous aident à interagir de manière fiable avec des éléments web complexes tout en préservant la stabilité et l'efficacité de vos scripts. Nous aborderons ensuite des techniques de clic avancées comme le double-clic, le clic droit et le glisser-déposer.
Méthodes de clic spéciales
Puppeteer propose une gamme d'options de clic avancées, vous permettant d'automatiser des actions de souris complexes avec précision.
Double clic et clic droit
Pour effectuer des doubles-clics, vous pouvez configurer les paramètres de clic comme indiqué ci-dessous :
<span class="hljs-comment">// Double-click using page.click()</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#target-element'</span>, { <span class="hljs-attr">clickCount</span>: <span class="hljs-number">2</span> });
<span class="hljs-comment">// Double-click using mouse coordinates</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'#target-element'</span>);
<span class="hljs-keyword">const</span> rect = <span class="hljs-keyword">await</span> element.<span class="hljs-title function_">boundingBox</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-property">mouse</span>.<span class="hljs-title function_">click</span>(rect.<span class="hljs-property">x</span> + rect.<span class="hljs-property">width</span> / <span class="hljs-number">2</span>, rect.<span class="hljs-property">y</span> + rect.<span class="hljs-property">height</span> / <span class="hljs-number">2</span>, {
<span class="hljs-attr">clickCount</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// Add a delay for stability</span>
});
Pour les clics droits, utilisez le 'button' option pour spécifier l'action :
<span class="hljs-comment">// Right-click on an element</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#context-menu-trigger'</span>, { <span class="hljs-attr">button</span>: <span class="hljs-string">'right'</span> });
<span class="hljs-comment">// Navigate the context menu using keyboard inputs</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-property">keyboard</span>.<span class="hljs-title function_">press</span>(<span class="hljs-string">'ArrowDown'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-property">keyboard</span>.<span class="hljs-title function_">press</span>(<span class="hljs-string">'Enter'</span>);
« Toutes ces interactions se font au niveau du système d'exploitation. Elles se situent donc en dehors de l'espace navigateur/marionnettiste. Il n'y a pas de solution de contournement, à ma connaissance. » - ebidel [3]
En plus de cela, Puppeteer prend également en charge les interactions par glisser-déposer.
Actions de clic et de glissement
Pour effectuer un glisser-déposer, coordonnez plusieurs événements de souris pour obtenir des résultats précis :
<span class="hljs-comment">// Drag-and-drop example</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">dragAndDrop</span>(<span class="hljs-params">page, sourceSelector, targetSelector</span>) {
<span class="hljs-keyword">const</span> source = <span class="hljs-keyword">await</span> page.$(sourceSelector);
<span class="hljs-keyword">const</span> target = <span class="hljs-keyword">await</span> page.$(targetSelector);
<span class="hljs-keyword">const</span> sourceBound = <span class="hljs-keyword">await</span> source.<span class="hljs-title function_">boundingBox</span>();
<span class="hljs-keyword">const</span> targetBound = <span class="hljs-keyword">await</span> target.<span class="hljs-title function_">boundingBox</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-property">mouse</span>.<span class="hljs-title function_">move</span>(
sourceBound.<span class="hljs-property">x</span> + sourceBound.<span class="hljs-property">width</span> / <span class="hljs-number">2</span>,
sourceBound.<span class="hljs-property">y</span> + sourceBound.<span class="hljs-property">height</span> / <span class="hljs-number">2</span>
);
<span class="hljs-keyword">await</span> page.<span class="hljs-property">mouse</span>.<span class="hljs-title function_">down</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">100</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-property">mouse</span>.<span class="hljs-title function_">move</span>(
targetBound.<span class="hljs-property">x</span> + targetBound.<span class="hljs-property">width</span> / <span class="hljs-number">2</span>,
targetBound.<span class="hljs-property">y</span> + targetBound.<span class="hljs-property">height</span> / <span class="hljs-number">2</span>,
{ <span class="hljs-attr">steps</span>: <span class="hljs-number">10</span> }
);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">100</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-property">mouse</span>.<span class="hljs-title function_">up</span>();
}
Pour des interactions plus spécifiques comme des curseurs ou des listes triables, vous pouvez envoyer des événements de glissement personnalisés :
<span class="hljs-comment">// Trigger custom drag events</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">sourceSelector</span>) =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(sourceSelector);
element.<span class="hljs-title function_">dispatchEvent</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">MouseEvent</span>(<span class="hljs-string">'dragstart'</span>, {
<span class="hljs-attr">bubbles</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">cancelable</span>: <span class="hljs-literal">true</span>
}));
}, sourceSelector);
AJAX Cliquez sur les événements
Puppeteer gère également les clics qui déclenchent des mises à jour asynchrones, comme les requêtes AJAX. Utilisez des mécanismes d'attente appropriés pour garantir la fiabilité :
<span class="hljs-comment">// Wait for an AJAX response after a click</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForResponse</span>(
<span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/endpoint'</span>)
),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#ajax-button'</span>)
]);
<span class="hljs-comment">// Handle multiple AJAX requests simultaneously</span>
<span class="hljs-keyword">const</span> [response1, response2] = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForResponse</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> res.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data1'</span>)),
page.<span class="hljs-title function_">waitForResponse</span>(<span class="hljs-function"><span class="hljs-params">res</span> =></span> res.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data2'</span>)),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#multi-ajax-trigger'</span>)
]);
Pour le contenu dynamique chargé via AJAX, vous pouvez vérifier les mises à jour en combinant les événements de clic avec les vérifications de contenu :
<span class="hljs-comment">// Verify dynamic content loaded after clicking</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#load-more'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-function"><span class="hljs-params">selector</span> =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(selector).<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">10</span>,
{},
<span class="hljs-string">'.dynamic-content'</span>
);
Ces méthodes vous permettent d’automatiser les interactions complexes des utilisateurs tout en garantissant la fiabilité grâce à une gestion appropriée du timing et des événements.
Problèmes de clic courants et solutions
Cette section explore les erreurs fréquentes liées aux clics dans Puppeteer et comment les résoudre efficacement.
Correction de l'erreur « Élément introuvable »
L'erreur « Élément introuvable » se produit lorsque Puppeteer ne parvient pas à localiser l'élément cible. Pour résoudre ce problème, essayez d'utiliser des sélecteurs précis, de gérer les éléments Shadow DOM ou de vous assurer que les éléments masqués sont visibles :
<span class="hljs-comment">// Use specific selectors</span>
<span class="hljs-keyword">const</span> button = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#submit-form-button'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
<span class="hljs-comment">// Handle elements inside a Shadow DOM</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">selector</span>) =></span> {
<span class="hljs-keyword">const</span> root = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#shadow-host'</span>).<span class="hljs-property">shadowRoot</span>;
<span class="hljs-keyword">const</span> element = root.<span class="hljs-title function_">querySelector</span>(selector);
element.<span class="hljs-title function_">click</span>();
}, <span class="hljs-string">'#target-button'</span>);
<span class="hljs-comment">// Make hidden elements visible and scroll into view</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">selector</span>) =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(selector);
element.<span class="hljs-title function_">scrollIntoView</span>();
element.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'block'</span>;
}, <span class="hljs-string">'#hidden-element'</span>);
Une fois que vous avez résolu les problèmes de sélecteur, les problèmes liés au timing peuvent toujours interférer avec les opérations de clic.
Résoudre les problèmes de synchronisation
Des problèmes de synchronisation surviennent souvent lorsque les éléments ne sont pas entièrement chargés ou visibles. Voici comment les résoudre :
<span class="hljs-comment">// Wait for navigation and element visibility before clicking</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>({ <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> }),
page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#dynamic-content'</span>, { <span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span> }),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#trigger-button'</span>)
]);
<span class="hljs-comment">// Add random delays to simulate real user behavior</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">1</span>)) + <span class="hljs-number">1000</span>;
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
Ces techniques permettent de synchroniser vos actions avec le contenu dynamique de la page.
Relever les défis de sécurité des navigateurs
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 les configurations sécurisées de Puppeteer :
<span class="hljs-comment">// Enable stealth mode with puppeteer-extra</span>
<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-attr">headless</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">ignoreHTTPSErrors</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [
<span class="hljs-string">'--no-sandbox'</span>,
<span class="hljs-string">'--disable-setuid-sandbox'</span>,
<span class="hljs-string">'--disable-sync'</span>,
<span class="hljs-string">'--ignore-certificate-errors'</span>,
<span class="hljs-string">'--lang=en-US,en;q=0.9'</span>
]
});
Pour plus d’isolement et de sécurité :
<span class="hljs-keyword">const</span> { launch } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'secure-puppeteer'</span>);
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> <span class="hljs-title function_">launch</span>({
<span class="hljs-attr">isolateGlobalScope</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">interceptFetch</span>: <span class="hljs-literal">true</span>
});
« Toutes ces interactions se font au niveau du système d'exploitation. Elles se situent donc en dehors de l'espace navigateur/marionnettiste. Il n'y a pas de solution de contournement, à ma connaissance. » - ebidel [3]
Cliquez sur les directives d'utilisation
Paramètres d'attente et de délai d'expiration
Des configurations d'attente et de délai d'expiration appropriées sont essentielles pour garantir la fiabilité des clics. Voici comment les gérer efficacement :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">60000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#loginBtn'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>({ <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> }),
page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#dynamic-content'</span>),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#trigger-button'</span>)
]);
Pour le contenu piloté par API, il est crucial d'attendre que le réseau soit inactif :
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNetworkIdle</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#fetchUsers'</span>)
]);
Si les attentes de clic intégrées ne répondent pas à vos besoins, des scripts personnalisés peuvent gérer des scénarios 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 :
<span class="hljs-keyword">const</span> shadowClick = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> root = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#shadow-host'</span>).<span class="hljs-property">shadowRoot</span>;
<span class="hljs-keyword">const</span> button = root.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#shadow-button'</span>);
<span class="hljs-keyword">return</span> button.<span class="hljs-title function_">click</span>();
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#obscured-button'</span>);
element.<span class="hljs-property">style</span>.<span class="hljs-property">zIndex</span> = <span class="hljs-string">'999999'</span>;
element.<span class="hljs-title function_">click</span>();
});
Ces méthodes sont particulièrement utiles pour :
- Interaction avec les éléments Shadow DOM
- Gestion du contenu dynamique ou caché
- Cliquer sur les éléments derrière les superpositions
- Naviguer dans des structures DOM complexes
Des scripts personnalisés comme ceux-ci peuvent gérer des cas extrêmes que les méthodes standard pourraient ne pas couvrir.
Conseils de vitesse et de stabilité
Après avoir résolu les problèmes de timing et d'interaction, concentrez-vous sur l'amélioration de la vitesse et de la stabilité pour optimiser votre automatisation :
<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">2000</span> - <span class="hljs-number">500</span>)) + <span class="hljs-number">500</span>;
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#target-button'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
Pour travailler avec des iframes :
<span class="hljs-keyword">const</span> frame = page.<span class="hljs-title function_">frames</span>().<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">f</span> =></span> f.<span class="hljs-title function_">name</span>() === <span class="hljs-string">'content-frame'</span>);
<span class="hljs-keyword">await</span> frame.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#frame-button'</span>);
<span class="hljs-keyword">await</span> frame.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#frame-button'</span>);
Pour garantir la fiabilité :
- Utilisez les sélecteurs CSS pour un ciblage plus rapide des éléments
- Envelopper les opérations critiques dans des blocs try-catch
- Surveiller l'activité du réseau pour le contenu dynamique
- Définissez des délais d'attente pratiques pour éviter les retards inutiles
Ces stratégies contribuent à créer des flux de travail d’automatisation plus fiables et plus efficaces.
Résumé
Puppeteer simplifie l'automatisation web grâce à sa gamme d'opérations de clic, offrant un ciblage précis et de multiples méthodes pour gérer différents scénarios. Voici un bref aperçu de ses fonctionnalités de clic :
| Cliquez sur Type | Méthode de mise en œuvre | Meilleur cas d'utilisation |
|---|---|---|
| Clic de base | page.click('#element') | Interactions générales entre éléments |
| Double clic | page.mouse.double-clic() | Formulaires, sélection de texte |
| Clic droit | page.mouse.click(x, y, { bouton: 'droite' }) | Activation des menus contextuels |
| Coordonnée Cliquez | page.mouse.click(x, y) | Travailler avec des toiles ou des cartes |
Ces méthodes s'intègrent parfaitement aux workflows d'automatisation, résolvant des problèmes courants tels que la gestion de l'état des éléments et les problèmes de timing. L'API Locator de Puppeteer garantit que les éléments sont présents et prêts avant l'interaction, réduisant ainsi les échecs de script dus à des erreurs de timing. [1].
Pour les pages Web complexes, Puppeteer prend en charge les sélecteurs CSS avancés, y compris ceux pour Shadow DOM, AIR attributs et ciblage textuel. Cela le rend particulièrement utile pour le contenu dynamique, les superpositions et les structures DOM complexes. La combinaison de ces sélecteurs avec les mécanismes d'attente et de gestion des erreurs de Puppeteer garantit une automatisation fluide et cohérente.
« Toutes ces interactions se font au niveau du système d'exploitation. Elles se situent donc en dehors de l'espace navigateur/marionnettiste. Il n'y a pas de solution de contournement, à ma connaissance. » - ebidel [3]
articles similaires
- Navigateur sans tête en C# : configuration et exemples de code
- Installation et configuration de Puppeteer : résolution des problèmes courants de dépendance et de Chromium
- Maîtriser la navigation dans les pages avec Puppeteer : utilisation efficace des options Goto et Navigation
- Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur
