Maison >interface Web >js tutoriel >Comment cliquer sur un élément basé sur le contenu textuel à l'aide de Puppeteer ?

Comment cliquer sur un élément basé sur le contenu textuel à l'aide de Puppeteer ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-29 07:30:30411parcourir

How to Click an Element Based on Text Content Using Puppeteer?

Cliquer sur un élément avec du texte à l'aide de Puppeteer

Défi : Localiser et cliquer sur un élément en se basant uniquement sur son texte contenu.

Considérez l'extrait HTML suivant :

<code class="html"><div class="elements">
    <button>Button text</button>
    <a href="#">Href text</a>
    <div>Div text</div>
</div></code>

Objectif : Implémentez une action de clic sur l'élément de bouton qui contient le « Texte du bouton ».

Solution :

L'expression XPath ci-dessous identifie le bouton contenant le texte souhaité :

"//button[contains(., 'Button text')]"

Cependant, pour assurer la compatibilité avec le

conteneur, utilisez cette expression modifiée :

"//div[@class='elements']/button[contains(., 'Button text')]"

Pour exécuter l'action de clic :

const [button] = await page.$x(&quot;//div[@class='elements']/button[contains(., 'Button text')]&quot;);
if (button) {
    await button.click();
}

Explication :

Utilisation de .contains(. , 'Text') au lieu de .contains(text(), 'Text') L'expression XPath garantit qu'elle inclut les nœuds enfants, n'excluant ainsi pas les nœuds de texte plus profonds dans la structure de l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn