如何用Puppeteer按类名获取元素并逐个点击？附可行方案

嘿，我之前也纠结过怎么用Puppeteer实现类似jQuery的批量点击功能——毕竟用jQuery的时候，一行$('.target-class').each((i, el) => $(el).click())就搞定了，换到Puppeteer因为涉及到Node环境和浏览器环境的交互，确实容易踩坑。

我之前也试过Chridam的方案，虽然没直接成功，但思路给了我不少启发。后来折腾出两个可行的方案，分享给你：

方案一：在浏览器上下文内直接处理（最贴近jQuery逻辑） #

这种方式是把操作完全放在浏览器的DOM环境里执行，和你用jQuery的思路几乎一致，避免了跨环境的元素引用失效问题：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // 打开可视化窗口方便调试
  const page = await browser.newPage();
  await page.goto('你的目标页面地址');

  // 等待目标元素加载完成，避免提前执行找不到元素
  await page.waitForSelector('.target-class');

  // 在浏览器上下文内执行DOM操作
  await page.evaluate(() => {
    // 获取所有目标类名的元素，逐个点击
    document.querySelectorAll('.target-class').forEach(element => {
      // 直接触发点击事件，如果是需要真实交互的场景，也可以用dispatchEvent模拟鼠标点击
      element.click();
      // 如果点击后有异步加载，可以在这里加个小延迟，比如 setTimeout(() => {}, 500);
    });
  });

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

方案二：在Node环境循环控制（适合点击后页面有动态变化的场景） #

如果点击某个元素后页面会发生DOM重绘、跳转或者元素重新渲染，直接在浏览器上下文遍历可能会导致元素引用失效。这时候可以在Node端循环，每次重新获取元素：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('你的目标页面地址');

  await page.waitForSelector('.target-class');
  // 先获取元素总数
  const totalElements = await page.$$eval('.target-class', els => els.length);

  for (let i = 0; i < totalElements; i++) {
    // 每次循环都重新获取元素列表，避免之前的引用过期
    const elements = await page.$$('.target-class');
    // 点击第i个元素
    await elements[i].click();
    // 如果点击后页面有跳转或加载，记得加等待，比如：
    // await page.waitForNavigation({ waitUntil: 'networkidle2' });
    // 或者等待某个元素出现/消失
    // await page.waitForTimeout(500); // 简单的固定延迟，调试用
  }

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

一些注意点： #

• 如果元素是隐藏的、被遮挡的，直接element.click()可能无效，可以试试用element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))来模拟更真实的点击。
• 一定要先等待元素加载完成，用page.waitForSelector('.target-class')确保元素存在后再执行操作，不然会报错找不到元素。

内容的提问来源于stack exchange，提问作者Richlewis