puppeteer 定位 动态加载元素

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来控制无头 Chrome 或 Chromium 浏览器。对于动态加载的元素，Puppeteer 提供了多种方法来处理和定位。以下是一些常用的方法：

1. **等待元素加载**：
使用 `waitForSelector` 方法等待元素加载完成。例如：

   await page.waitForSelector('.dynamic-element');

2. **使用选择器**：
使用 CSS 选择器或 XPath 选择器来定位元素。例如：

   const element = await page.$('.dynamic-element');

3. **等待函数**：
使用 `page.waitForFunction` 方法等待自定义条件满足。例如：

   await page.waitForFunction(() => document.querySelector('.dynamic-element'));

4. **使用延迟**：
虽然不推荐，但有时可以使用 `setTimeout` 来等待元素加载。例如：

   await page.waitForTimeout(1000); // 等待1秒

以下是一个完整的示例，展示了如何使用 Puppeteer 定位动态加载的元素：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 等待动态加载的元素
  await page.waitForSelector('.dynamic-element');

  // 获取元素并执行操作
  const element = await page.$('.dynamic-element');
  await element.click();

  await browser.close();
})();