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

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

Susan Sarandon
リリース: 2024-10-28 16:30:02
オリジナル
954 人が閲覧しました

How to Click Elements Based on Text Content Using Puppeteer and XPath?

Puppeteer でテキストで要素をクリックする

Puppeteer では、XPath 式を使用してテキストの内容に基づいて特定の要素をクリックすることができます。

テキストを含む要素をクリックする方法

特定のテキストを含む要素をクリックするには、次の XPath 式を使用します:

const [element] = await page.$x("//element[contains(., 'text')]");
await element.click();
ログイン後にコピー

Replace "element" " には適切なタグ名 (例: "button" や "a") を指定し、"text" には一致する必要な部分文字列を指定します。例:

//button[contains(., 'Button text')]
ログイン後にコピー

考慮事項

  • 要素に正確なテキスト文字列が含まれていることを確認してください。
  • 要素がネストされている場合特定のコンテナの場合は、追加の「/」を使用して、目的の祖先要素を選択します。たとえば、div 内のボタンをクリックするには:
//div[@class='container']/button[contains(., 'Button text')]
ログイン後にコピー

XPath vs. Text()

XPath 式には (., ' Text') は、要素の子ノードを使用して、指定されたテキストと一致します。対照的に、contains(text(), 'Text') は要素のテキスト コンテンツのみを考慮します。

次の HTML があるとします:

<div class="elements">
    <button>Button text</button>
    <a href="#">Href text</a>
    <div>Div text</div>
</div>
ログイン後にコピー

ボタンをクリックするには、次を使用します:

const [button] = await page.$x("//div[@class='elements']/button[contains(., 'Button text')]");
await button.click();
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート