ホームページ >ウェブフロントエンド >jsチュートリアル >Puppeteer を使用してテキスト コンテンツに基づいて要素をクリックする方法

Puppeteer を使用してテキスト コンテンツに基づいて要素をクリックする方法

Barbara Streisand
Barbara Streisandオリジナル
2024-10-29 07:30:30373ブラウズ

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

Puppeteer を使用してテキストを含む要素をクリックする

課題: テキストのみに基づいて要素を見つけてクリックするcontent.

次の HTML スニペットを考えてみましょう:

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

目的: 「ボタン テキスト」を含むボタン要素にクリック アクションを実装します。

解決策:

以下の XPath 式は、目的のテキストを含むボタンを識別します。

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

ただし、周囲の

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

クリック アクションを実行するには:

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

説明:

.contains(. .contains(text(), 'Text') XPath 式では、.contains(text(), 'Text') の代わりに子ノードが含まれることが保証されるため、要素構造のより深いところにあるテキスト ノードが除外されません。

以上がPuppeteer を使用してテキスト コンテンツに基づいて要素をクリックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。