PuppeteerでXPathによる要素の検索方法

Puppeteerでは、ページ.$x()関数を利用することで、CSSセレクタではなくXPathで要素を簡単に検索できます。これは複雑なHTML構造をナビゲートする際に特に有用です。PuppeteerでXPathを使用するより詳細で効率的な方法を以下に示します。

以下のスクリプトは、Puppeteerを使用してXPathで要素を検索し、それらと対話する方法を示しています：

      const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // Bright Dataのウェブサイトを開く
  await page.goto('https://brightdata.com');

  // XPathを使用して最初のh2要素を検索
  const [firstH2] = await page.$x('//h2');
  if (firstH2) {
    const h2Text = await page.evaluate(el => el.textContent, firstH2);
    console.log('最初のH2テキスト:', h2Text);
  } else {
    console.log('H2要素が見つかりません');
}

// XPathを使用して特定のクラスを持つすべてのアンカー要素を検索
const allLinks = await page.$x('//a[@class="specific-class"]');
  const linkTexts = await Promise.all(
    allLinks.map(link => page.evaluate(el => el.textContent, link))
);
console.log('特定クラスを持つ全リンク:', linkTexts);

// ブラウザを閉じる
await browser.close();
})();

説明

ブラウザの起動:
- このスクリプトはヘッドレスモードではないPuppeteerブラウザを起動し、ブラウザの動作をリアルタイムで確認できるようにします。
ウェブサイトへの移動:
- スクリプトはpage.goto()を使用してBright Dataのウェブサイトに移動します。
XPathによる要素の検索:
- 最初のH2要素: スクリプトはpage.$x('//h2')を使用して最初のh2要素を検索します。その後、そのテキストコンテンツを抽出してログに記録します。
- 特定のクラスを持つ全アンカー要素: スクリプトはpage.$x('//a[@class="specific-class"]') を使用して、class=”specific-class " を持つ全てのアンカー要素 (<a>) を検出します。それらのテキストコンテンツを抽出してログに記録します。
ブラウザの終了:
- 最後に、スクリプトはbrowser.close()を使用してブラウザを閉じます。