如何在 Puppeteer 中通过 XPath 查找元素？

通过 Puppeteer，您可以利用 page.$x() 函数轻松地使用 XPath 而不是 CSS 选择器来查找元素。这对于应对复杂的 HTML 结构特别有用。下文介绍在 Puppeteer 中使用 XPath 的更详细、更高效的方法。

以下脚本演示了如何使用 Puppeteer 通过 XPath 查找元素并与其交互：

      const puppeteer = require('puppeteer');

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

  // Open Bright Data's website
  await page.goto('https://brightdata.com');

  // Find the first h2 element using XPath
  const [firstH2] = await page.$x('//h2');
  if (firstH2) {
    const h2Text = await page.evaluate(el => el.textContent, firstH2);
    console.log('First H2 Text:', h2Text);
  } else {
    console.log('No H2 element found');
  }

  // Find all anchor elements with a specific class using 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('All Links with specific class:', linkTexts);

  // Close the browser
  await browser.close();
})();

说明

启动浏览器：
- 该脚本以非无头模式启动 Puppeteer 浏览器，以便您实时查看浏览器操作。
导航至网站：
- 该脚本使用 page.goto() 导航到 Bright Data 的网站。
通过 XPath 查找元素：
- 第一个 H2 元素：脚本使用 page.$x('//h2') 查找第一个 h2 元素。然后提取并记录其文本内容。
- 具有特定类的所有锚点元素：该脚本使用 page.$x('//a[@class="specific-class"]') 查找类为 specific-class 的所有锚点 () 元素。它提取并记录元素的文本内容。
关闭浏览器：
- 最后，脚本使用 browser.close() 关闭浏览器。