如何用Puppeteer依次点击SVG中指定类的所有元素？

嘿，刚好碰到过类似的需求！针对你要在SVG里遍历所有.bar柱状元素并逐个点击的问题，结合Puppeteer给你分享几个靠谱的实现方式：

这种方式直接使用Puppeteer的API获取元素句柄，然后循环操作，逻辑清晰，适合需要对每个元素做额外处理的场景：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false, sloMo: 80});
  const page = await browser.newPage();
  
  // 替换成你的目标页面地址
  await page.goto('你的页面URL');

  // 等待.bar元素加载完成（关键！如果是动态生成的必须加）
  await page.waitForSelector('.bar');

  // 获取所有.bar元素的句柄
  const barElements = await page.$$('.bar');

  // 遍历每个元素执行点击
  for (const bar of barElements) {
    // 可选：确保元素滚动到视图内，避免因元素不可见导致点击失败
    await bar.scrollIntoView();
    await bar.click();
    
    // 如果点击后有异步操作（比如弹窗、数据加载），这里可以加等待逻辑
    // 示例：等待某个元素出现，或者固定等待一段时间
    // await page.waitForTimeout(600);
    // await page.waitForSelector('.some-element-after-click');
  }

  // 按需关闭浏览器
  // await browser.close();
})();

如果你的.bar元素数量很多，把遍历逻辑放到浏览器端执行能减少Node和浏览器之间的通信开销，速度更快：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false, sloMo: 80});
  const page = await browser.newPage();
  
  await page.goto('你的页面URL');

  // 等待元素加载完成
  await page.waitForSelector('.bar');

  // 在浏览器页面上下文内执行点击逻辑
  await page.evaluate(() => {
    // 注意：如果SVG是嵌套结构，可能需要更精确的选择器，比如 `svg .bar`
    const barElements = document.querySelectorAll('.bar');
    
    barElements.forEach((bar) => {
      // 直接触发点击，也可以用原生事件确保兼容性
      bar.click();
      // 或者：bar.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
      
      // 如果需要等待异步操作，这里可以加延时
      // setTimeout(() => {}, 500);
    });
  });

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

• 确保选择器准确：如果页面其他地方也有.bar类，建议用更精确的选择器，比如svg .bar来定位SVG内的柱状元素。
• 处理动态生成元素：如果你的.bar是通过JS动态渲染的，一定要用page.waitForSelector或page.waitForFunction等待元素完全加载后再操作，避免出现“找不到元素”的错误。
• 解决点击无响应：如果直接click()无效，可以尝试触发原生鼠标事件（比如上面代码里的dispatchEvent），或者调整元素的可见性（比如scrollIntoView）。

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